Propiedades de la cuadrícula CSS | Explicado

CSS Grid es un modelo de diseño que permite una disposición fácil de elementos que aparecen en un sitio web en varias filas y columnas. Este modelo funciona dividiendo una página web en secciones y alinea elementos sin tener que pasar por el problema de usar posicionamiento y flotadores. Para usar este modelo, hay numerosas propiedades CSS disponibles que hemos explicado en profundidad en esta publicación.

Propiedades de la cuadrícula CSS

Las propiedades asociadas con el módulo de diseño de la cuadrícula se explican a continuación.

propiedad de columnas de plantilla de cuadrícula

Como sabemos que un diseño de cuadrícula consta de numerosas columnas que tienen un cierto tamaño, por lo tanto, para indicar 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: Esto establece el valor dado como el ancho de las columnas.

Ejemplo
Supongamos que desea hacer cuatro columnas, cada una con una longitud especificada en el código. Así es como lo haces.

Html

1
2
3
4
5
6
7
8

En el código anterior, para hacer un contenedor de cuadrícula, hemos creado un elemento Div que tiene "elementos de contenedor" de clase y para colocar ciertos elementos de la cuadrícula dentro de ese contenedor, hemos anidado ocho elementos Div dentro del contenedor de la cuadrícula Div.

CSS

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

Aquí estamos configurando la visualización del elemento Div con el "contenedor" de clase en la cuadrícula para que sea un contenedor de cuadrícula. Luego estamos haciendo cuatro columnas con las primeras tres columnas que tienen una longitud de 70px, mientras que el ancho de la última columna está configurado como automático. Cada columna tiene un espacio de 5px y un color de arena de arena. Por último, el relleno del contenedor se establece en 10px.

CSS

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

Ahora, utilizando algunas propiedades básicas de CSS, estamos diseñando nuestros elementos que están presentes dentro del contenedor.

Producción

Se han creado cuatro columnas que tienen un cierto ancho.

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: Esto establece el valor dado como la altura de las filas.

Ejemplo
Supongamos que desea crear dos filas que tengan una altura especificada y luego siga el código a continuación.

Html

.envase
Pantalla: cuadrícula;
Columna de plantilla de cuadrícula: auto auto auto auto;
Grid-plantilla-filas: 150px 250px;
GAP GRID: 5PX;
Color de fondo: Sandybrown;
relleno: 10px;

En el código anterior, hemos generado dos filas. La primera fila tiene una altura de 150 px, mientras tanto, la segunda tiene una altura de 250px. Además de esto, también hemos creado cuatro columnas, cada una con un ancho automático que tiene un espacio de 5px.

Producción

Se han creado dos filas que tienen una altura específica.

propiedad de las áreas de plantilla de la cuadrícula

A los fines de especificar el nombre de las áreas en un sistema de cuadrícula, se utiliza la propiedad de las áreas de plantilla de la cuadrícula. Funciona de una manera que debe nombrar el área utilizando la propiedad del área de la red y luego referencia a ese nombre en esta propiedad.

Sintaxis

Garas de plantilla de rejilla: ninguna | nombre del árticulo;

Parámetros explicados
ninguno: Es un valor predeterminado que no especifica ningún nombre para el área de la cuadrícula.

nombre del árticulo: Este valor representa una secuencia de cómo se mostrarán las filas y las columnas en una cuadrícula.

Ejemplo
Así es como funciona esta propiedad.

CSS

.uno
área de cuadrícula: itema;

.envase
Pantalla: cuadrícula;
Ároca de plantilla de la cuadrícula: 'itema itema ...';
GAP GRID: 5PX;
Color de fondo: Sandybrown;
relleno: 10px;

En el código anterior, utilizando la propiedad del área de cuadrícula, estamos asignando el primer elemento de la cuadrícula, un nombre "itemA" y luego referenciando este nombre en la propiedad de las áreas de plantilla de la cuadrícula que especifica que el primer elemento tiene el nombre "itemA" y ocupará un espacio de dos columnas de cinco.

