Explore las diferencias entre estos métodos de diseño CSS modernos con un problema práctico: alinear columnas.

Cuando se trata de diseños CSS, las dos herramientas principales a tu disposición son Grid y Flexbox. Si bien ambos son excelentes para crear diseños, tienen diferentes propósitos y tienen diferentes fortalezas y debilidades.

Aprenda cómo se comportan ambos métodos de diseño y cuándo usar uno sobre el otro.

El comportamiento diferente de CSS Flexbox y Grid

Para ayudar a visualizar las cosas, cree una índice.html archivo en su carpeta preferida y pegue el siguiente marcado:

html>
<htmllang="en">
<head>
<linkrel="stylesheet"href="style.css">
head>
<body>
<h1>Flexbox vs Gridh1>
<h2>Flexbox:h2>


<divclass="flex-container">
<div>Lorem.div>
<div>Lorem ipsum dolor sit amet.div>
<div>Lorem ipsum dolor sit amet consectetur.div>
<div>Lorem ipsum dolor sit.div>
<div>Lorem ipsum dolor sit amet consectetur adipisicing elit.div>
<div>Lorem ipsum dolor sit amet.div>
<div>Lorem ipsum dolor sit amet consectetur.div>
<div>Lorem ipsum dolor sit.div>
div>


<h2>Grid:h2>





instagram viewer

<divclass="grid-container">
<div>Lorem.div>
<div>Lorem ipsum dolor sit amet.div>
<div>Lorem ipsum dolor sit amet consectetur.div>
<div>Lorem ipsum dolor sit.div>
<div>Lorem ipsum dolor sit amet consectetur adipisicing elit.div>
<div>Lorem ipsum dolor sit amet.div>
<div>Lorem ipsum dolor sit amet consectetur.div>
<div>Lorem ipsum dolor sit.div>
div>
body>
html>

Ambos divs contienen exactamente los mismos hijos, por lo que puedes aplicar un sistema diferente a cada uno y compararlos.

También puede ver que el HTML importa un archivo de hoja de estilo llamado estilo.css. Cree este archivo en la misma carpeta que índice.html y pegue los siguientes estilos en él:

body {
padding: 30px;
}
h1 {
color: #A52A2A;
}


h2 {
font-size: large;
}
div:not([class]) {
outline: 2pxsolidblack;
padding: 0.5em;
}

Tu página debería verse así:

Ahora, para dar vuelta al primero en una columna flexible, simplemente agregue el siguiente código a su hoja de estilo:

.flex-container {
display: flex;
}

Este es el resultado:

El contenedor flexible div ahora presenta sus elementos secundarios en columnas. Estas columnas son flexibles y receptivas: adaptan su ancho según el espacio disponible en la ventana gráfica. Este comportamiento es uno de los principales conceptos básicos detrás de Flexbox.

Para evitar que las columnas se desborden en el contenedor flexible, puedes usar el envoltura flexible propiedad:

.flex-container {
display: flex;
flex-wrap: wrap;
}

Si no hay suficiente espacio para que los elementos secundarios quepan en una línea, ahora se ajustarán y continuarán en la siguiente.

Ahora aplique un diseño de cuadrícula al segundo usando este CSS:

.grid-container {
display: grid;
}

No sucederá nada solo con la declaración anterior porque el comportamiento predeterminado de Grid crea filas que se apilan una encima de la otra.

Para cambiar a una visualización de columnas, debe cambiar el flujo automático de cuadrícula propiedad (que es fila por defecto):

.grid-container {
display: grid;
grid-auto-flow: column;
}

Ahora aquí está el resultado:

Para especificar el número exacto de columnas que desea en cada línea, utilice columnas-plantilla-cuadrícula:

.grid-container {
display: grid;
grid-template-columns: repeat(5, 1fr);
}

Este valor crea cinco columnas del mismo ancho. Para obtener un comportamiento de ajuste similar al de Flexbox, puede utilizar propiedades de respuesta como ajuste automático y mínimo máximo:

.grid-container {
display: grid;
grid-template-columns: repeat(auto-fit, min-max(300px, 1fr));
}

A menudo escuchará que se hace referencia a Flexbox y Grid como unidimensionales y bidimensionales, respectivamente. Sin embargo, esa no es toda la verdad, porque tanto Flexbox como Grid pueden hacer una sistema de diseño bidimensional. Simplemente lo hacen de diferentes maneras, con diferentes limitaciones.

Lo más importante es la forma en que puedes controlar el aspecto unidimensional del diseño. Considere la siguiente imagen, por ejemplo:

Observe qué tan consistente es la columna Grid y qué tan desigual es cada columna en Flexbox. Cada fila/columna en un contenedor flexible es independiente de la otra. Por lo tanto, algunos pueden ser más grandes que otros, dependiendo del tamaño de su contenido. Se parecen menos a columnas y más a bloques independientes.

Grid funciona de manera diferente, configurando una cuadrícula 2D con columnas bloqueadas de forma predeterminada. Una columna con texto breve tendrá el mismo tamaño que una con texto mucho más largo, como lo demuestra la imagen de arriba.

