El modelo de diseño de cuadrícula CSS nos permite crear un diseño bidimensional en un sitio web y alinear los elementos de la cuadrícula en filas y columnas. Si comparamos el modelo de diseño de cuadrícula CSS con los modelos de diseño anteriores, en consecuencia, sabremos que el comportamiento bip-direccional del modelo de cuadrícula CSS ha cambiado por completo la forma de diseñar las interfaces de los usuarios. El modelo de diseño de cuadrícula CSS permite diseñar las páginas web sin utilizar las carrozas, el posicionamiento, el bloqueo, etc.

En este artículo, cubriremos todos los conceptos básicos del modelo de diseño de cuadrícula CSS, y se organizará de la siguiente manera:

• ¿Qué es el modelo de diseño de cuadrícula CSS??
• Diferencia entre las cuadrículas CSS y CSS Flexbox.
• ¿Qué es un contenedor de cuadrícula??
• ¿Qué son los artículos de la cuadrícula??
• Implementación práctica del diseño de la cuadrícula CSS.

Vamos a empezar!

¿Qué es el modelo de diseño de cuadrícula CSS?

Es un modelo de diseño basado en la cuadrícula bidimensional con filas y columnas. Estas filas y columnas pueden contener elementos de la cuadrícula.

¿Cuál es la diferencia entre la red y el modelo Flexbox?

Ahora, debe preguntarse que tanto CSS Flexbox como CSS Grid son modelos de diseño, entonces, ¿cuál es la diferencia entre estos dos modelos de diseño??

La tabla dada a continuación lo ayudará a comprender los fundamentos de este concepto:

Diseño de cuadrícula CSS	CSS Flexbox
Es un modelo de diseño bidimensional.	Es un modelo de diseño unidimensional.
El diseño de la cuadrícula puede funcionar en filas y columnas simultáneamente.	El Flexbox puede funcionar en filas o columnas a la vez.
Ayuda a crear diseños más complicados y organizados.	Ayuda a diseñar y crear páginas web receptivas.
Las cuadrículas CSS son los más adecuados para diseños a gran escala.	Los diseños CSS Flexbox son los más adecuados para diseños a menor escala.
Diseño Primer enfoque.	Contenido Primer enfoque.

¿Qué es un contenedor de cuadrícula??

Un contenedor de cuadrícula es una caja/contenedor que contiene elementos de cuadrícula y puede colocar estos elementos dentro de las filas y columnas. Para crear un contenedor de cuadrícula, necesitamos utilizar la propiedad de visualización y establecer su valor como red en línea o cuadrícula.

La tabla a continuación proporcionará una breve guía para las propiedades del contenedor de cuadrícula:

Propiedades	Descripción
mostrar	Determina un elemento como una cuadrícula especificando su valor a la red o cuadrícula en línea.
Columna de plantilla de cuadrícula y filas de plantilla de cuadrícula	Determine el tamaño de columnas y filas dentro de un contenedor de cuadrícula, y estas propiedades pueden tomar una lista de valores separados por el espacio e.gramo. Nombre del tamaño de la pista, el nombre de la línea.
arena de plantilla	Determina cómo mostrar filas y columnas mediante el uso de elementos de cuadrícula con nombre.
plantilla	Es una propiedad abreviada utilizada para lograr las funcionalidades de tres propiedades i.mi. columnas de plantilla de cuadrícula, filas de plantilla de cuadrícula y áreas de cuadrícula.
hilado de filas y columna-brecha	Estas propiedades determinan la brecha entre las filas de la cuadrícula y las columnas de la cuadrícula respectivamente.
Grid-column-gap y gap de red de cuadrícula	Especifique el tamaño de la brecha entre diferentes columnas y filas de la cuadrícula respectivamente.
brecha	Es una propiedad abreviada utilizada para lograr las funcionalidades de dos propiedades i.mi. Grid-column-gap y gap de red de cuadrícula
Justify-ítems	Alinea los elementos de la cuadrícula a lo largo de las filas/eje en línea.
ítems alineados	Alinea los elementos de la cuadrícula a lo largo de las columnas/eje en línea.
ítems de lugar	Es una propiedad en taquigrafía para las propiedades alineadas y de Justify-Items que establece ambas propiedades en una sola declaración.
Justify-Content	Alinea la cuadrícula a lo largo de las filas/eje en línea
alineado	Alinea la cuadrícula a lo largo de las columnas/eje de bloque
lugar de cola	Es una propiedad en taquigrafía para alinearse y justificar contenido.
Grid-autos-columna	Determina el tamaño predeterminado para las columnas ..
rejilla	Define el tamaño predeterminado para las filas.
cuadrícula	Determina cómo se agregan artículos automáticos en la cuadrícula CSS
red	Propiedad abreviada para rayas de plantilla de cuadrícula, rejillas de autos de cuadrícula, earasas de plantilla de cuadrícula, propiedades de la red-autos, áreas de plantilla de la cuadrícula y las propiedades de flujo de la cuadrícula.

Implementación práctica del diseño de la cuadrícula CSS

Ahora, implementemos un par de propiedades descritas prácticamente:

Ejemplo 1

En primer lugar, implementaremos la propiedad de la cuadrícula y estableceremos su valor como "red". A continuación, utilizaremos la propiedad de columnas de plantilla de cuadrícula y estableceremos el valor "Auto" para las tres columnas:

Modelo de diseño de cuadrícula

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

Obtendremos la siguiente salida para el fragmento de código dado anterior:

Ejemplo 2

Ahora implementemos la propiedad de las filas de la cuadrícula para especificar el tamaño de la fila:

Ranjas de plantilla de cuadrícula: Auto 150px;

El fragmento anterior muestra que el tamaño de la primera fila es "auto" Y el tamaño de la segunda fila es "150px". La salida resultante se verá así:

Podemos observar el espacio en la parte inferior de la segunda fila, lo que valida el funcionamiento de la propiedad de las filas de plantilla de la cuadrícula.

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

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

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 para dos propiedades i.mi. chirriando a la fila y al final 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.

Ejemplo 3

En este ejemplo, utilizaremos la propiedad alineada en el "Clase de elementos", Por lo tanto, todo el código será el mismo que se especifica en los ejemplos anteriores y la única diferencia ocurrirá en la clase de elemento como se muestra a continuación:

.Clase de elementos
Color de fondo: SkyBlue;
borde: 2px negro sólido;
relleno: 30px;
tamaño de fuente: 30px;
Text-Align: Center;
Alineado-Self: Flex-End;

Establecemos el valor de la propiedad Align-Self como Flex-End, que alineará las líneas al final del contenedor:

Así es como podemos utilizar cualquier propiedad de contenedor de cuadrícula o elemento de cuadrícula de acuerdo con nuestro escenario.

Conclusión

El modelo de diseño de cuadrícula CSS nos permite crear un diseño bidimensional en un sitio web y alinear los elementos de la cuadrícula en filas y columnas. El comportamiento bidimensional del modelo de diseño de la cuadrícula nos permite trabajar en filas y columnas simultáneamente. El modelo de diseño de cuadrícula CSS puede tener un elemento principal y múltiples elementos infantiles. El elemento principal se llama recipiente de cuadrícula, y el elemento infantil se llama elemento de cuadrícula. Se pueden usar numerosas propiedades para trabajar con modelos de diseño de cuadrícula, como pantalla, cuadrícula, lugar, justificar elementos, etc