Producción

La propiedad funciona correctamente.

propiedad de plantilla de cuadrícula

Es una propiedad en taquigrafía para las propiedades mencionadas a continuación.

1. columnas de plantilla de cuadrícula
2. filas de la cuadrícula
3. arena de plantilla

Sintaxis

Plantilla de la cuadrícula: ninguno | Grid-Template-Rows/Grid-Template-Column | Ároca de plantilla de la cuadrícula | inicial | heredar;

Parámetros explicados
ninguno: Es un valor predeterminado que no especifica ningún tamaño de filas y columnas.

columnas de plantilla de cuadrícula: Establece el tamaño de las columnas.

filas de la cuadrícula: Define el tamaño de las filas.

arena de plantilla: Establece los nombres de las áreas de la cuadrícula.

Ejemplo
Asignemos el número y el tamaño de las filas y columnas de una vez.

CSS

.envase
Pantalla: cuadrícula;
Plantilla de cuadrícula: 200px/ auto auto auto;
GAP GRID: 5PX;
Color de fondo: Sandybrown;
relleno: 10px;

En el código anterior, se ha especificado que hay dos filas con la fila 1 que tienen una altura de 200px y tres columnas con un ancho automático para cada columna.

Producción

La propiedad se ha implementado con éxito ..

propiedad de arranque de fila de rejilla

Como su nombre indica, esta propiedad establece en qué fila el elemento de la cuadrícula comenzará a mostrar.

Sintaxis

Star de fila de cuadrícula: Auto | Row-Line;

Parámetros explicados
auto: Este es un valor predeterminado que coloca los elementos de acuerdo con el flujo de la cuadrícula.

línea de hilera: Establece en qué fila el elemento comenzará a mostrar.

Ejemplo
Considere el siguiente ejemplo para comprender el funcionamiento de esta propiedad.

CSS

.envase
Pantalla: cuadrícula;
Columnas de plantilla de cuadrícula: 200px 200px 200px;
GAP GRID: 5PX;
Color de fondo: Sandybrown;
relleno: 10px;

.tres
INSTATA DE CIRIMA DE LA GURILLA: 1;

En el código anterior, primero estamos especificando tres columnas cada una con un ancho de 200px y luego declarando que el tercer elemento comenzará a mostrar en la fila 1.

Producción

El artículo 3 se ha colocado al comienzo de la fila 1.

propiedad de la columna de la cuadrícula-columna

Para especificar en qué columna se utilizará el elemento de la cuadrícula, se utiliza la propiedad de la columna de la cuadrícula-columna.

Sintaxis

Grid-column-start: Auto | span-n | columna;

Parámetros explicados
auto: Este es un valor predeterminado que coloca los elementos de acuerdo con el flujo de la cuadrícula.

span-n: Establece el número de columnas que el elemento se extenderá.

columna: Define en qué columna el elemento comenzará a mostrar.

Ejemplo
Supongamos que desea colocar un elemento de cuadrícula específico en una columna específica.

CSS

.uno
Gama-Columna-Instart: 2;

Aquí estamos utilizando la propiedad de la columna de la cuadrícula-columna y colocando el artículo 1 en la columna 2.

Producción

El artículo 1 se ha colocado correctamente en la columna 2.

propiedad de la red

Esta propiedad establece en qué fila el elemento de la cuadrícula finalizará la visual.

Sintaxis

Guente de rejilla: Auto | span-n | línea de fila;

Parámetros explicados
auto: Este es un valor predeterminado que hace que un elemento abarque una sola fila.

span-n: Establece el número de filas que el elemento se extenderá.

línea de hilera: Define en qué fila el elemento terminará mostrando.

Ejemplo
Consulte el ejemplo a continuación.

.uno
extremo de fila de cuadrícula: span 2;

En el código anterior, estamos haciendo el elemento 1 en el tramo de 2 filas utilizando la propiedad de extremo de la red.

Producción

El artículo se ha abarcado con éxito en dos filas.

