¿CSS Grid reemplaza a Flexbox? | Programar Plus

No. Bueno. Mayormente No.

Grid es mucho más nuevo que Flexbox y tiene un poco menos de compatibilidad con el navegador. Es por eso que tiene mucho sentido si la gente se pregunta si la cuadrícula CSS está aquí para reemplazar a Flexbox.

Para ponerle un punto:

  1. Grid puede hacer cosas que Flexbox no puede hacer.
  2. Flexbox puede hacer cosas que Grid no puede hacer.
  3. Pueden trabajar juntos: un elemento de la cuadrícula puede ser un contenedor de caja flexible. Un artículo flexible puede ser un contenedor de rejilla.

Aunque Grid es bastante nuevo, tenemos muchos artículos al respecto, incluido un artículo de introducción, un artículo sobre un diseño básico hecho de varias formas y una guía completa.

Si no hubieras escuchado el estruendo de las trompetas, Marzo de 2017 fue el mes excepcional de Grid. Fue lanzado, sin prefijos y listo para usar, en Chrome, Opera, Firefox y Safari. Incluso Edge lo admite, aunque sea una versión anterior de la especificación, para la que puede obtener algo de soporte utilizando Autoprefixer.

Entonces.

¿Grid reemplaza a Flexbox?

Parece un poco complicado al principio. Especialmente si recién está comenzando a dominar la sintaxis extraña y alienígena de Flexbox. Ahora, ¿hay otra sintaxis que aprender? Sheesh.

Aquí hay algunas cosas en las que Grid es específicamente mejor que Flexbox:

  • Realización de diseños de página completa. Es mejor por eso incluso considerando las razones de rendimiento del diseño.
  • Haciendo cuadrículas literales. Como columnas X con un espacio en Y entre ellas, material de marco de cosecha propia. grid-gap es maravilloso, ya que las canaletas son el principal problema de los sistemas de cuadrícula.
  • Requiere menos intervención de consulta de medios con una funcionalidad realmente poderosa como el diseño automático, minmax(), repeat(), y auto-fill. Aquí está una buena idea.

Y otro enorme: Grid puede colocar elementos en 2 dimensiones. Ambas columnas y filas. Esa es la primera vez. Rachel Andrew una vez lo dejó muy claro:

Flexbox es esencialmente para colocar elementos en una sola dimensión: en una fila O en una columna. La cuadrícula es para el diseño de elementos en dos dimensiones: filas Y columnas.

Veamos algunas demostraciones.

Supongamos que estamos construyendo un componente de navegación horizontal; ese es el caso de uso perfecto para Flexbox porque establece el contenido en una sola dirección. En la demostración de Chris a continuación, puede jugar con esas propiedades y ver cuán poderoso es Flexbox:

Vea la navegación de la barra de lápiz con los íconos Flexbox y SVG de Chris Coyier (@chriscoyier) en CodePen.

Pero hay algunos casos en los que esas propiedades de flexbox, como justify-content o align-items, debe usarse junto con las propiedades Grid. Tome esta demostración, por ejemplo:

Vea Pen Flexbox and Grid – Primera demostración de Robin Rendle (@robinrendle) en CodePen.

Primero hemos creado un .wrapper que está configurado para display: flex;. De esa manera podemos establecer un ancho máximo en nuestro .grid y use justify-content: center; para colocarlo en el medio de la ventana gráfica. Entonces podemos hacer nuestra cuadrícula con el número correcto de columnas:

.wrapper {
  display: flex;
  justify-content: center;
}

.grid {
  display: grid;
  max-width: 800px;
  grid-template-columns: 1fr 2fr;
}

Ese es solo el primer paso.

Ahora hagamos eso .ad ocupa toda la fila de nuestra cuadrícula. Bueno, podemos hacer eso dirigiéndonos específicamente a nuestros <div> sin estropear al resto de los hijos de nuestra grilla:

.ad {
  grid-column-start: 1;
  grid-column-end: 3;
}

Lo que estamos diciendo con el código anterior es “comience este div en la primera columna y termine en la última columna”. Eso debería verse así:

Vea Pen Flexbox y Grid de Robin Rendle (@robinrendle) en CodePen.

Además, digamos que siempre quisimos que nuestro bloque de anuncios tuviera el doble del tamaño de nuestra primera fila, ¡podemos hacerlo totalmente! Solo necesitamos usar el grid-template-rows propiedad:

.grid {
  display: grid;
  max-width: 800px;
  grid-template-columns: 1fr 2fr;
  grid-template-rows: 1fr 2fr 1fr;
}

Eso es el equivalente a decir: “hay tres filas en nuestra cuadrícula. Asegúrese siempre de que la segunda fila tenga el doble del tamaño de la primera y la tercera “. En otras palabras, ¡estamos creando relaciones entre filas y otras filas mientras también definimos el número de columnas en nuestra cuadrícula!

Vea Pen Flexbox y Grid de Robin Rendle (@robinrendle) en CodePen.

Con CSS Grid podemos establecer relaciones horizontalmente (con grid-template-columns) y verticalmente (con grid-template-rows) pero al mismo tiempo. Flexbox, por otro lado, se atasca haciendo diseños verticales u horizontales (con flex-direction) – pero eso no significa que debamos deshacernos de él.

Potencialmente confuso: un diseño “2D” con Flexbox

Lo que puede resultar un poco confuso es que no es imposible hacer diseños multidimensionales solo con Flexbox. Por ejemplo:

Vea Pen A “Grid” con Flexbox de Chris Coyier (@chriscoyier) en CodePen.

Ciertamente hay filas y columnas allí, incluso un elemento final que abarca varias columnas. Es fácil de construir y flexible. Se hace permitiendo flex-wrap en el recipiente, teniendo los niños flex-basis ser 1/3 del ancho del contenedor, y permitiendo flex-grow estirar a los niños si es necesario. (El flex propiedad es una abreviatura de flex-grow, flex-shrink, y flex-basis.)

No está mal, es solo una forma de hacer algo como esto, y probablemente podría argumentar que es menos intuitivo y adaptable.

Potencialmente confuso: un diseño “1D” con cuadrícula

Grid puede hacer un diseño 2D, lo que significa definir ambos grid-template-rows y grid-template-columns, pero no tiene que usar ambos. Aquí hay una demostración de cómo usarlo solo para colocar cajas en una fila horizontal:

Vea las columnas Pen Easy con cuadrícula de Chris Coyier (@chriscoyier) en CodePen.

Esto tampoco está mal. De hecho, podría argumentar fácilmente que esto es más fácil de entender y se expresa de manera más sucinta que hacerlo con flexbox. Por ejemplo, no se necesitan propiedades de diseño en los elementos secundarios. Pero también podría argumentar que el diseño puramente 1D como este es más poderoso en Flexbox, porque Flexbox nos permite mover esos elementos más fácilmente (por ejemplo, moverlos todos a un lado u otro, cambiar su orden, espaciarlos uniformemente, etc.).

Acerca de ese anidamiento

¡Una vez más para encerrarlo!

Es bueno recordar esto: los elementos de la cuadrícula pueden ser padres flexibles.

Vea las columnas Pen Easy con cuadrícula de Chris Coyier (@chriscoyier) en CodePen.

Y los elementos flexibles pueden ser padres de cuadrícula:

Vea las columnas Pen Easy con cuadrícula de Chris Coyier (@chriscoyier) en CodePen.

(Visited 8 times, 1 visits today)