CSS Grid y Flexbox son dos métodos de maquetación en CSS que permiten crear diseños complejos y flexibles para la web. Aunque sus usos se parecen, cada uno tiene funcionalidades propias y casos ideales distintos. En este CSS Grid vs Flex vamos a ver las ventajas y los inconvenientes de cada uno, y cuándo conviene usar uno u otro.
Display Grid
Display Grid es un sistema de maquetación en cuadrícula pensado para crear diseños basados en rejilla. Te permite definir filas y columnas en tu página y colocar elementos dentro de esas filas y columnas. Es decir, puedes alinear y organizar los elementos de tu página de forma coherente y estructurada sin esfuerzo.
Este es un ejemplo de código HTML/CSS que usa CSS Grid para crear una cuadrícula de 3 columnas y 3 filas:
Código HTML Grid
<div class="grid-container">
<div class="grid-item">1</div>
<div class="grid-item">2</div>
<div class="grid-item">3</div>
<div class="grid-item">4</div>
<div class="grid-item">5</div>
<div class="grid-item">6</div>
<div class="grid-item">7</div>
<div class="grid-item">8</div>
<div class="grid-item">9</div>
</div>Código CSS Grid
.grid-container {
display: grid;
grid-template-columns: repeat(3, 1fr);
grid-template-rows: repeat(3, 1fr);
gap: 1rem;
border: 1px dashed #000;
padding: 5px;
}
.grid-item {
background: #e74c3c;
padding: .5rem;
color: white;
text-align: center;
}Display Flex
Flexbox es un sistema de maquetación pensado para crear layouts flexibles capaces de adaptarse a tamaños de pantalla y de contenedor variables. Te permite definir dimensiones relativas para los elementos de tu layout y alinearlos con precisión.
Otro ejemplo de código HTML/CSS que usa Flexbox para alinear:
Código HTML Flex
<div class="flex-container">
<div class="flex-item">Logo</div>
<div class="flex-item">Menu</div>
<div class="flex-item">Champ de Recherche</div>
</div>Código CSS Flex
.flex-container {
display: flex;
justify-content: center;
gap: 1rem;
border: 1px dashed #000;
padding: 5px;
}
.flex-item {
border: 1px dashed #e74c3c;
padding: 10px;
}Comparación entre Flex y Grid
CSS Grid vs Flex: el mismo código, esta vez con Grid, y vas a entender la diferencia en el tamaño relativo de los elementos.
Código HTML Grid vs Flex
<div class="grid-container">
<div class="grid-item">Logo</div>
<div class="grid-item">Menu</div>
<div class="grid-item">Champ de Recherche</div>
</div>El gran espacio entre el ejemplo y el código HTML no es un fallo de tu navegador. Le hemos indicado a nuestra cuadrícula 3 columnas y 3 filas, así que respeta esa estructura pase lo que pase. Display Grid sigue al pie de la letra la estructura que hemos declarado en CSS ¡aunque no haya elementos hijos .grid-item!
CSS Grid o Flex: ¿cuándo usar uno u otro?
Conviene entender las ventajas y los inconvenientes de cada herramienta para elegir la que mejor encaja en tu proyecto. En conjunto, CSS Grid es ideal para los diseños basados en cuadrícula, como los porfolios y las galerías de imágenes, mientras que Flexbox es ideal para los diseños flexibles y adaptables, como los menús flex y las barras de herramientas.
Un ejemplo para entenderlo mejor: imagina que quieres crear el layout de la página de inicio de una tienda online. Ese layout debe contener imágenes de productos destacados, secciones para las categorías de productos, una barra de navegación y un formulario de búsqueda. En ese caso, podrías usar CSS Grid para organizar en una cuadrícula las imágenes de los productos destacados, y Flexbox para alinear de forma eficaz las secciones de categorías, la barra de navegación y el formulario de búsqueda.
las dos herramientas también se pueden usar juntas para crear diseños aún más avanzados. Por ejemplo, podrías usar CSS Grid para crear una cuadrícula de columnas y filas, y luego Flexbox para alinear los elementos dentro de cada celda. Así combinas las ventajas de cada herramienta y consigues diseños todavía más potentes y flexibles.
En resumen, CSS Grid es la herramienta ideal para los diseños basados en cuadrícula, como los porfolios y las galerías de imágenes, mientras que Flexbox lo es para los diseños flexibles y adaptables, como los menús flexbox y las barras de herramientas. Usando las dos a la vez puedes crear diseños aún más avanzados y cubrir las necesidades de tu proyecto.
