4 propiedades de cuadrícula CSS (y un valor) para la mayoría de sus necesidades de diseño

CSS Grid nos proporciona un potente sistema de diseño para sitios web. La guía CSS-Tricks le brinda una descripción general completa de las propiedades de Grid con ejemplos de diseño. Lo que vamos a hacer aquí es un enfoque inverso para mostrarle el conjunto más pequeño posible de propiedades de cuadrícula que necesita conocer para satisfacer la mayoría de sus necesidades de diseño.

Estas cinco propiedades lo pondrán en funcionamiento:

• display(por el gridvalor)
• grid-template-columns
• grid-gap
• grid-auto-flow
• grid-column/grid-row

Así de simple es. Supongamos que deseamos implementar el siguiente diseño para pantallas pequeñas, medianas y grandes.

Este es el marcado con el que trabajaremos:

!-- Stuff before --nav  ul    li/li    li/li    li/li    li/li    li/li    li/li    li/li    li/li    li/li  /ul/navdiv  section/section  section/section  section/section  section    section/section    section/section    section/section    section/section    section/section  /section/div!-- Stuff after --

Si aplicamos algunos estilos básicos, esto es lo que obtenemos, que ya es suficiente para pantallas pequeñas:

¡Ahora podemos entrar en las propiedades de la cuadrícula!

Utilice display: grid para dividir la página en contenedores de diseño independientes

Primero, debemos determinar qué partes de la página deben alinearse con los diseños de cuadrícula. Es posible definir un diseño de cuadrícula única para toda la página. Sin embargo, para sitios web con una estructura muy compleja (por ejemplo, sitios web de noticias), el manejo de una gran cuadrícula rápidamente se vuelve complicado. En este caso, recomiendo dividir las cosas en varios contenedores de cuadrícula independientes.

Como esto:

¿Dónde se traza la línea entre lo que es y lo que no es una cuadrícula? Aquí hay una regla general personal que sigo:

Si el diseño de una parte particular de la página no encaja en la cuadrícula de una parte adyacente o circundante de la página, convierta esa parte en su propio contenedor de cuadrícula.

Dibujó las líneas de la cuadrícula en la sección de la página con la clase .container-mainen la siguiente imagen. Puede notar que la sección con la .container-innerclase del marcado no encaja exactamente en la cuadrícula de filas.

Aquí hay otro diseño posible donde las secciones pequeñas encajan en la cuadrícula circundante si se elige un ráster de línea más fino. Aquí no es absolutamente necesario un contenedor de rejilla separado.

Para comenzar con esto, entremos .container-mainen un contenedor de cuadrícula. Este es el componente básico de CSS Grid: convertir un elemento en un contenedor de cuadrícula con la displaypropiedad:

.container-main {  display: grid;         }

Querremos hacer lo mismo con nuestros otros contenedores de cuadrícula:

.container-inner {  display: grid;         }.container-nav {  display: grid;         }

Utilice columnas de plantilla de cuadrícula para definir las columnas requeridas

A continuación, definiremos la cantidad de columnas que necesitamos en cada contenedor de cuadrícula y el ancho que deben tener esas columnas. Mi pausa para el número de columnas: utilice el mínimo común múltiplo del número máximo de columnas necesarias para los diferentes tamaños de pantalla.

¿Cómo funciona? El .container-mainelemento tiene un total de dos columnas en mamparas de tamaño mediano. Si tomamos eso y lo multiplicamos por el número de columnas en las pantallas grandes (tres), obtenemos un total de seis columnas.

Podemos hacer lo mismo con nuestra navegación, el .container-innerelemento. Hay tres columnas en las pantallas de tamaño mediano, que multiplicamos por una columna en las pantallas grandes para obtener un total de tres columnas.

El .container-navelemento no proporciona ningún número de columnas. En este caso, el sistema de cuadrícula debería ajustar automáticamente el número de columnas al número de elementos del menú. Es común agregar o eliminar elementos en una navegación, y sería fantástico si respondiera en consecuencia, algo con lo que grid nos puede ayudar más adelante.

Bien, entonces definimos el número de columnas para cada contenedor de cuadrícula. Usemos la grid-template-columnspropiedad para configurarlos en su lugar. Pero primero un par de detalles menores:

• La grid-template-columnspropiedad solo se usa en el contenedor de cuadrícula. En otras palabras, no lo encontrará usado (al menos correctamente) en un elemento de la cuadrícula dentro del contenedor.
• La propiedad acepta un montón de valores diferentes que definen el número de columnas y su ancho. La que nos interesa aquí es la frunidad fraccionaria ( ). Recomiendo encarecidamente consultar la descripción general de Robin porque es exclusivo de grid y hace un trabajo increíble al realizar cálculos para decidir cómo encajan los elementos de grid dentro de un contenedor de grid.

Necesitamos seis columnas del mismo ancho en .container-main. Podemos escribirlo así:

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

O podemos recurrir a la repeat()función para simplificarla y convertirla en algo más legible:

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

Tomemos ese conocimiento y apliquémoslo .container-innertambién a nuestro elemento, que decidimos que necesita tres columnas.

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

Utilice grid-gap para agregar espacio entre elementos de la cuadrícula

De forma predeterminada, grid utiliza todo el espacio que tiene en un contenedor de grid para encajar elementos de grid. Tener elementos alineados uno al lado del otro puede ser un requisito de diseño, pero no para el diseño particular que estamos creando. ¡Queremos un respiro entre las cosas!

