Introducción a CSS Grid | Programar Plus

¿Por qué CSS Grid es tan importante y por qué debería importarnos?

Bueno, CSS Grid es el primer sistema de diseño real para la web. Está diseñado para organizar el contenido tanto en columnas como en filas y finalmente les da a los desarrolladores un control casi divino de las pantallas que tenemos ante nosotros. Eso significa que finalmente podemos deshacernos de décadas de hacks y soluciones para configurar elementos en una página web; en última instancia, significa que los diseños complejos y las páginas bellamente compuestas ahora no solo son posibles, sino también fáciles y fáciles de mantener.

Con CSS Grid, la web está a punto de convertirse en un lugar mucho más hermoso de lo que estamos acostumbrados.

Bien, pero ¿cómo funciona Grid? Hay muchos tutoriales complejos que entran en una gran cantidad de detalles, pero creo que deberíamos comenzar con los conceptos básicos. Lo que haremos aquí es una muestra de tipo relativamente simple, con un montón de caracteres de un alfabeto dispuestos en una página.

Para comenzar, agregaremos nuestro marcado:

<div class="wrapper">
  <div class="letter">
    A
  </div>
  <div class="letter">
    B
  </div>
</div>

Primero, diseñaremos esas letras para usarlas correctamente. font-size y color y luego centraremos esas letras en los divs con propiedades de flexbox como align-items y justify-content. ¡Y sí, es cierto! CSS Grid no reemplaza las propiedades de flexbox tanto como complementa lo que ya hacen. Incluso podemos usar muchas de estas propiedades junto con CSS Grid. Pero por ahora volvamos a la demostración:

En el ejemplo anterior, tenemos dos divs simples uno encima del otro porque están predeterminados es display: block. A continuación, configuraremos nuestro elemento padre para usar el diseño de cuadrícula:

.wrapper {
  display: grid;
}

Lo que luego conducirá a esto:

Consulte la demostración de cuadrícula de muestras tipo pluma – 1 de Robin Rendle (@robinrendle) en CodePen.

Ahora puede ver que en realidad no pasó nada. ¡Y tendrías razón! A diferencia de la configuración display: inline-block; o display: inline;, no está del todo claro qué sucede cuando configuramos la pantalla en grid. De hecho, para que nuestra cuadrícula realmente haga algo, primero debemos alimentarla con un cierto número de columnas o filas. En este ejemplo, alinearemos las letras una al lado de la otra en dos columnas:

.wrapper {
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-column-gap: 1px;
  background-color: black;
}

Analicemos estas nuevas líneas de código. Primero creamos dos columnas de nuestra cuadrícula con grid-template-columns. Ese 1fr El valor puede parecer muy extraño si nunca lo ha visto antes, pero es una unidad CSS válida que le dice a cada columna que sea una fracción de nuestra cuadrícula. En este caso, eso significa que habrá dos columnas de igual ancho.

Esto terminará luciendo algo como esto:

Consulte la demostración de cuadrícula de muestras tipo pluma – 2 de Robin Rendle (@robinrendle) en CodePen.

¡Hurra! Funciona. Pero, ¿ves esa curiosa brecha entre las dos columnas? Ese es el trasfondo de la wrapper alcanzando su punto máximo a través de cada letter div y eso es porque hemos establecido el grid-column-gap propiedad a 1px. Por lo general, querríamos dar una mayor column-gap entonces eso, especialmente si estamos alineando bloques de texto uno al lado del otro. Pero en este caso, un solo píxel es suficiente para nosotros.

Entonces, ¿qué sucede si agregamos dos letras nuevas a nuestro marcado? ¿Cómo cambiará eso el diseño?

<div class="wrapper">
  <div class="letter">
    A
  </div>
  <div class="letter">
    B
  </div>
  <div class="letter">
    C
  </div>
  <div class="letter">
    D
  </div>
</div>

Bueno, técnicamente no cambiará la cuadrícula en absoluto; ya le hemos dicho a la cuadrícula que tenga dos columnas para que esos divs de dos letras se coloquen en su lugar directamente debajo de los demás y estén exactamente 1fr ancho:

Vea la demostración de cuadrícula de muestras tipo pluma – 3 por Robin Rendle (@robinrendle) en CodePen.

Ahora, aquí está lo extraño: ¿por qué no hay un espacio de 1 px entre las letras A y C, así como entre B y D? Bien, grid-column-gap es solo para columnas y lo que hemos hecho de manera efectiva aquí es crear una nueva fila en nuestra cuadrícula. Tendremos que usar grid-row-gap para ver que el cambio surta efecto:

.wrapper {
  grid-column-gap: 1px;
  grid-row-gap: 1px;
  /* other styles go here */
  /* we could have also used the shorthand `grid-gap` */
}

Y así es como se ve:

Consulte la demostración de cuadrícula de muestras tipo pluma – 4 de Robin Rendle (@robinrendle) en CodePen.

Hemos creado nuestra primera cuadrícula. Hemos creado una fila y una columna y todo lo que hemos tenido que hacer es cambiar el marcado. Pero exploremos nuestras columnas un poco más. ¿Qué pasaría si agregamos otro valor a la grid-template-columns ¿propiedad? Como esto:

.wrapper {
 grid-template-columns: 1fr 1fr 1fr;
}

