Contenedor de cuadrícula en CSS | Explicado

Una cuadrícula CSS se considera un modelo de diseño que divide una página web en varias filas y columnas para organizar elementos. Estas filas y columnas ayudan a alinear los elementos fácilmente en lugar de usar propiedades de posición y flotación. Una cuadrícula posiciona elementos con respecto a la página web u otros elementos presentes en la página web. Consiste en varios componentes, como contenedores de cuadrícula y elementos de cuadrícula. Sin embargo, discutiremos el contenedor de cuadrícula en esta publicación.

¿Qué es un contenedor de cuadrícula?

Un contenedor de cuadrícula es un elemento principal que contiene elementos de la cuadrícula colocados dentro de las filas y columnas. Con el fin de hacer que un elemento adopte el comportamiento de un contenedor de cuadrícula, establezca su propiedad de visualización en cuadrícula o en la red en línea.

Puede hacer que un contenedor de cuadrícula se comporte de cierta manera utilizando las propiedades CSS asociadas con él. Estas propiedades se discuten a continuación.

Propiedades del contenedor de cuadrícula

Las propiedades vinculadas a un contenedor de cuadrícula se describen en detalle a continuación.

propiedad de columnas de plantilla de cuadrícula

Un contenedor de cuadrícula se divide en múltiples columnas con tamaños particulares, por lo tanto, para establecer el número de columnas y sus anchos, se utiliza la propiedad de columnas de plantilla de la cuadrícula.

Sintaxis

Columna de plantilla de cuadrícula: Ninguna | Auto | contenido máximo | Min-Content | Longitud | inicial | heredar;

Parámetros explicados
ninguno: Es un valor predeterminado que genera columnas cuando es necesario.

auto: Este valor evalúa el ancho de las columnas en función del tamaño del contenedor y el tamaño de contenido de los elementos presentes dentro de una columna.

contenido máximo: Ajusta el ancho de la columna en función del elemento más grande de la columna.

contenido mínimo: Ajusta el ancho de la columna en función del elemento más pequeño de la columna.

longitud: Este valor establece el valor dado como el ancho de las columnas.

Ejemplo
Supongamos que desea hacer cuatro columnas cada una con una longitud especificada, luego siga el código a continuación.

Html

1
2
3
4
5
6
7
8

Con el fin de hacer un sistema de cuadrícula, hemos creado un elemento Div con la clase "elementos de contenedores" que actúa como un contenedor de cuadrícula, mientras tanto, los otros elementos divisados ​​son elementos de la cuadrícula.

CSS

.envase
Pantalla: cuadrícula;
Columna de plantilla de cuadrícula: 50px Auto 70px Auto;
GAP GRID: 5PX;
Color de fondo: Sandybrown;
relleno: 10px;

Aquí hemos creado cuatro columnas, cada una con el ancho especificado en el código anterior y tener un espacio de 5px cada una. Mientras tanto, al DIV se le ha asignado un color marrón arenoso y un relleno de 10px.

CSS

.elementos> div
Color de fondo: Bisque;
relleno: 20px;
Text-Align: Center;
tamaño de fuente: 35px;

Ahora simplemente estamos diseñando nuestros elementos de cuadrícula utilizando propiedades CSS.

Producción

La propiedad funciona correctamente.

propiedad de las filas de plantilla

Un sistema de cuadrícula también consiste en ciertas filas, por lo tanto, para especificar el número de filas junto con su altura, se utiliza la propiedad de las filas de plantilla de la cuadrícula.

Sintaxis

Grid-plantilla-filas: ninguno | Auto | contenido máximo | Min-Content | Longitud | inicial | heredar;

Parámetros explicados
ninguno: Es un valor predeterminado que genera filas cuando es necesario.

auto: Este valor evalúa la altura de las filas en función del tamaño del contenedor y el tamaño de contenido de los elementos presentes dentro de una fila.

contenido máximo: Ajusta la altura de la fila en función del elemento más grande de la fila.

contenido mínimo: Ajusta la altura de la fila en función del elemento más pequeño de la fila.

longitud: Este valor establece el valor dado como la altura de las filas.

Ejemplo
Aquí vamos a demostrar cómo crear filas que tengan una cierta altura.

Html

