¿Qué es CSS Grid??

Asignar posiciones apropiadas a los elementos es muy significativo al diseñar un sitio web. Hay varias propiedades y diseños disponibles en CSS que ayudan a realizar esta tarea. Uno de estos diseños es el módulo de cuadrícula CSS que organiza elementos en filas y columnas. El enfoque de este artículo es enfatizar cuál es este diseño y cómo se puede usar.

Empecemos.

¿Qué es CSS Grid?

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 tener que pasar por el problema de usar posicionamiento y flotadores.

Una cuadrícula posiciona elementos con respecto a la página web u otros elementos presentes en la página web. A continuación hemos mostrado una representación visual de un diseño de cuadrícula CSS.

Un modelo de diseño de cuadrícula funciona con todos los últimos navegadores. Consiste en dos componentes que son recipiente de cuadrícula y elementos de la cuadrícula. A continuación los hemos explicado en detalle.

Recipiente 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.

Elementos de la 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.

Aquí hay una representación gráfica del contenedor de cuadrícula y elementos de la cuadrícula.

Como ya se mencionó, una cuadrícula CSS divide una página web en filas y columnas para organizar elementos. Estas filas y columnas junto con otras terminologías de cuadrícula importantes se explican a continuación.

Columnas en una cuadrícula

Las líneas verticales en una cuadrícula dentro de la cual se colocan los elementos se consideran columnas en una cuadrícula. Un sistema de cuadrícula puede tener al menos dos y como máximo de doce o más columnas.

Filas en una cuadrícula

Las líneas horizontales en una cuadrícula dentro de la cual se colocan los elementos se consideran filas en una cuadrícula. Un sistema de cuadrícula puede tener numerosas filas.

Espacios en una cuadrícula

El área entre cada fila y la columna se conoce como espacios.

Líneas en una cuadrícula

Las líneas entre cada fila se denominan líneas de fila, mientras que las líneas entre cada columna se denominan líneas de columna.

Hay muchas propiedades vinculadas a la cuadrícula CSS. Consulte la siguiente sección para aprender sobre ellos.

Propiedades de la cuadrícula

La tabla a continuación proporciona una descripción general de las propiedades de diseño de cuadrícula.

Propiedades	Descripción
columnas de plantilla de cuadrícula	Esta propiedad establece el número y el tamaño de las columnas en un diseño de cuadrícula.
filas de la cuadrícula	Describe el tamaño de las filas en un sistema de cuadrícula.
arena de plantilla	Esta propiedad asigna nombres a varios elementos en una cuadrícula.
Grid-autos-columna	Establece el tamaño inicial de una columna.
rejilla	Esta propiedad establece el tamaño inicial de una fila.
cuadrícula	Establece cómo los elementos que se colocan automáticamente se colocan en un sistema de cuadrícula.
chirriando	Esta propiedad establece dónde comenzar un artículo en una cuadrícula.
arranque de columna de cuadrícula	Realiza la misma función que la propiedad anterior.
giratina
gama de columna de cuadrícula	Realiza la misma función que la propiedad anterior.
área de rejilla	Esta propiedad se usa para nombrar un área de cuadrícula específica.
hilera	Esta propiedad establece una brecha entre filas.
brecha de columna	Establece la brecha entre columnas.

Comprendamos aún más el sistema de cuadrícula con la ayuda de un ejemplo.

Ejemplo

En el ejemplo demostrado a continuación, hemos creado un diseño de cuadrícula simple. El bosquejo de la cuadrícula se muestra a continuación.

Comencemos la codificación.

Html

A
B
C
D

Aquí simplemente hemos anidado cuatro contenedores Div dentro de un contenedor div más grande. Cada uno de los elementos div se ha asignado alguna clase.

CSS

.envase
Pantalla: cuadrícula;
GAP GRID: 5PX;
Columnas de plantilla de cuadrícula: 120px 120px 120px;

Usando el "contenedor" de clase asignado al div más grande, lo estamos mostrando como una cuadrícula. Además, asignó una brecha de 5px entre filas y columnas. Por último, hemos creado tres columnas con un tamaño de 120px cada una utilizando la propiedad de columnas de plantilla de cuadrícula.

CSS

.artículo
Color de fondo: Sandybrown;
color blanco;
Border-Radius: 6px;
relleno: 25px;
tamaño de fuente: 20px;

Ahora simplemente estamos diseñando los elementos presentes dentro del contenedor de cuadrícula utilizando algunas propiedades básicas de CSS.

CSS

.uno
Columna de cuadrícula: 1/3; / * Especifica la ubicación y el tamaño del elemento dentro de una columna */
Guida de rejilla: 1; / * Especifica la ubicación y el tamaño del elemento dentro de una fila */

La propiedad de la columna de la cuadrícula establece la posición de inicio y finalización del elemento de la cuadrícula en una columna, mientras tanto, la propiedad de la fila de cuadrícula define la posición de un elemento en una fila. Por ejemplo, en el fragmento de código anterior, el elemento 1 comenzará a mostrar en la columna 1 y finalizará en la columna 3, mientras que se mostrará en la fila 1.

CSS

.dos
Columna de cuadrícula: 3;
Rarra de cuadrícula: 1/3;

.tres
Columna de cuadrícula: 1;
Guida de rejilla: 2;

.cuatro
Columna de cuadrícula: 2;
Guida de rejilla: 2;

Uso de la columna de la cuadrícula y las propiedades de la fila de cuadrícula también se están especificando las posiciones del resto de los elementos.

Producción

Se ha generado un diseño de cuadrícula simple.

Conclusión

Un modelo de diseño de cuadrícula 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 con respecto a la página web u otros elementos presentes en la página web. Consiste en varios elementos que son contenedores de cuadrícula y artículos de cuadrícula. Un contenedor de cuadrícula es el elemento principal, mientras que los elementos de la cuadrícula son elementos para niños. Este artículo sobre todos los detalles necesarios del diseño de la cuadrícula junto con representaciones gráficas y un ejemplo apropiado.