CSS proporciona un modelo de diseño de cuadrícula que nos ayuda a dividir una página en varias regiones y nos permite alinear los elementos en filas y columnas dinámicamente. Este modelo tiene dos componentes principales, yo.mi. Contenedor de cuadrícula y elementos de cuadrícula. Específicamente, si hablamos de los elementos de la cuadrícula, hay muchas propiedades disponibles que pueden cumplir varios propósitos.

Este artículo presentará una visión general exhaustiva de las propiedades del elemento de la cuadrícula CSS y se organizará de la siguiente manera:

• ¿Qué son los artículos de la cuadrícula??
• Propiedades de elementos de cuadrícula en CSS
• Sintaxis de propiedades de elementos de cuadrícula CSS
• Cómo usar las propiedades del elemento de la cuadrícula

Vamos a empezar!

¿Qué son los artículos de la cuadrícula??

Los elementos dentro del contenedor de cuadrícula CSS se conocen como elementos de cuadrícula o elementos infantiles.

Propiedades de elementos de cuadrícula en CSS

CSS proporciona numerosas propiedades para trabajar con elementos de cuadrícula CSS. La tabla que se indica a continuación ilustra diferentes propiedades de los elementos de la cuadrícula:

Propiedades	Descripción
C-column-column-start y chirriando	Estas propiedades determinan la ubicación de los elementos de la cuadrícula especificando dónde iniciar el elemento.
End-column-column-rwin	Estas propiedades determinan la ubicación de los elementos de la cuadrícula especificando dónde terminar el elemento de la cuadrícula.
columna de cuadrícula	Es una propiedad en taquigrafía para propiedades de arranque de columna de cuadrícula y al final de columna de cuadrícula.
fila de red	Es una propiedad en taquigrafía que se utiliza para lograr las funcionalidades de la barra de red y el extremo de la red de la red.
área de rejilla	Especifica el nombre del elemento de la cuadrícula, o se puede usar para lograr las funcionalidades de múltiples propiedades I.mi. arranque de fila de cuadrícula, al final de la red de columna, extremo de la red y al final de la columna de la cuadrícula.
justify-self	Alinea un elemento de cuadrícula dentro de una celda a lo largo del eje de fila/en línea.
alinearse	Alinea un elemento de cuadrícula dentro de una celda a lo largo del eje de columna/bloque.
lo mismo	Es una propiedad en taquigrafía para dos propiedades i.mi. alinearse y justificar-self.

Sintaxis

El fragmento que se detalla a continuación lo ayudará a comprender la sintaxis básica de las propiedades del elemento de la cuadrícula:

Nombre de propiedad: valor (s);

El nombre de la propiedad será seguido por el colon ":" y luego los valores se especificarán en el otro lado del colon y estos valores decidirán qué funcionalidad será realizada por el elemento de la cuadrícula.

Cómo usar las propiedades del elemento de la cuadrícula

A partir de ahora tenemos una comprensión básica de las propiedades del elemento de la cuadrícula, ahora avanzaremos un paso más allá e implementaremos las propiedades descritas anteriormente prácticamente.

Ejemplo

Supongamos que tenemos dos filas y cuatro columnas, y tenemos un total de seis elementos de cuadrícula. Ahora, especificaremos los primeros cuatro elementos en la primera fila y los últimos dos elementos en la segunda fila:

Modelo de diseño de cuadrícula

Primer elemento
Segundo artículo
Tercer artículo
Cuarto artículo
Quinto artículo
Sexto artículo

Del fragmento anterior, podemos observar que en la etiqueta del cuerpo tenemos un elemento principal y seis elementos infantiles. En la etiqueta de la cabeza, especificamos el estilo para los elementos de los padres e hijos. Además, como queremos implementar un estilo específico en item-class5 y item-class6, los diseñamos por separado:

La salida verifica el funcionamiento de la columna de la red y las propiedades de la fila de cuadrícula.

Del mismo modo, podemos utilizar las propiedades restantes del elemento de la cuadrícula dependiendo de nuestras necesidades.

Conclusión

Los elementos dentro del contenedor de cuadrícula CSS se conocen como elementos de cuadrícula o elementos infantiles. CSS proporciona numerosas propiedades para funcionar con elementos de cuadrícula CSS como la encuesta de columna de cuadrícula, la inicio de la fila de cuadrícula especifica la ubicación de inicio del elemento, Justify-Self, Aline-Self Propiedades alinea un elemento de la cuadrícula dentro de una celda a lo largo del eje de fila/en línea , eje de columna/bloque respectivamente. Del mismo modo, hay muchas más propiedades de elementos de cuadrícula CSS que se pueden usar para servir varias funcionalidades.