Bueno, ¡crearíamos otra columna, por supuesto! Y observe cómo podemos ver claramente el fondo del elemento contenedor ahora porque no hay hijos para llenar ese espacio:

Consulte la demostración de cuadrícula de muestras tipo pluma – 5 de Robin Rendle (@robinrendle) en CodePen.

Y si cambiamos el valor de un fr en esa propiedad, eso crearía efectivamente lo que se conoce como una cuadrícula asimétrica. Digamos que queríamos que nuestra primera columna en nuestra cuadrícula ocupara tres veces la cantidad de espacio que las otras dos columnas:

.wrapper {
 grid-template-columns: 3fr 1fr 1fr;
}

Eso llevaría a que las columnas con A y D fueran más grandes que las otras dos columnas, tal como cabría esperar:

Vea la demostración de cuadrícula de muestras tipo pluma – 6 por Robin Rendle (@robinrendle) en CodePen.

¿No es eso poderoso? Ya no tenemos que preocuparnos por los márgenes negativos o el valor de porcentaje perfecto de una columna de la cuadrícula para alinear las cosas correctamente. Podemos hacer cuadrículas súper complejas sin tener que hacer ninguna de las matemáticas que nos hubiéramos visto obligados a hacer en el pasado. Ahora solo necesitamos agregar un nuevo valor al grid-template-columns propiedad y voilá, ¡una nueva columna de cuadrícula aparece como por arte de magia!

Pero, ¿qué pasa con las cuadrículas receptivas? Bueno, eso es tan simple como cambiar esa propiedad dentro de una consulta de medios. Digamos que queremos 2 columnas como nuestro tamaño de cuadrícula predeterminado, luego a 500px queremos 3 columnas y finalmente, en pantallas más grandes, cambiaremos todo ese contenido a 4 columnas. Todo lo que necesitamos escribir es esto:

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

@media screen and (min-width: 500px) {
  .wrapper {
    grid-template-columns: 1fr 1fr 1fr;
  }
}

@media screen and (min-width: 800px) {
  .wrapper {
    grid-template-columns: 1fr 1fr 1fr 1fr;
  }
}

¡Asegúrate de abrir esta demostración en una nueva pestaña y cambiar el tamaño de la ventana gráfica para ver cómo ocurre la magia de respuesta!

Entonces el grid-template-columns La propiedad es mucho más complicada de lo que he mostrado aquí, pero este es un gran punto de partida. A continuación, deberíamos aprender sobre la propiedad real que cambia la vida en la especificación CSS Grid: grid-template-rows.

Ok, vayamos a ciegas. En el pequeño fragmento de código a continuación, y con lo que hemos aprendido hasta ahora sobre Grid, averigüemos qué podría hacer esta nueva propiedad:

.wrapper {
  display: grid;
  grid-template-columns: 3fr 1fr 1fr;
  grid-template-rows: 1fr 3fr;
}

En lugar de establecer el ancho de las columnas y su relación entre sí, ahora vamos a establecer la altura de las filas y su relación. Entonces, si tenemos dos filas como en nuestra demostración anterior y la última unidad está configurada en 3fr, eso significa que la segunda fila siempre tendrá tres veces la altura de la primera:

Consulte la demostración de cuadrícula de muestras tipo pluma – 8 de Robin Rendle (@robinrendle) en CodePen.

Esto puede parecer bastante simple, pero anteriormente nunca habíamos podido hacer esto. Siempre hemos tenido que escribir trucos groseros como establecer un min-height en un elemento específico o cambiando el nombre de una clase. Pero nunca antes habíamos podido crear relaciones entre filas como esta; eso es lo que hace que CSS Grid sea tan poderoso.

Con este pequeño conocimiento y un puñado de nuevas propiedades, podemos crear diseños fabulosamente complejos, siendo las cuadrículas asimétricas y receptivas solo una pequeña parte de ellos. Y hasta ahora esto solo ha sido un vistazo a la monstruosa especificación CSS Grid, ya que hay mucho que cubrir. Pero creo que Jen Simmons lo describió mejor cuando escribió sobre Grid:

Necesitamos explorar CSS Grid hasta que entendamos lo que quiere hacer, lo que se le puede obligar a hacer y lo que se niega a hacer. Es posible que muchos diseñadores nunca aprendan a codificar CSS, pero es necesario comprender CSS lo suficientemente bien como para comprender nuestro medio artístico.

Y claro, todo el código anterior parece muy extraño al principio. Pero lo que significa es que no tenemos que usar marcos CSS gigantes y también un montón de trucos de diseño ahora son completamente irrelevantes. Pero lo que más me emociona de Grid es que nos obliga a ver el espacio dentro de un navegador de una manera completamente nueva.

No solo tendremos que aprender un montón de propiedades nuevas, sino que también tendremos que repensar por completo lo que hemos aprendido en el pasado. Entonces CSS Grid no es solo una especificación, sino una filosofía extraña en sí misma.

¡Vamos a resolverlo juntos!

Soporte del navegador

Estos datos de soporte del navegador son de Caniuse, que tiene más detalles. Un número indica que el navegador admite la función en esa versión en adelante.

Escritorio

Móvil / Tableta

Más información

• Jen Simmons y Rachel Andrew han escrito una gran cantidad de tutoriales y tutoriales increíbles sobre el tema.
• Grid Inspector Tools en Firefox es muy útil
• Tenemos una guía completa de Grid que detalla mucho más cada propiedad y valor.