Krypton Solid

Grid Vs Flexbox: ¿Cuál debería elegir?

Grid Vs Flexbox: ¿Cuál debería elegir?

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 de problemas muy diferente.

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 hay alguna) es la solución adecuada para su problema.

Grid está basado en contenedores, Flexbox está basado en contenido

En el diseño de caja flexible, el tamaño de una celda (artículo flexible) se define dentro del elemento flexible en sí, y en el diseño de la cuadrícula, el tamaño de una celda (elemento de cuadrícula) se define dentro del contenedor de cuadrícula.

¿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 le damos estilo a 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 estableciendo flex: 1 1 automático;. La flexionar propiedad es una forma abreviada de establecer crecimiento flexible, flexión-encogimiento, y 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.

Observe, ahora estamos definiendo el tamaño de la celda usando columnas-plantilla-cuadrícula dentro del contenedor de rejilla (.fila), no el elemento de la cuadrícula.

Esta es una diferencia importante. Muestra que el diseño de la caja flexible está calculado después su contenido se carga mientras que el diseño de la cuadrícula se calcula independientemente del contenido dentro de él.

Grid tiene una propiedad «Gap», Flexbox no

Puede argumentar que una gran diferencia entre flexbox y grid es que en este último podemos crear canalones entre elementos de cuadrícula utilizando rejilla-columna-hueco, al igual que:

screencap-2

Para lograr el mismo resultado en flexbox tendríamos que usar relleno y contenedores anidados, o aumentar el ancho del flex-container y usar el justificar el contenido propiedad para difundir el 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 3 de alineación de cajas CSS contiene características CSS relacionadas con la alineación de cajas 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 utilizar de forma coherente en todos los modelos de diseño. Eventualmente podremos agregar brechas con espacio entre filas y espacio entre columnas propiedades, pero aún no.

Flexbox es unidimensional, la cuadrícula es bidimensional

Hemos estado organizando elementos como filas y columnas en la web desde que usamos tablas para el diseño. Tanto el flexbox como el 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="https://www.webdesignerdepot.com/2018/09/grid-vs-flexbox-which-should-you-choose/#"><i class="fab fa-facebook-f"></i></a></li>
  <li><a href="https://www.webdesignerdepot.com/2018/09/grid-vs-flexbox-which-should-you-choose/#"><i class="fab fa-twitter"></i></a></li>
  <li><a href="https://www.webdesignerdepot.com/2018/09/grid-vs-flexbox-which-should-you-choose/#"><i class="fab fa-instagram"></i></a></li>
  <li><a href="https://www.webdesignerdepot.com/2018/09/grid-vs-flexbox-which-should-you-choose/#"><i class="fab fa-github"></i></a></li>
  <li><a href="https://www.webdesignerdepot.com/2018/09/grid-vs-flexbox-which-should-you-choose/#"><i class="fas fa-envelope"></i></a></li>
  <li><a href="https://www.webdesignerdepot.com/2018/09/grid-vs-flexbox-which-should-you-choose/#"><i class="fas fa-rss"></i></a></li>
</ul>

.social-icons {
  display: flex;
  list-style: none;
  justify-content: space-around;
}

La justificar el contenido La propiedad determina cómo se distribuye el espacio extra del contenedor flexible a los elementos flexibles. La espacio alrededor value distribuye el espacio de tal manera que los elementos flexibles se colocan uniformemente con la misma cantidad de espacio a su alrededor.

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 hacer eso, 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 columnas-plantilla-cuadrícula propiedad, y tres filas usando rejilla-plantilla-filas propiedad. La repetir() La función crea 3 filas con auto altura.

Luego, dentro de los elementos de la cuadrícula (encabezamiento, principal, aparte y pie de página) definimos cuánta área cubrirán esos elementos de la cuadrícula usando el área de cuadrícula propiedad.

Envolturas Flexbox vs Envolturas de cuadrícula

Cuando el ancho total de los artículos 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 artículos en una nueva fila. Sin embargo, la forma en que ambos manejan la envoltura es diferente.

Veamos esa diferencia creando un diseño de muestra. Crea dos filas y coloca 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 flex: 1 1 100px para dar a los elementos flexibles un ancho base de 100px y permitir que crezcan y se encojan.

También estamos habilitando el envasado de elementos flexibles dentro del contenedor flexible configurando el envoltura flexible propiedad a envoltura, su valor predeterminado es Nowrap.

Para la segunda fila, usamos el columna-plantilla-cuadrículas propiedad para crear columnas con un ancho mínimo de 100px 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 según 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 del columnas-plantilla-cuadrícula propiedad.

Sin embargo, mire atentamente la celda 5 y celular 6 a medida que se empujan hacia abajo. En el caso de Flexbox, la celda 5 y 6 no son del mismo tamaño que otras celdas cuando se presionan hacia abajo. Mientras que en el caso de la cuadrícula, 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 inserta en una nueva fila, el algoritmo de diseño de Flexbox lo trata como parte de un diferente contenedor flexible. Por tanto, el elemento empujado pierde su contexto.

Este comportamiento podría usarse en algunos casos de uso, por ejemplo, un formulario de suscriptor 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;
}

La flexionar property es la abreviatura de tres propiedades: Flex-Grow, Flex-Shrink, y base flexible. Queremos el ancho del «Email» campo para ser el doble del ancho de otros dos elementos de entrada, y lo logramos usando su «Flex-grow» y “Base flexible”.

La «Flex-grow» propiedad de los elementos de entrada se establece en «1», pero el del 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á dos veces 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 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 usamos ninguna consulta de medios aquí? Esto se debe a que los diseños de Flexbox y Grid se basan en el concepto de capacidad de respuesta y, por lo tanto, reducen el uso de consultas de medios.

¿CSS Grid hará que Flexbox sea obsoleto en el futuro?

Absolutamente no.

De hecho, de eso trata este artículo.

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 función debe cubrir más del 95% del uso global. Solo entonces uso esa función en sitios web reales. Actualmente, cubiertas Flexbox 95% del uso globaly cubiertas de cuadrícula 87% del uso global.

Pronto Grid también tendrá un buen soporte entre los navegadores, y usaremos una combinación de Grids y Flexboxes para crear diseños de sitios web increíbles que antes no eran posibles.

Foto principal a través de DepositPhotos.

Deja un comentario