Concepto de diseño de cuadrícula CSS

 

¿Cuál es el concepto de diseño de cuadrícula CSS?

El sistema CSS Grid Layout ofrece el sistema de diseño basado en cuadrículas, lo que significa que proporciona filas y columnas para crear páginas web. Ayuda a reducir el uso de flotadores y sistemas de posicionamiento.

Ejemplo de plantilla de cuadrícula CSS

Aquí el diseño completo de CSS Grid con código fuente, lo explicaremos a continuación en los párrafos.

Introducción al concepto de elementos de cuadrícula

El diseño de la cuadrícula es una colección de uno o más elementos de la cuadrícula.

1 2 3 4 5 6

<div class="grid-container">   <div class="grid-item">1</div>   <div class="grid-item">2</div>   <div class="grid-item">3</div>   <div class="grid-item">4</div> </div>

Para mostrar los elementos de la cuadrícula HTML usamos la displaypropiedad CSS.

1 2 3

.grid-container {   display: grid; }

1 2 3

.grid-container {   display: inline-grid; }

El uso de contenedores de cuadrícula de propiedades de visualización CSS cambia automáticamente los elementos a elementos de cuadrícula.

Columnas de cuadrícula

La línea vertical de elementos de cuadrícula se denomina columnas de cuadrícula.

Ref de imagen: https://www.w3schools.com/

Columnas de cuadrícula CSS

Filas de cuadrícula

Las líneas horizontales de los elementos de la cuadrícula se denominan filas .

Filas de cuadrícula CSS

Concepto de espacios de diseño de cuadrícula

También podemos cambiar los espacios entre las líneas de la cuadrícula,

grid-column-gap
grid-row-gap
grid-gap

Ejemplo de espacios de cuadrícula

Aquí está la propiedad para el espacio entre columnas de la cuadrícula

1 2 3 4

.grid-container {   display: grid;   grid-column-gap: 60px; }

Aquí está la propiedad para el espacio entre filas de la cuadrícula

1 2 3 4

.grid-container {   display: grid;   grid-row-gap: 60px; }

Separar o completar espacios entre todas las cuadrículas y también establecer tanto para filas como para columnas.

1 2 3 4

.grid-container {   display: grid;   grid-gap: 60px 120px; }

Líneas de cuadrícula

Si crea las líneas entre columnas, se llama línea de columna y si fila, entonces se llama líneas de fila.

Líneas de cuadrícula CSS

CSS para líneas de cuadrícula de fila y líneas de cuadrícula de columna,

elemento de la cuadrícula en la línea de la columna 1 y finaliza en la línea de la columna 3:

1 2 3 4

.item1 {   grid-column-start: 1;   grid-column-end: 3; }

Elemento de cuadrícula en la línea de fila 1 y final en la línea de fila 3:

1 2 3 4

.item1 {   grid-row-start: 1;   grid-row-end: 3; }

Aquí está el concepto completo del módulo CSS Grid Layout donde trabajamos con páginas web.