En resumen, CSS Grid está un poco más estructurado, mientras que Flexbox es más sistema de diseño flexible y responsivo. ¡Estos sistemas de diseño alternativos tienen buenos nombres!

Cuándo utilizar Flexbox

¿Quiere confiar en el tamaño intrínseco de cada columna/fila, según lo definido por su contenido? ¿O desea tener un control estructurado desde la perspectiva de los padres? Si tu respuesta es la primera, entonces Flexbox es la solución perfecta para ti.

Para demostrar esto, considere un menú de navegación horizontal. Reemplace el marcado dentro del etiquetas con esto:

<h1>Flexbox vs. Gridh1>
<headerclass="flex">
<h2>Flexboxh2>


<nav>
<ulclass="nav-list">
<li><ahref="">Homea>li>
<li><ahref="">About Usa>li>
<li><ahref="">Service Information Goes Herea>li>
<li><ahref="">Blog Contacta>li>
<li><ahref="">a>li>
ul>
nav>
header>


<headerclass="grid">
<h2>Gridh2>
<nav>
<ulclass="nav-list">
<li><ahref="">Homea>li>
<li><ahref="">About Usa>li>
<li><ahref="">Service Information Goes Herea>li>
<li><ahref="">Blog Contacta>li>
<li><ahref="">a>li>
ul>
nav>
header>

Reemplace el marcado en el archivo CSS con esto:

.nav-list {
list-style: none;
margin: 0;
padding: 0;
}
header {
--border-width: 5px;
border: var(--border-width) solidblack;
margin-bottom: 30px;
}


header > *:first-child {
border: var(--border-width) solid#FFC0CB;
margin: 0;
}
li {
border: var(--border-width) solid#90EE90;
}

Aquí está el resultado:

Ahora, transforma la primera navegación en un diseño flexible y la segunda en un diseño de cuadrícula agregando el siguiente CSS:

.flex.nav-list {
display: flex;
gap: 1em;
flex-wrap: wrap;
}
.grid.nav-list {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
}

Compare los resultados para ver cuál era más adecuado:

En la imagen de arriba, puedes ver que Flexbox es la solución perfecta en este caso. Tiene elementos que desea colocar uno al lado del otro y mantener su tamaño intrínseco (grande o pequeño según la longitud del texto). Con Grid, cada celda tiene un ancho fijo y no se ve tan bien, al menos con enlaces de texto sin formato.

Cuándo utilizar la cuadrícula CSS

Un lugar en el que Grid realmente sobresale es cuando quieres crear un sistema rígido a partir del padre. Un ejemplo es un conjunto de elementos de tarjeta que deben ser igualmente anchos, incluso si contienen diferentes cantidades de contenido.

Reemplace las marcas dentro del etiquetas con esto:

<h1>Flexbox vs. Gridsh1>
<sectionclass="cards">
<h2>Some cardsh2>


<divclass="columns">
<articleclass="card">
<h3class="card__title">Fun Stuffh3>
<p>Lorem ipsum, dolor sit amet consectetur adipisicing elit.p>


<ul>
<li>Loremli>
<li>Ipsumli>
<li>Excavateli>
ul>
article>


<articleclass="card">
<h3class="card__title">Fun Stuffh3>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit.p>


<ul>
<li>Loremli>
<li>Ipsumli>
<li>Excavateli>
ul>
article>


<articleclass="card">
<h3class="card__title">A Longer Title Than Othersh3>


<p>Lorem ipsum, dolor sit amet consectetur adipisicing elit. Facere
 excepturi sit ea dolores totam veniam qui voluptates commodi,
 perferendis et!p>
<ul>
<li>Loremli>
<li>Ipsumli>
<li>Excavateli>
ul>
article>
div>
section>

Añade este CSS:

.columns {
display: flex;
gap: 1em;
}
article {
background-color: #90EE90;
color: black;
padding: 15px;
}
ul {
background-color: white;
padding: 2px;
list-style: none;
}

Está comenzando con una pantalla Flexbox para ver cómo se ve, para poder compararla con la pantalla de cuadrícula. Aquí está el resultado:

Observe cómo la última columna es más grande que otras debido a su tamaño intrínseco, que es lo que Flexbox maneja bien. Pero para que tengan el mismo ancho usando Flexbox, tendrías que ir en contra de ese tamaño intrínseco agregando lo siguiente:

.columns > * {
flex: 1;
}

Esto funciona. Pero Grid es más adecuado para casos como este. Simplemente especifica el número de columnas y listo:

.columns {
display: grid;
grid-template-columns: 1fr 1fr 1fr;
gap: 1em;
}

Aquí está el resultado:

Otra ventaja de usar Grid es que el padre controla el diseño de los hijos. De esta forma, puedes agregar y eliminar elementos secundarios sin preocuparte por alterar el diseño.

Entonces, ¿cuándo debería utilizar Grid o Flexbox?

En resumen, CSS Grid es excelente cuando desea un control estructurado desde la perspectiva de los padres, con el mismo tamaño de columnas independientemente del tamaño de su contenido individual.

Flexbox, por otro lado, es ideal cuando se desea un sistema más flexible basado en el tamaño intrínseco de los elementos.