propiedad de gama de columna de cuadrícula

Esta propiedad establece en qué columna el elemento de la cuadrícula finalizará la visual.

Sintaxis

Gama de columna de cuadrícula: Auto | span-n | columna;

Parámetros explicados
auto: Este es un valor predeterminado que hace que un elemento abarque una sola columna.

span-n: Establece el número de columnas que el elemento se extenderá.

columna: Define en qué columna el elemento terminará mostrando.

Ejemplo
Aquí estamos haciendo un elemento en dos columnas.

CSS

.uno
Gama de columna de cuadrícula: Span 2;

El código anterior establece que el elemento 1 abarcará en dos columnas.

Producción

El elemento 1 abarca dos columnas.

propiedad del área de la red

Esta propiedad se utiliza para definir la ubicación y el tamaño de un elemento de la cuadrícula o dar un nombre determinado a un elemento de la cuadrícula al que luego se hace referencia por la propiedad de las áreas de plantilla de la cuadrícula. Además, es una propiedad en taquigrafía para las propiedades mencionadas a continuación.

1. chirriando
2. giratina
3. arranque de columna de cuadrícula
4. gama de columna de cuadrícula

Sintaxis

Área de la cuadrícula: fila-start / column-start / row-end / column-end | nombre del árticulo;

Parámetros explicados
chirriando: Este valor establece dónde comenzar a mostrar un elemento en una fila.

arranque de columna de cuadrícula: Establece dónde comenzar a mostrar un elemento en una columna.

giratina: Describe dónde dejar de mostrar elementos seguidos, o cuántas filas abarcar.

gama de columna de cuadrícula: Describe dónde dejar de mostrar elementos en una columna, o cuántas columnas abarcar.

nombre del árticulo: Este valor establece el nombre del elemento de la cuadrícula.

Ejemplo
Para comprender el funcionamiento de esta propiedad, considere el siguiente ejemplo.

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

.Siete
área de cuadrícula: 1/2 / span 3 / span 2;

El código anterior establece que hay cuatro columnas cada una con un ancho automático. Mientras tanto, el séptimo elemento en la cuadrícula se colocará en la primera fila, y la segunda columna, y abarca 3 filas, y 2 columnas.

Producción

La propiedad se implementó con éxito.

propiedad de la red-autos-columnas

Esta propiedad proporciona un cierto tamaño a las columnas de un diseño de cuadrícula.

Sintaxis

Grid-Auto-Columns: Auto | contenido máximo | Min-Content | longitud;

Parámetros explicados
auto: Este valor predeterminado evalúa el tamaño de las columnas en función del tamaño del contenedor.

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

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

longitud: Este valor establece el valor dado como el tamaño de las columnas.

Ejemplo
Considere el ejemplo a continuación.

CSS

.uno
área de cuadrícula: 1/1/2/2;

Antes de utilizar esta propiedad, primero debe asignar ubicaciones a cada uno de sus elementos de la cuadrícula utilizando la propiedad del área de la red. Por ejemplo, en el código anterior, hemos especificado que el elemento 1 se colocará al comienzo de la fila 1 y la columna 1, y al final de la fila 2, y la columna 2. Ahora las ubicaciones del resto de los elementos se asignan en un patrón similar.

CSS

.dos
área de cuadrícula: 1/2/2/3;

.tres
área de cuadrícula: 1/3/2/4;

.cuatro
área de cuadrícula: 2/1/3/2;

.cinco
área de cuadrícula: 2/2/3/3;

.seis
área de cuadrícula: 2/3/3/4;

Al resto de los elementos de la cuadrícula también se les asigna alguna ubicación utilizando la propiedad del área de la red.

CSS

.envase
Pantalla: cuadrícula;
Grid-Auto-Columns: 200px;
GAP GRID: 5PX;
Color de fondo: Sandybrown;
relleno: 10px;

Ahora usando la propiedad en discusión, el tamaño de las columnas se establece en 200px.

Producción

La propiedad ha sido implementada.

