Comenzando con las propiedades del proyecto grid-css del front-end

La primera parte presenta el uso de propiedades relacionadas con el contenedor de cuadrícula y la pista de cuadrícula. Si no está familiarizado con la cuadrícula, le recomendamos leer el artículo anterior: Conceptos básicos de CSS Grid Grid, Introducción al front-end - CSS Grid Track detalla los conocimientos básicos para aprender la cuadrícula.

Este artículo presenta principalmente las propiedades relacionadas de los elementos de la cuadrícula:

Los cuatro conjuntos de propiedades anteriores están estrechamente relacionados con las líneas de la cuadrícula y definen cómo se colocan los elementos de la cuadrícula de acuerdo con las líneas de la cuadrícula.

La sintaxis es la siguiente:

Descripción del valor del atributo:

Ejemplo a continuación:

Los elementos pueden superponerse entre sí. Puede utilizar el índice z para controlar su orden de apilamiento.

Las cuatro propiedades grid-column-start/grid-row-start, grid-column-end/ grid-row-end introducidas anteriormente también se pueden utilizar con grid-row-start y grid-row. -fin. para abreviar.

Sintaxis:

Valor del atributo:

Ejemplo a continuación:

Utilice este atributo para nombrar el área de la cuadrícula para que pueda usarse en la cuadrícula: haga referencia a él en las plantillas creadas por el atributo template-areas, o abrevíelo a grid-row-start grid-column-start grid-row-end grid-column-end.

La sintaxis es la siguiente:

Valor del atributo:

El siguiente ejemplo:

Una forma de nombrar un área de la cuadrícula

p >

Como abreviatura

/snippet/CSS/complete-guide-grid/# prop-grid-template-areas

https://developer.mozilla.org/ es -CN/docs/Web/CSS/grid