CSS Grid y CSS Flexbox son tecnologías de diseño web complementarias que han sido muy esperadas durante años. Sin embargo, a pesar de algunas similitudes superficiales, en realidad se utilizan para tareas muy diferentes; cada uno resuelve un conjunto muy diferente de problemas.
En un escenario ideal, puede encontrar que emplea ambos para diferentes tareas de diseño. En esta publicación, veremos sus diferencias, veremos cómo resuelven varios problemas de diseño y lo ayudaremos a elegir cuál (si es que alguna) es la solución adecuada para su problema.
Grid está basado en contenedores, Flexbox está basado en contenido
En el diseño de flexbox, el tamaño de una celda (elemento flexible) se define dentro del mismo elemento flexible, y en el diseño de la cuadrícula, el tamaño de una celda (elemento de cuadrícula) se define dentro del contenedor grid.
¿Confuso?
Veamos un ejemplo, aquí está el HTML para crear una fila de elementos:
<div class="row">
<div>1</div>
<div>2</div>
<div>3</div>
<div>4</div>
</div>Y diseñamos esto usando flexbox así:
.row {
margin: 20px auto;
max-width: 300px;
display: flex;
}
.row > div {
border: 1px dashed gray;
flex: 1 1 auto; /* Size of items defined inside items */
text-align: center;
padding: 12px;
}Definimos el tamaño de las celdas dentro del elemento flexible configurando flexible: 1 1 automático;. los flexionar propiedad es la abreviatura de establecer crecimiento flexible, flexión-encogimientoy base flexible propiedades en una declaración; su valor predeterminado es 0 1 automático. Observe la «fila» div es el contenedor flexible y no establecemos el tamaño de los elementos allí. Establecemos el tamaño dentro del elemento flexible.
Cuando se obtiene una vista previa en un navegador, obtenemos una fila de cuadros, como era de esperar:
Ahora veamos cómo podemos generar la misma salida usando grid:
.row {
margin: 20px auto;
max-width: 300px;
display: grid;
grid-template-columns: 1fr 1fr 1fr 1fr; /* Size of items defined inside container */
}
.row div {
border: 1px dashed gray;
text-align: center;
padding: 12px;
}El código anterior nos dará exactamente el mismo resultado.
Note, ahora estamos definiendo el tamaño de la celda usando cuadrícula-plantilla-columnas dentro del contenedor de rejilla (.fila), no el elemento de cuadrícula.
Esta es una diferencia importante. Muestra que el diseño de flexbox se calcula después de cargar su contenido, mientras que el diseño de cuadrícula se calcula independientemente del contenido que contiene. Por lo tanto, si es posible, evite usar flexbox para crear el diseño general de su sitio web.
Grid tiene una propiedad de «brecha», Flexbox no
Puede argumentar que una gran diferencia entre flexbox y grid es que en este último podemos crear canales entre elementos de cuadrícula usando cuadrícula-columna-brecha, al igual que:
Para lograr el mismo resultado en flexbox, tendríamos que usar relleno y contenedores anidados, o aumentar el ancho del contenedor flexible y usar el justificar-contenido propiedad para difundir la artículos flexibles.
Tenemos que tomar una ruta tortuosa en flexbox porque no tiene un brecha propiedad. Sin embargo, está en camino; la Módulo de alineación de cuadro CSS 3 contiene funciones CSS relacionadas con la alineación de cuadros en todos los modos de diseño: diseño de bloque, diseño de tabla, diseño flexible y diseño de cuadrícula. El módulo Box Alignment recopila propiedades de flexbox, grid y multicolumna que se pueden usar de manera consistente en todos los modelos de diseño. Eventualmente seremos capaces de agregar brechas con espacio entre filas y espacio entre columnas propiedades, pero aún no.
Flexbox es unidimensional, Grid es bidimensional
Hemos estado organizando elementos como filas y columnas en la web desde que usamos tablas para el diseño. Tanto flexbox como grid se basan en este concepto. Flexbox es mejor para organizar elementos en una sola fila o en una sola columna. La cuadrícula es mejor para organizar elementos en varias filas y columnas.
En otras palabras, Flexbox es unidimensional y Grid es bidimensional. Veamos un diseño unidimensional de uso común: los botones para compartir en redes sociales:
Todos los elementos están en una sola fila. Podemos implementar esto usando Flexbox así:
<ul class="social-icons">
<li><a href="#"><i class="fab fa-facebook-f"></i></a></li>
<li><a href="#"><i class="fab fa-twitter"></i></a></li>
<li><a href="#"><i class="fab fa-instagram"></i></a></li>
<li><a href="#"><i class="fab fa-github"></i></a></li>
<li><a href="#"><i class="fas fa-envelope"></i></a></li>
<li><a href="#"><i class="fas fa-rss"></i></a></li>
</ul>
.social-icons {
display: flex;
list-style: none;
justify-content: space-around;
}los justificar-contenido La propiedad determina cómo se distribuye el espacio adicional del contenedor flexible a los artículos flexibles. los espacio alrededor value distribuye el espacio de tal manera que los elementos flexibles se colocan uniformemente con la misma cantidad de espacio alrededor de ellos.
A continuación, echemos un vistazo a un diseño bidimensional de uso común:
No podemos implementar este diseño con una sola fila o una sola columna, necesitamos varias filas y columnas para hacerlo, y ahí es donde usamos CSS Grids. Hagámoslo usando CSS Grid:
<div class="container">
<header>Header</header>
<main>Main</main>
<aside>Aside</aside>
<footer>Footer</footer>
</div>y el CSS:
.container {
max-width: 800px;
margin: 2em auto;
display: grid;
grid-template-columns: 3fr 1fr;
grid-template-rows: repeat(3,auto);
grid-gap: 1rem;
}
.container header {
grid-area: 1/1/2/3;
}
.container main {
grid-area: 2/1/3/2;
}
.container aside {
grid-area: 2/2/3/3;
}
.container footer {
grid-area: 3/1/4/3;
}
.container > * {
background-color: #ddd;
padding: 1rem;
}Estamos creando dos columnas usando el cuadrícula-plantilla-columnas propiedad, y tres filas usando cuadrícula-plantilla-filas propiedad. los repetir() función crea 3 filas con auto altura.
Luego, dentro de los elementos de cuadrícula (encabezamiento, principal, aparte y pie de página) definimos cuánta área cubrirán esos elementos de cuadrícula usando el área de cuadrícula propiedad.
Envolturas Flexbox vs Envolturas de rejilla
Cuando el ancho total de los elementos dentro del contenedor es mayor que el ancho del contenedor, en ese caso ambos modelos de diseño tienen la opción de envolver los elementos en una nueva fila. Sin embargo, la forma en que ambos manejan el envoltorio es diferente.
Veamos esa diferencia creando un diseño de muestra. Cree dos filas y coloque 6 divs dentro de cada fila:
<h2>Flexbox</h2>
<div class="row-flex">
<div>1 2 3 4 5 6 7 8 9 0</div>
<div>2</div>
<div>3</div>
<div>4</div>
<div>5</div>
<div>6</div>
</div>
<h2>Grid</h2>
<div class="row-grid">
<div>1 2 3 4 5 6 7 8 9 0</div>
<div>2</div>
<div>3</div>
<div>4</div>
<div>5</div>
<div>6</div>
</div>Ahora, usaremos Flexbox para diseñar la primera fila y Grid para la segunda:
/* Flexbox row styles */
.row-flex {
margin: 40px auto;
max-width: 600px;
display: flex;
flex-wrap: wrap;
}
.row-flex div {
border: 1px dashed gray;
flex: 1 1 100px;
text-align: center;
padding: 12px;
}
/* Grid row styles */
.row-grid {
margin: 40px auto;
max-width: 600px;
display: grid;
grid-template-columns: repeat(auto-fill, minmax(100px, 1fr));
}
.row-grid div {
border: 1px dashed gray;
text-align: center;
padding: 12px;
}Para la primera fila, estamos usando flexión: 1 1 100px para dar a los elementos flexibles un ancho base de 100 px y permitir que crezcan y se encojan.
También estamos habilitando el envoltorio de artículos flexibles dentro del contenedor flexible configurando el envoltura flexible propiedad a envolversu valor por defecto es ahora rap.
Para la segunda fila, estamos usando el cuadrícula-plantilla-columnas propiedad para crear columnas con un ancho mínimo de 100 px establecido por el mínimo máximo() función. Estamos usando repetir() Función para crear columnas repetidamente.
Puede ver que la belleza de Grid y Flexbox radica en la capacidad de estirar y apretar los elementos en función de la cantidad de espacio disponible. Flexbox logra esto usando crecimiento flexible y flexión-encogimiento propiedades, y Grid logra esto usando una combinación de mínimo máximo y autocompletar funciones dentro de la cuadrícula-plantilla-columnas propiedad.
Sin embargo, mire cuidadosamente la celda. 5 y celular 6 a medida que son empujados hacia abajo. En el caso de Flexbox, la celda 5 y 6 no son del mismo tamaño que otras celdas cuando se empujan hacia abajo. Mientras que en el caso de Grid, conservan el mismo tamaño que todas las demás celdas de la cuadrícula.
Esto sucede porque cuando un elemento flexible se envuelve y se coloca en una nueva fila, el algoritmo de diseño de Flexbox lo trata como parte de un contenedor flexible diferente. Por lo tanto, el elemento empujado pierde su contexto.
Este comportamiento podría usarse en algunos casos de uso, por ejemplo, un formulario de suscripción de correo electrónico:
Construyamos este formulario de suscriptor:
<div class="subscriber-form-container">
<form>
<input type="email" placeholder="Email Address">
<input type="text" placeholder="Name">
<input type="submit" value="Subscribe">
</form>
</div>y darle algunos estilos en nuestro CSS:
.subscriber-form-container {
max-width: 650px;
margin: 40px auto;
border: 1px dashed gray;
box-sizing: border-box;
}
.subscriber-form-container form {
display: flex;
flex-wrap: wrap;
}
.subscriber-form-container form input {
margin: 6px;
padding: 0.4rem;
box-sizing: border-box;
}
.subscriber-form-container form input{
flex: 1 1 150px;
}
.subscriber-form-container form input[type="email"] {
flex: 2 1 300px;
}los flexionar propiedad es la abreviatura de tres propiedades: crecimiento flexible, reducción flexible, y base flexible. Queremos el ancho de la «Email» el campo sea el doble del ancho de otros dos elementos de entrada, y logramos esto usando su “crecimiento flexible” y “base flexible”.
los “crecimiento flexible” propiedad de los elementos de entrada se establece en “1”, pero el elemento de entrada de correo electrónico se establece en 2. Por lo tanto, cuando hay espacio adicional disponible, el elemento de entrada de correo electrónico crecerá el doble en comparación con otros elementos de entrada.
Flexbox supera a Grid en este caso de uso. Sí, podría usar algún truco para que CSS Grid replique este comportamiento usando mínimo máximo() función, pero Flexbox es muy adecuado para este tipo de diseños unidimensionales.
Sin embargo, si desea un diseño multidimensional con los elementos envueltos manteniendo sus anchos, por ejemplo, una galería de imágenes, Grid es la mejor opción:
Una cosa más, ¿se dio cuenta de que no estamos usando ninguna consulta de medios aquí? Esto se debe a que los diseños Flexbox y Grid se basan en el concepto de capacidad de respuesta y, por lo tanto, reducen el uso de Media Queries.
¿CSS Grid hará que Flexbox quede obsoleto en el futuro?
Absolutamente no.
De hecho, de eso se trata este artículo. CSS grid y Flexbox, ambos están diseñados para resolver un conjunto diferente de problemas.
Actualmente, CSS Grid no tiene suficiente soporte en los navegadores para hacer sitios web listos para producción. La regla general que utilizo es que una característica debe cubrir más del 95 % del uso global. Solo entonces uso esa función en sitios web reales. Actualmente, Flexbox cubre 95% del uso globaly cubiertas de rejilla 87% del uso global.
Pronto, Grid también obtendrá un buen soporte entre los navegadores, y usaremos una combinación de Grids y Flexboxes para crear diseños de sitios web sorprendentes que antes no eran posibles.
Foto principal a través de DepositPhotos.