propiedad de la red-autos-filas

Esta propiedad proporciona un cierto tamaño a las filas de un diseño de cuadrícula.

Sintaxis

Grid-Auto-Rows: Auto | contenido máximo | Min-Content | longitud;

Parámetros explicados
auto: Este valor predeterminado evalúa el tamaño de las filas según el tamaño del contenedor.

contenido máximo: Ajusta el tamaño de la fila en función del elemento más grande de la fila.

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

longitud: Este valor establece el valor dado como el tamaño de las filas.

Ejemplo
Damos un cierto tamaño a las filas del contenedor utilizando la propiedad en discusión.

CSS

.uno Área de la cuadrícula: 1/1/2/2;
.dos área de cuadrícula: 1/2/2/3;
.tres área de cuadrícula: 1/3/2/4;
.cuatro área de cuadrícula: 2/1/3/2;
.cinco área de cuadrícula: 2/2/3/3;
.seis área de cuadrícula: 2/3/3/4;
.envase
Pantalla: cuadrícula;
Grid-Auto-Rows: 200px;
GAP GRID: 5PX;
Color de fondo: Sandybrown;
relleno: 10px;

Al igual que la propiedad Grid-Auto-Columns, primero tenemos que asignar ubicaciones a los elementos de la cuadrícula utilizando la propiedad del área de la cuadrícula y luego utilizando la propiedad Grid-Auto-Rows, el tamaño de las filas se ha establecido en 200px.

Producción

A cada fila se le ha asignado un tamaño con éxito.

Propiedad de grid-autos-flujo

Esta propiedad maneja cómo se colocarán los elementos de la red posicionados dentro del contenedor.

Sintaxis

Grid-Auto-Flow: fila | columna | denso | fila densa | columna densa;

Parámetros explicados
fila: Este valor predeterminado coloca los elementos que llenan todas las filas.

columna: Estos valores colocan elementos que llenan todas las columnas.

denso: Este valor llena espacios en la cuadrícula colocando artículos en esos espacios.

fila densa: Coloca elementos llenando todas las filas sin dejar agujeros en la cuadrícula.

columna densa: Coloca elementos que llenan todas las columnas que no dejan agujeros en la cuadrícula.

Ejemplo
Supongamos que desea colocar sus artículos de cuadrícula llenando cada columna.

CSS

.envase
Pantalla: cuadrícula;
Columna de plantilla de cuadrícula: auto auto auto auto;
Grid-plantilla-filas: auto auto;
Grid-Auto-Flow: columna;
GAP GRID: 5PX;
Color de fondo: Sandybrown;
relleno: 10px;

En el código anterior, en primer lugar, hemos creado cuatro columnas cada una con un ancho automático, luego generamos dos filas cada una con altura automática. Posteriormente, estamos utilizando la propiedad Grid-Auto-Flow para colocar artículos que llenan cada columna.

Producción

La propiedad funciona correctamente.

propiedad de la fila

Con el fin de definir la posición y el tamaño de un elemento de la cuadrícula, se utiliza la propiedad de la fila de la cuadrícula. Además, es una propiedad en taquigrafía para las siguientes propiedades.

1. chirriando
2. giratina

Sintaxis

Guida de cuadrícula: chirriegas de arranque de fila de rejilla / red de rejilla;

Parámetros explicados
chirriando: Establece en qué fila el elemento comenzará a mostrar.

giratina: Define en qué fila el elemento terminará mostrando.

Ejemplo
Aquí hay un ejemplo de esta propiedad.

CSS

.dos
Rarra de cuadrícula: 1 / span 2;

En el código anterior, hemos declarado que el elemento 2 se colocará en la fila 1 y abarcará 2 filas. Mientras tanto, la cuadrícula tiene cuatro columnas cada una con un ancho automático.

Producción

La propiedad en taquigrafía se ha implementado correctamente.

propiedad de columna de cuadrícula

Para describir la posición y el ancho de un elemento de la cuadrícula, se utiliza la propiedad de la fila de la cuadrícula. Además, es una propiedad en taquigrafía para las propiedades enumeradas aquí.

