Introducción al módulo de diseño de cuadrícula CSS

Fue una vez mesas, entonces márgenes y flotadores, entonces flexbox y ahora cuadrícula: CSS siempre se orientó hacia nuevas y mejores formas de facilitar el antiguo trabajo de codificación de diseños web. los Modelo de diseño de cuadrícula CSS Puede crear y actualizar el diseño. a lo largo de dos ejes: horizontal y vertical, afectando tanto al ancho como a la altura de elementos.

El diseño de la cuadrícula no depende de la posición de los elementos en el marcado, por lo tanto, puede barajar las colocaciones de elementos En marcado sin alterar el diseño. En el modelo de cuadrícula, un elemento contenedor de cuadrícula es dividido en columnas de cuadrícula y filas (colectivamente conocido como pistas de cuadrícula) por Líneas de cuadrícula. Ahora veamos como crear una cuadrícula de muestra.

Soporte del navegador

A partir de la redacción de este artículo, el módulo de cuadrícula de CSS solo es compatible con el último navegador IE y Edge. El CSS Grid es en etapa experimental en los otros navegadores principales en los que tienes que habilitar el soporte manualmente:

• Firefox: Presiona Shift + F2, ingrese el siguiente comando en la barra de entrada GCLI que apareció en la parte inferior del navegador: prefijar layout.css.grid.enabled true.
• Cromo: Navegar por el cromo: // banderas URL y habilitar Características de la plataforma web experimental.

Es probable que todos los principales navegadores venir a principios / mediados de 2017.

Una cuadrícula de muestra

A convertir un elemento en un contenedor de rejilla puedes usar uno de estos tres monitor propiedades:

1. pantalla: rejilla; - el elemento es convertido en un contenedor de cuadrícula de bloque
2. display: inline-grid; - el elemento es convertido en un contenedor de cuadrícula en línea
3. visualización: subgrid; - Si el elemento es un elemento de la cuadrícula es convertido en una subgrid que ignora la plantilla de la cuadrícula y las propiedades de la separación de la cuadrícula

Al igual que una tabla se compone de varias celdas de tabla, una cuadrícula es compuesto por celdas de cuadrícula múltiple. Un elemento de la cuadrícula es asignado a un conjunto de celdas de la cuadrícula que se conoce colectivamente como el área de cuadrícula.

Vamos a crear una cuadrícula con cinco secciones (áreas de cuadrícula): arriba, abajo, izquierda, derecha y centro. El HTML consta de cinco divs dentro de un contenedor div.

 
 
Parte superior
 
Izquierda
 
centrar
 
Derecha
 
Fondo
 
 

En el CSS, el cuadrícula-plantillas-áreas propiedad Define una cuadrícula con diferentes áreas de cuadrícula.. En su valor, una cadena representa una fila de la cuadrícula y Cada nombre válido dentro de una cadena representa una columna. A crear una celda de cuadrícula vacía necesitas usar el punto.) personaje dentro de una cadena de fila.

los nombres de área de cuadrícula deben ser referenciados por el área de cuadrícula propiedad de los elementos individuales de la cuadrícula.

 .rejilla-contenedor ancho: 500px; altura: 500px; pantalla: rejilla; cuadrícula-áreas-plantilla: "superior superior superior" "izquierda centro derecha" "inferior inferior inferior";  .grid-top grid-area: top;  .grid-bottom grid-area: bottom;  .grid-left grid-area: left;  .grid-right grid-area: right;  .grid-center grid-area: center;  

Así que este código crea una cuadrícula con tres filas y columnas. los parte superior El artículo ocupa un área que se extiende sobre tres columnas en la primera fila y el fondo artículo se extiende sobre tres columnas en la ultima fila. Cada una de las izquierda, centrar y Correcto artículos toma una columna en la fila del medio.

Ahora necesitamos asignar dimensiones a estas filas y columnas. los rejilla-plantilla-columnas y cuadrícula-plantilla-filas propiedades Definir el tamaño de la pista de la rejilla. (fila o columna).

 .rejilla-contenedor ancho: 500px; altura: 500px; pantalla: rejilla; cuadrícula-áreas-plantilla: "superior superior superior" "izquierda centro derecha" "inferior inferior inferior"; rejilla-plantilla-columnas: 100px auto 100px; rejilla-plantilla-filas: 50px auto 150px;  

Así es como se ve nuestra cuadrícula CSS (con algunos estilos adicionales):

Espacio entre los elementos de la cuadrícula

Puedes añadir espacio en blanco entre columnas y filas utilizando rejilla-columna-brecha y rejilla de separación de filas, o su propiedad a mano rejilla.

 .rejilla-contenedor ancho: 500px; altura: 500px; pantalla: rejilla; cuadrícula-áreas-plantilla: "superior superior superior" "izquierda centro derecha" "inferior inferior inferior"; rejilla-plantilla-columnas: 100px auto 100px; rejilla-plantilla-filas: 50px auto 150px; rejilla: 5px 5px;  

Abajo puedes ver que el rejilla propiedad añadida lagunas entre los elementos de la rejilla de hecho.

Alinear el contenido de la cuadrícula y los elementos

los justificar el contenido propiedad del contenedor de red (.contenedor de rejilla) Alinea el contenido de la grilla. a lo largo del eje en línea (eje horizontal) y la propiedad alinear contenido, alinea el contenido de una cuadrícula a lo largo del eje del bloque (eje vertical). Ambas propiedades puede tener uno de estos valores: comienzo, fin, centrar, espacio entre, espacio alrededor y espacio uniformemente.

En su caso, el tamaño de la pista (fila o columna) se encoge para adaptarse al contenido cuando se alinea Echa un vistazo a las capturas de pantalla de los contenidos de la cuadrícula. alineado con diferentes valores abajo.

justificar-contenido: inicio;

justificar el contenido: fin;

justificar-contenido: centro;

justificar contenido: espacio intermedio;

justificar el contenido: espacio-alrededor;

justificar el contenido: espacio de manera uniforme;

alinear-contenido: inicio;

alinear-contenido: fin;

alinear-contenido: centro;

alinear-contenido: espacio intermedio;

alinear-contenido: espacio-alrededor;

alinear-contenido: espacio de manera uniforme;

Ambos justificar el contenido y alinear contenido propiedades alinear todo el contenido dentro de una cuadrícula.

A alinear elementos individuales dentro de sus áreas de cuadrícula, utilizar el otro par de propiedades de alineación: justificar elementos y alinear elementos. Ambos pueden tener uno de estos valores: comienzo, fin, centrar, base (alinear elementos a lo largo de la línea de cuadrícula base del área) y tramo (los artículos llenan toda su área).