Diseño web responsivo usando CSS Grid y Flexbox

El diseño web responsivo es una forma de desarrollar sitios web para que funcionen bien en varios tipos de dispositivos y tamaños de pantalla. En lugar de tener que crear múltiples versiones de un sitio para diferentes dispositivos, el diseño responsivo utiliza cuadrículas y diseños flexibles, consultas de medios e imágenes fluidas para mejorar la experiencia del usuario en todas las plataformas.

¿Por qué es importante el diseño web responsivo?

A medida que más y más personas en todo el mundo utilizan teléfonos móviles y tabletas para navegar por Internet, tener un sitio web responsivo ya no es una opción, es una necesidad. Un diseño responsivo permite una mayor usabilidad al permitir a los consumidores acceder al contenido sin problemas, independientemente del dispositivo que estén utilizando. También mejora la experiencia del usuario al garantizar que el contenido sea visualmente coherente y fácilmente legible en todos los dispositivos. Esto puede reducir la frustración y fomentar la interacción. Es más, el diseño responsivo prepara sitios web para el futuro, permitiéndoles adaptarse a nuevos dispositivos sin tener que realizar rediseños exhaustivos.

Hoy veremos los conceptos básicos del diseño web responsivo y nos centraremos particularmente en dos poderosas técnicas de CSS: Flexbox y CSS Grid. Mostraremos cómo estos diseños se adaptan a diferentes tamaños de pantalla utilizando un sitio web sencillo con cuadros y números coloridos.

Una breve historia del diseño web responsivo

El diseño web responsivo ha cambiado mucho desde los primeros días de Internet. Consultas de medios, que aplican estilos basados ​​en las características del dispositivo, como el tamaño, la resolución y la orientación de la pantalla. se introdujeron a principios de la década de 2000, Flexbox se lanzó en 2012 y CSS Grid se adoptó en 2017. Estas innovaciones han permitido a los diseñadores crear diseños adaptables en varios dispositivos diferentes, brindando una mejor experiencia a los usuarios.

Creación de diseños responsivos con CSS Grid y Flexbox

Ahora, veamos algunos ejemplos prácticos que nos permiten ver cómo funcionan Flexbox y CSS Grid.

Diseño de cuadrícula responsivo: cuadrícula de colores

Crearemos un diseño simple usando CSS Grid.

HTML para diseño de cuadrícula:

    
    
    
    


    

        
1
        
2
        
3
        
4
        
5
        
6
    

HTML:

• El marcado HTML crea un contenedor responsivo (contenedor de cuadrícula) y cuadros coloridos (elemento de cuadrícula) con diferentes números y colores de fondo. La metaetiqueta de la ventana gráfica permite que el diseño se escale en diferentes dispositivos.

CSS para diseño de cuadrícula:

/* styles.css */
body {
    margin: 0;
    font-family: Arial, sans-serif;
    background: #f0f0f0;
}

.grid-container {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(100px, 1fr));
    gap: 10px;
    padding: 20px;
}

.grid-item {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100px;
    color: #fff;
    font-size: 2em;
    border-radius: 8px;
}

CSS:

• El CSS para el diseño de la cuadrícula utiliza diferentes propiedades de la cuadrícula para responder mejor. La pantalla: cuadrícula; La declaración establece el elemento con la clase grid-container como contenedor de grid, para que podamos aprovechar todo lo que las grids tienen para ofrecer. Las columnas de plantilla de cuadrícula: repetir(auto-fit, minmax(100px, 1fr)); La propiedad define cómo se estructuran las columnas de la cuadrícula: ajusta automáticamente el número de columnas en función del espacio disponible, teniendo cada columna un ancho mínimo de 100 píxeles y un máximo de 1 fracción (1fr) del espacio disponible. Este diseño permite que la cuadrícula se adapte a diferentes tamaños de pantalla, de modo que los elementos de la cuadrícula no se desborden ni creen espacios antiestéticos. La brecha: 10px; La propiedad aplica un espaciado consistente a los elementos de la cuadrícula. Por último, apilamos los elementos del elemento de cuadrícula con display: flex; y centrar su contenido con justify-content: center; y alinear elementos: centro. De esta manera, cada elemento queda bien organizado y equilibrado.

Ejemplo de diseño web responsivo: diseño de cuadrícula

Este diseño de cuadrícula utiliza:

1. Recuento dinámico de columnas: la cuadrícula ajusta automáticamente el número de columnas para que se ajusten al ancho de la ventana gráfica, y los elementos ocupan un mínimo de 100 px.
2. Tamaño flexible: el ajuste automático permite que las cajas se reorganicen y reorganicen cuando sea necesario, dándole a todo un aspecto más organizado.
3. Consultas de medios: aunque en realidad no está escrito aquí, la forma en que se comportan los elementos de la cuadrícula con diferentes tamaños de pantalla demuestra el concepto de consultas de medios mediante el uso de propiedades de cuadrícula receptivas.