1. arranque de columna de cuadrícula
2. gama de columna de cuadrícula.

Sintaxis

Columna de cuadrícula: Grid-Column-start / GRID-Column-End;

Parámetros explicados
arranque de columna de cuadrícula: Establece en qué columna el elemento comenzará a mostrar.

gama de columna de cuadrícula: Define en qué columna el elemento terminará mostrando.

Ejemplo
Aquí hay un ejemplo de esta propiedad.

CSS

.uno
Columna de cuadrícula: 2 / Span 2;

El código anterior establece que el elemento 1 se colocará en la columna 2 y se extenderá a través de 2 columnas.

Producción

La propiedad funciona correctamente.

Propiedad de hilera

Como su nombre lo indica, la propiedad de GAP de fila especifica la brecha entre las filas de la cuadrícula.

Sintaxis

ROWA-GAP: Longitud | Normal | inicial | heredar;

Parámetros explicados
longitud: Establece la brecha entre filas.

normal: Define una brecha normal entre las filas y es un valor predeterminado.

Ejemplo
Consulte el ejemplo a continuación para comprender esta propiedad.

CSS

.envase
Pantalla: cuadrícula;
Columna de plantilla de cuadrícula: Auto Auto Auto;
ROWA-GAP: 60px;
Color de fondo: Sandybrown;
relleno: 10px;

En el código anterior, hemos especificado que la brecha entre cada fila será de 60px.

CSS

.elementos> div
Color de fondo: Bisque;
borde: 1px negro sólido;
relleno: 20px 0;
Text-Align: Center;
tamaño de fuente: 35px;

Este código es el mismo que el anterior con la única diferencia que para demostrar el concepto de brecha entre las filas correctamente, hemos agregado bordes a los elementos dentro de la cuadrícula.

Producción

La brecha entre filas se ha implementado con éxito.

propiedad de la brecha de columna

Esta propiedad establece la brecha entre las columnas de la cuadrícula.

Sintaxis

Gap de columna: longitud | Normal | inicial | heredar;

Parámetros explicados
longitud: Establece la brecha entre columnas.

normal: Define una brecha normal entre las columnas y es un valor predeterminado.

Ejemplo
Agreguemos un espacio específico entre columnas dentro de una cuadrícula.

CSS

.envase
Pantalla: cuadrícula;
Columna de plantilla de cuadrícula: Auto Auto Auto;
columna-gap: 60px;
Color de fondo: Sandybrown;
relleno: 10px;

Aquí hemos agregado un espacio de 60 px entre cada columna.

Producción

Se agregó la brecha entre columnas.

propiedad de la brecha

Para especificar la brecha entre filas y columnas de una vez, la propiedad GAP se usa. Es una propiedad en taquigrafía para los siguientes.

1. hilera
2. brecha de columna

Sintaxis

GAP: ROW-GAP columna-GAP;

Parámetros explicados
hilera: Agrega un espacio entre las filas.

brecha de columna: Agrega un espacio entre las columnas.

Ejemplo
Establezcamos algo de brecha entre filas y columnas a la vez.

CSS

.envase
Pantalla: cuadrícula;
Columna de plantilla de cuadrícula: Auto Auto Auto;
brecha: 65px;
Color de fondo: Sandybrown;
relleno: 10px;

En el código anterior, hemos especificado que habrá una brecha de 65 px entre cada fila, y cada columna.

Producción

La propiedad funciona correctamente.

Conclusión

CSS Grid es un modelo de diseño que permite una disposición fácil de elementos que aparecen en un sitio web en varias filas y columnas. Existen numerosas propiedades asociadas con ella, como columnas de plantilla de cuadrícula, filas de plantilla de cuadrícula, columna de cuadrícula, fila de cuadrícula, área de cuadrícula, etc. Cada una de estas propiedades tiene un propósito diferente que hemos explicado en esta publicación junto con ejemplos relevantes.