Artículos de cuadrícula en CSS | Explicado

Grid es un modelo de diseño CSS que permite a sus usuarios organizar elementos que aparecen en un sitio web en varias filas y columnas. Este modelo básicamente divide una página web en secciones y alinea elementos sin el uso de la posición y las propiedades flotantes. Tiene dos componentes, un contenedor y elementos. Sin embargo, en esta publicación, enfatizaremos qué es un elemento de cuadrícula y las diversas propiedades asociadas con él.

¿Qué es un artículo de cuadrícula?

Un elemento de la cuadrícula es un elemento infantil que está presente dentro de un contenedor de cuadrícula. Dentro de un contenedor de forma predeterminada, hay un elemento presente para cada columna, en cada fila. Sin embargo, puede abarcar elementos de la cuadrícula en numerosas filas y columnas.

Existen numerosas propiedades asociadas con un elemento de cuadrícula que define sus características. Hemos explicado estas propiedades a continuación.

Propiedades del elemento de la cuadrícula

Las propiedades vinculadas a un elemento de la cuadrícula se explican en detalle a continuación.

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
Supongamos que desea colocar un elemento específico en la primera fila del contenedor aquí es cómo se hace.

Html

1
2
3
4
5
6

Para generar 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 seis elementos Div dentro del contenedor de la cuadrícula Div, cada uno con una clase diferente.

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, en primer lugar, estamos asignando la pantalla de cuadrícula DIV más grande para que sea un contenedor de cuadrícula, entonces estamos especificando que hay tres columnas en la cuadrícula cada una con un ancho de 200px y tiene un espacio de 5px. Al contenedor también se le ha dado algo de color de fondo y relleno. Por último, estamos afirmando que el tercer elemento se mostrará al comienzo de la fila 1.

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

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 comenzará el elemento.

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

CSS

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

.uno
Gama-Columna-Instart: 2;

En el código anterior, hemos hecho cuatro columnas cada una con un ancho de 200px y luego utilizando la propiedad de la columna de la cuadrícula-columna, estamos colocando el ítem 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
Hagamos una amplia capacidad para 2 filas.

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

.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
Hagamos que un elemento se extienda a través de 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 de la fila

Con el fin de definir la ubicació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 propiedades mencionadas a continuación.

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
Considere el ejemplo a continuación.

CSS

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

.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 estará en 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 finalizará.

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 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: 2/1 / span 2 / span 3;

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 segunda fila, y la primera columna, y abarca 2 filas, y 3 columnas.

Producción

La propiedad se implementó con éxito.

Conclusión

Un elemento de la cuadrícula es un elemento infantil que está presente dentro de un contenedor de cuadrícula. Dentro de un contenedor de forma predeterminada, hay un elemento presente para cada columna, en cada fila. Para asignar diferentes características a un elemento de cuadrícula, existen numerosas propiedades asociadas con él, como fila de rejilla, columna de cuadrícula, área de cuadrícula, etc. Esta guía le enseña qué es un elemento de cuadrícula y cómo puede hacer que estos elementos se comporten de cierta manera utilizando las propiedades relacionadas junto con los ejemplos apropiados.