Diseño responsivo de Flexbox: fila de colores

A continuación, usemos Flexbox para crear una fila simple de cuadros de colores.

HTML para diseño Flexbox:

    
    
    
    


    

        
1
        
2
        
3
        
4
    

HTML:

• Al igual que en el ejemplo de la cuadrícula, el HTML aquí crea un contenedor flexible con cuadros de elementos flexibles que muestran números de colores.

CSS para diseño Flexbox:

/* styles.css */
body {
    margin: 0;
    font-family: Arial, sans-serif;
    background: #f5f5f5;
}

.flex-container {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    padding: 20px;
    gap: 10px;
}

.flex-item {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100px;
    width: 100px;
    color: #fff;
    font-size: 2em;
    border-radius: 8px;
}

CSS:
El CSS aquí utiliza las propiedades de Flexbox para crear un diseño responsivo que se adapta a varios tamaños de pantalla. La pantalla: flexible; en el contenedor .flex le da a sus elementos secundarios, o (elementos flexibles), funcionalidades Flexbox. La envoltura flexible: envoltura; La propiedad permite que los elementos fluyan en varias líneas si se excede el ancho del contenedor. El contenido justificado: centro; La propiedad centra los elementos flexibles a lo largo del eje principal, por lo que hay un diseño equilibrado independientemente de la cantidad de elementos. La brecha: 10px; La propiedad introduce un espacio uniforme entre los elementos, mejorando la organización general. Cada elemento .flex también es un contenedor flexible, que utiliza display: flex; para permitir una mayor alineación de su contenido interno, que se centra tanto vertical como horizontalmente usando justify-content: center; y alinear elementos: centro;. Las dimensiones fijas de altura: 100px; y ancho: 100px; proporcionan uniformidad, mientras que la combinación de estas propiedades le da al diseño un aspecto agradable mientras se adapta a las necesidades de diferentes dispositivos.

Ejemplo de diseño web responsivo: diseño Flexbox

Este diseño de flexbox demuestra varias características de diseño responsivo.

1. Envoltura flexible: La envoltura flexible: wrap; La propiedad hace que los cuadros se muevan a la siguiente línea cuando no caben en la fila, adaptándose a diferentes anchos de ventana gráfica.
2. Elementos centrados: los elementos permanecen centrados independientemente del tamaño de la pantalla, lo que mejora la presentación general.
3. Dimensiones fijas: Las cajas tienen un tamaño específico, pero se ajustan y reajustan según el espacio disponible, lo que permite un diseño responsivo.

Comparando CSS Grid y Flexbox

Cuando se trata de diseño de diseño en CSS, Grid y Flexbox son excelentes opciones, pero tienen diferentes propósitos. CSS Grid es un sistema de diseño bidimensional que le permite crear estructuras de cuadrícula complejas con filas y columnas, lo que lo hace ideal para diseños donde se requiere un control preciso sobre ambas dimensiones, como en aplicaciones web o paneles. Por otro lado, Flexbox es un modelo de diseño unidimensional que distribuye mejor el espacio a lo largo de un solo eje, ya sea horizontal o verticalmente, lo que lo hace perfecto para diseños más simples o componentes más pequeños como botones o menús de navegación. Si bien puede elegir Grid para un diseño integral y estructurado donde los elementos deben alinearse en ambos ejes, Flexbox sería su opción para un diseño fluido y adaptable que debe responder al tamaño del contenido. Al final, tu elección debería depender de las necesidades específicas de tu proyecto; a menudo, usar ambos juntos, de forma complementaria, puede brindarle los mejores resultados.

Conclusión

Con CSS Grid y Flexbox, puedes crear diseños adaptables que se ven geniales en cualquier dispositivo. Estos ejemplos ilustran lo sencillo que puede ser implementar diseños dinámicos.

¡Ahora es tu turno! Experimente con estas técnicas, modifique los colores y la configuración del diseño, y vea lo sencillo que es crear diseños divertidos y responsivos.
``
fuentes:
https://www.w3schools.com/css/css3_flexbox.asp
https://www.w3schools.com/css/css_grid.asp
https://developer.mozilla.org/en-US/docs/Learn/CSS/CSS_layout
https://kinsta.com/blog/responsive-web-design/#4-flexbox-layout
https://css-tricks.com/snippets/css/a-guide-to-flexbox/
https://css-tricks.com/snippets/css/complete-guide-grid/
https://blog.logrocket.com/css-flexbox-vs-css-grid/#:~:text=Para un estilo de diseño importante, resulta útil cuando se trabaja con filas.