Diseño de cuadrícula CSS: Introducción

Flexbox es genial, pero su propósito principal es ayudarnos a posicionar elementos en una dimensión, ya sea horizontal o vertical. Para el diseño de páginas completas en dos dimensiones, hemos dependido principalmente de marcos como Bootstrap o Foundation para que nos brinden clases que podamos usar para crear un diseño de cuadrícula. Un nuevo módulo, CSS Grid Layout , que estará disponible en los navegadores muy pronto, debería cambiar todo eso.

Exploremos CSS Grid con una breve descripción general. Primero, algunos puntos clave para tener en cuenta:

• Al igual que con Flexbox, el orden de las fuentes no importa con CSS Grid y los elementos se pueden reposicionar fácilmente dependiendo del tamaño de la ventana gráfica.
• Puede comenzar a utilizar el diseño de cuadrícula ahora y utilizar la detección de características con@apoyapara que sólo se aplique en navegadores compatibles.
• Algunos diseños que son imposibles de lograr incluso con el sistema de cuadrícula de los frameworks CSS modernos serán posibles con CSS Grid.

Vocabulario

Se introducen algunos conceptos con CSS Grid y es una buena idea familiarizarse con el vocabulario:

• Línea de cuadrícula : los elementos se ubican en la cuadrícula con las líneas donde el elemento comienza y termina, por lo que las líneas de cuadrícula son fundamentales para el funcionamiento de CSS Grid. Las líneas de cuadrícula de columnas se numeran de izquierda a derecha comenzando con 1 y las líneas de cuadrícula de filas se numeran de arriba a abajo comenzando con 1.

Línea 2 de la fila de la cuadrícula

• Pista de cuadrícula : El espacio entre dos líneas de cuadrícula.

Pista de cuadrícula

• Área de cuadrícula : un área definida por 4 líneas de cuadrícula.

Área de cuadrícula

• Celda de cuadrícula : el espacio entre dos líneas de cuadrícula consecutivas, una columna y una fila. La unidad más pequeña posible en una cuadrícula.

Celda de cuadrícula

Visualización: cuadrícula en el padre

Un poco como con Flexbox, la cuadrícula está organizada con un elemento contenedor y elementos secundarios que se convierten en elementos de la cuadrícula. Simplemente configurapantalla: cuadrículaen el elemento contenedor. Las filas y columnas de la cuadrícula se definen concolumnas de plantilla de cuadrículayplantilla de cuadrícula-filas.

Comencemos con el siguiente marcado:

div  divBox 1/div  divBox 2/div  divBox 3/div  divBox 4/div  divBox 5/div  divBox 6/div  divBox 7/div/div

Así es como podemos definir el CSS para el contenedor:

.container {  display: grid;  grid-template-columns: 150px 150px 80px;  grid-template-rows: 100px auto;  grid-gap: 10px 15px;}

Con esto ya obtenemos algo interesante, incluso sin configurar ninguna propiedad en los elementos de la cuadrícula:

Observe cómo agregamos espacios horizontales de 10 px y espacios verticales de 15 px entre las celdas usandobrecha de rejilla.

Ahora podemos ir más allá y definir las líneas de inicio y fin de elementos específicos. Los elementos que no se colocan explícitamente en la cuadrícula se colocarán de acuerdo con un algoritmo. Usamosinicio de columna de cuadrícula,columna de cuadrícula final,inicio de fila de cuadrículaycuadrícula-fila-finalpara definir dónde comienza y termina un elemento en la cuadrícula:

.box-1 {  grid-column-start: 1;  grid-column-end: 3;}.box-3 {  grid-column-start: 1;  grid-column-end: 3;  grid-row-start: 2;  grid-row-end: 4;}

O podemos utilizar elcolumna de cuadrículaycuadrícula-filaabreviaturas para el mismo resultado:

.box-1 {  grid-column: 1 / 3;}.box-3 {  grid-column: 1 / 3;  grid-row: 2 / 4;}

Aquí está la cuadrícula resultante ahora:

Los espacios no agregan nuevas líneas de cuadrícula, por lo que los elementos que están uno al lado del otro en realidad tocan la misma línea, incluso si hay un espacio que los separa.

Diseño de cuadrícula CSS hoy

Lamentablemente, Grid Layout aún no está disponible en general. Aquí se muestra la disponibilidad actual:

• Soportado de forma predeterminada en Firefox desde la versión 52.
• Totalmente compatible con los últimos Chrome y Opera detrás de una bandera.
• Compatible con IE y Edge, pero con una sintaxis antigua.
• Disponible en la última versión preliminar de Safari Technology.

Chrome debería lanzar una versión con Grid habilitado de manera predeterminada en marzo de 2017. ¡Llegará muy pronto y 2017 probablemente será el año de CSS Grid!

Habilitar en Chrome

Para habilitar CSS Grid en Chrome, vaya achrome://banderas/, busque las características de la Plataforma Web Experimental y habilítelas.

Habilitar en Firefox

El diseño de cuadrícula ahora es compatible de fábrica con Firefox 52 y versiones posteriores.

Aprendiendo más

Mantenemos esta publicación breve y concisa, pero hay muchos conceptos nuevos para aprender con CSS Grid, por lo que dividimos muchos de ellos en su propia publicación:

• La Unidad Fr
• Líneas nombradas
• La palabra clave Span
• La función Minmax
• La notación repetida
• Ejemplo de diseño del Santo Grial
• cuadrícula-automática-filas + cuadrícula-automática-columnas

Lectura adicional

Aquí hay algunos recursos excelentes para aprender los entresijos de CSS Grid:

• Guía completa de CSS-Tricks para Grid
• Cuadrícula con ejemplos de Rachel Andrew
• Este libro electrónico de Eric A. Meyer
• Estas demostraciones de diseño de Jen Simmons