Tenemos la grid-gappropiedad para eso. Nuevamente, esta es una propiedad que es solo para contenedores de cuadrícula y lo que hace es crear espacios verticales y horizontales entre los elementos de la cuadrícula. En realidad, es una propiedad abreviada que combina las potencias de espaciado vertical grid-row-gapy las potencias de espaciado horizontal de grid-column-gap. Es útil que podamos dividir cosas así pero, en momentos como este, donde trabajamos con la misma cantidad de espacio en cada dirección, la taquigrafía grid-gapes mucho más agradable de escribir.

Queremos 20pxespacio entre los elementos de la cuadrícula en .container-main, 10pxespacio en .container-innery 5pxespacio en .container-nav. ¡Ningún problema! Todo lo que se necesita es una línea en cada contenedor de rejilla.

.container-main{  display: grid;  grid-template-columns: repeat(6, 1fr);  grid-gap: 20px;}.container-inner {  display: grid;  grid-template-columns: repeat(3, 1fr);  grid-gap: 10px;}.container-nav {  display: grid;  grid-gap: 5px;}   

Utilice columna de cuadrícula y fila de cuadrícula para determinar el tamaño de los elementos individuales de la cuadrícula

¡Ahora es el momento de poner el diseño en la forma que queremos!

Primero está la grid-columnpropiedad, que nos permite extender un elemento de la cuadrícula a lo largo de n columnas, donde n es el número de columnas que abarcarán. Si cree que esto se parece mucho al rowspanatributo que nos permite extender celdas en varias filas en tablas HTML, no estaría equivocado.

Se ve así cuando lo usamos en una cuadrícula .itemde nuestro .container-mainelemento y en los .inner-itemelementos de .container-inner:

.item {  grid-column: span 6;}.item-inner {  grid-column: span 3;}

Lo que estamos diciendo aquí es que cada elemento abarca seis filas en nuestro contenedor principal y tres filas en nuestro contenedor interno, que es el número total de columnas en cada contenedor.

Una cosa interesante de CSS Grid es que podemos nombrar las líneas de la cuadrícula. Vienen con nombres implícitos listos para usar, pero nombrarlos es una forma poderosa de distinguir entre las líneas inicial y final de cada columna de la pista.

Podemos cambiar el número de columnas y filas que los elementos deben abarcar en diferentes puntos de interrupción:

@media screen and (min-width: 600px) {  .item-type-b {    grid-column: span 3;  }  .item-inner {    grid-column: span 1;  }}@media screen and (min-width: 900px) {  .item {    grid-column: span 2;    grid-row: span 2;  }  .item-type-b{    grid-row: span 1;  }  .item-inner{    grid-column: span 3;  }}

Usando grid-auto-flow para controlar la colocación de los elementos

CSS Grid coloca elementos una fila tras otra. Es por eso que el resultado en nuestro ejemplo se ve así en este momento:

Se puede lograr una ubicación columna por columna estableciendo la grid-auto-flowpropiedad en columna ( rowes el valor predeterminado). Nuestro diseño se beneficiará de la ubicación en columnas en dos casos. Primero, hace que los elementos de nuestro menú finalmente aparezcan en orientación horizontal. En segundo lugar, reúne los elementos de la clase contenedora en la agrupación deseada.

El resultado final

Conclusión: ¿Más o menos especificación?

El sistema grid nos permite trabajar bajo el lema “hacer tantas especificaciones como sea necesario, pero la menor posible”. Solo hemos cubierto algunas de las especificaciones necesarias para convertir elementos en un contenedor de cuadrícula CSS y los elementos dentro de él en elementos de cuadrícula con el fin de mostrar lo poco que necesita saber para crear incluso diseños complejos con CSS Grid.

CSS Grid admite casos de uso adicionales donde:

• Queremos hacer aún menos especificaciones para confiar más en el posicionamiento automático.
• Queremos hacer aún más especificaciones para determinar más detalles del diseño resultante.

Si se aplica el primer caso, entonces vale la pena considerar las siguientes opciones de cuadrícula adicionales:

• Al crear la cuadrícula con grid-template-columns, puede hacer que el sistema de cuadrícula determine automáticamente el ancho de las columnas individuales con la palabra clave auto o lo adapte al contenido existente con la configuración min-content, max-content, o fit-content.
• Puede dejar que el sistema de cuadrícula determine automáticamente el número de columnas requeridas con la ayuda de repeat, auto-fill, auto-fity minmax. Incluso las consultas de medios pueden volverse redundantes y estas herramientas ayudan a flexibilizar las cosas sin agregar más consultas de medios.

Aquí hay un par de artículos sobre el tema que recomiendo: ¡Convertirse en un CSS Grid Ninja! y Tamaño automático de columnas en CSS Grid: autocompletar versus ajuste automático.

Si se aplica el segundo caso, CSS Grid le ofrece aún más opciones de configuración:

• Puede especificar explícitamente el ancho de las columnas en la unidad de su elección (por ejemplo, pxo %) usando la grid-template-columnspropiedad. Además, la propiedad grid-template-rowsestá disponible para definir el número y ancho de filas, en caso de que haya un número específico de ellas.
• También puede definir números de columna o fila específicos para posicionarlos como valores para grid-columny grid-row(o usar las propiedades grid-column-start, grid-column-end, grid-row-starto grid-row-end).

¡Y ni siquiera hemos llegado a la alineación de CSS Grid! Aún así, el hecho de que podamos lograr tanto sin siquiera abordar ese tema muestra cuán poderoso es CSS Grid.