¿Qué es la propiedad de cuadrícula?

La propiedad de cuadrícula es una propiedad abreviada para las filas de plantilla de cuadrícula, columnas de plantilla de cuadrícula, áreas de plantilla de cuadrícula, filas automáticas de cuadrícula, columnas automáticas de cuadrícula, flujo automático de cuadrícula, espacio de columna de cuadrícula y propiedades de espacio de fila de la cuadrícula.

Estructura de rejilla

La propiedad de cuadrícula hace que los elementos se muestren como matriz ⊞

 
 
 
 
 
 
 
 

En css

#envase {
 pantalla: cuadrícula;
 }

En ejemplo, #container se muestra como una cuadrícula y los elementos secundarios se mostrarán como celdas o elementos de la cuadrícula

Compatibilidad del navegador

Es una gran emoción, es decir, IE, Edge, Firefox admite la propiedad de cuadrícula CSS . En su mayoría, todo el navegador tiene una hermosa interfaz de usuario de vista de cuadrícula en herramientas de desarrollador.

Líneas de cuadrícula

Las líneas de cuadrícula son líneas horizontales y verticales, se utilizan para el posicionamiento. El índice de posicionamiento puede ser un número entero (tanto números enteros negativos como positivos).

Propiedades → grid-column-start, grid-column-end, grid-row-end, grid-row-end.

Código de muestra :

#grid> div: nth-child (2) {
 grid-column-start: 2;
 grid-column-end: 3;
 grid-row-start: 2;
 cuadrícula-fila-fin: 3;
}

El elemento 2 comenzará en la segunda línea vertical en 2 líneas horizontales y el elemento terminará en 3 líneas verticales y 3 líneas verticales.

Cuadricula

Cuadrícula de celdas

Una celda de cuadrícula es un espacio entre dos líneas de cuadrícula verticales adyacentes y las dos líneas de cuadrícula horizontales adyacentes.

Cuadrícula de celdas

Pistas de cuadrícula

Una pista de cuadrícula es un espacio entre dos líneas de cuadrícula adyacentes. es decir, fila, columnas.

Carril de cuadrícula

Área de cuadrícula y brecha de cuadrícula

Un área de cuadrícula es el grupo de una o más celdas.

Grid Gap es el espacio entre las filas y las columnas. Es la propiedad abreviada de grid-row-gap y grid-column-gap.

Fila de cuadrícula y columna de cuadrícula

grid-row es una propiedad abreviada de grid-row-start y grid-row-end.

grid-column es una propiedad abreviada de grid-column-start y grid-column-end

Fila de la cuadrícula

grid-row-start → especifica la posición de inicio de un elemento de cuadrícula en la fila

eg.grid-row-start: 2 → El elemento comenzará en la segunda línea vertical

grid-row-end → especifica la posición final de un elemento de la cuadrícula en la fila

eg.grid-row-end: 3 → El elemento terminará en la segunda línea vertical

Rejilla-flujo automático

Controla cómo funciona el algoritmo de colocación automática. De forma predeterminada, el valor es fila (los elementos se colocan en fila)

grid-auto-flow: fila;
grid-auto-flow: columna;
Columna de flujo automático de cuadrícula y fila de flujo automático de cuadrícula

grid-auto-flow: row dense → Utiliza el algoritmo de empaquetado “denso”. Rellene el espacio libre en la cuadrícula en filas.

grid-auto-flow: column dense → Utiliza un algoritmo de empaquetado “denso”. Rellene el espacio libre en la cuadrícula en función de la columna

Cuadrícula explícita y cuadrícula implícita

La cuadrícula explícita es una cuadrícula creada por el usuario utilizando grid-template-row, grid-template-column

cuadrícula-plantilla-columnas: repetir (3, 100px);
grid-template-rows: 100px 100px;

La cuadrícula implícita es creada por el navegador. El tamaño de la cuadrícula implícita se puede modificar utilizando la propiedad grid-auto-columnas y grid-auto-rows.

cuadrícula-plantilla-columnas: repetir (3, 100px);
grid-auto-rows: 100px;

Orden de cuadrícula:

Podemos ordenar el elemento por propiedad de área de plantilla.

podemos cambiar el área de la plantilla en la consulta de medios y mostrar una nueva estructura de cuadrícula.

revisa el codepen para más.

Para la grilla, en su mayoría todos usamos el sistema de grilla bootstrap. Bootstrap puede cambiar algún nombre de clase en cada versión (pero no como angular ), por lo que debemos recordar qué versión tiene qué nombre de clase .

Al usar la propiedad de cuadrícula CSS, PODEMOS (incluso en IE ) mostrar fácilmente los elementos en la vista de cuadrícula.

¡Muchas gracias por leer! Si te gustó, apoya aplaudiendo y compartiendo la publicación. Siéntase libre de dejar un comentario a continuación.