.envase
Pantalla: cuadrícula;
Columna de plantilla de cuadrícula: auto auto auto auto;
Grid-plemplate-Rows: 200px 100px;
GAP GRID: 5PX;
Color de fondo: Sandybrown;
relleno: 10px;

Aquí estamos creando dos filas cada una con la altura especificada en el código anterior. También hemos creado cuatro columnas, cada una con un ancho automático.

Producción

Las filas se han generado con éxito.

Propiedad Justify-Content

Con el fin de alinear toda la cuadrícula dentro de un contenedor horizontalmente, se utiliza la propiedad Justify-Content se utiliza. Recuerde que, para que esta propiedad funcione, el ancho total de la red debería ser menor que el del contenedor.

Sintaxis

Justify-Content: Inicio | fin | centro | Espacio entre | Espacio | Space -venly | estiramiento | inicial | heredar;

Parámetros explicados
Inicio: coloca la cuadrícula al inicio del contenedor y es el valor predeterminado.

fin: Esto coloca la cuadrícula al último del contenedor.

centro: Esto posiciona la cuadrícula en la mitad del contenedor.

espacio entre: Agrega una cantidad igual de espacio entre las columnas.

espacial: Agrega un espacio igual alrededor de columnas.

espacio-incluso: Esto agrega un espacio igual alrededor y entre columnas.

estirar: Altera el tamaño de los artículos que permiten que la cuadrícula cubra el ancho completo del contenedor.

Ejemplo
Supongamos que desea agregar espacio entre las columnas dentro de un contenedor de cuadrícula.

CSS

.envase
Pantalla: cuadrícula;
Justify-Content: Space-between;
Columna de plantilla de cuadrícula: 40px 40px 40px;
GAP GRID: 5PX;
Color de fondo: Sandybrown;
relleno: 10px;

En el código anterior, para hacer que la cuadrícula sea más pequeña que el contenedor, estamos haciendo tres columnas de 40px cada una y para agregar espacio entre estas columnas, estamos utilizando el valor entre el espacio entre Justify-Content,.

Producción

Se ha agregado espacio entre columnas.

propiedad de alineación de contenido

Para alinear toda la cuadrícula dentro de un contenedor verticalmente, se utiliza la propiedad alineada en contenido de contenido. Recuerde que, para que esta propiedad funcione, la altura total de la red debería ser menor que la del contenedor.

Sintaxis

Alineado-Contente: Inicio | fin | centro | Espacio entre | Espacio | Space -venly | estiramiento | inicial | heredar;

Parámetros explicados
comenzar: Coloca las filas al comienzo del contenedor y es el valor predeterminado.

fin: Esto posiciona las filas al final del contenedor.

centro: Esto posiciona la cuadrícula en la mitad del contenedor.

espacio entre: Agrega una cantidad igual de espacio entre las filas.

espacial: Agrega un espacio igual alrededor de filas.

espacio-incluso: Esto agrega un espacio igual alrededor y entre filas.

estirar: Altera el tamaño de los artículos que permiten que la cuadrícula cubra toda la altura del contenedor.

Ejemplo
Supongamos que desea agregar espacio entre filas dentro de un contenedor.

CSS

.envase
Pantalla: cuadrícula;
Altura: 350px;
alineado contenido: espacio entre;
Columna de plantilla de cuadrícula: Auto Auto Auto;
GAP GRID: 5PX;
Color de fondo: Sandybrown;
relleno: 10px;

Para agregar espacio entre filas, en primer lugar, proporcionamos cierta altura a la cuadrícula y luego utilizando el valor entre el valor de la propiedad alineada de contenido. Estamos agregando espacio entre filas. Además, hemos creado tres columnas cada una con un ancho automático.

Producción

Se ha agregado espacio entre filas.

Conclusión

Un contenedor de cuadrícula es un elemento principal que contiene elementos de la cuadrícula colocados dentro de las filas y columnas. Con el propósito de hacer que un elemento adopte el comportamiento de un contenedor de cuadrícula, muestrelo como cuadrícula o en línea en línea. Un contenedor de cuadrícula puede lograr ciertas características a través del uso de ciertas propiedades de CSS asociadas con él, como justify-contento, columnas de plantilla de cuadrícula, alineación de contenido de contenido de la cuadrícula y risas de plantilla de cuadrícula. Cada una de estas propiedades se ha explicado en el artículo junto con ejemplos relevantes.