Grid Layout
El módulo CSS Grid Layout ofrece un sistema de diseño basado en cuadrículas, con filas y columnas, lo que facilita el diseño de páginas web sin tener que utilizar las propiedades CSS float o position.
Soporte del navegador
Las propiedades de grid son compatibles con todos los navegadores modernos.
| Chrome | Edge | Mozilla | Safari | Opera |
| 57.0 | 16.0 | 52.0 | 10 | 44 |
Elementos Grid
Un diseño grid consta de un elemento principal/padre, con uno o más elementos secundarios/hijos.
Ejemplo:
<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 class="grid-item">5</div>
<div class="grid-item">6</div>
<div class="grid-item">7</div>
<div class="grid-item">8</div>
<div class="grid-item">9</div>
</div>
La propiedad display
Un elemento HTML se convierte en un contenedor grid cuando su propiedad display se establece en grid o inline-grid.
Ejemplo:
.grid-container {
display: grid;
}
Ejemplo:
.grid-container {
display: inline-grid;
}
Todos los hijos directos del contenedor grid se convierten automáticamente en elementos/hijos del contenedor grid.
Columnas Grid
Las líneas verticales de los elementos grid se denominan columnas.
Filas Grid
Las líneas horizontales de los elementos grid a se denominan filas.
Brechas Grid
Los espacios entre cada columna/fila se llaman espacios (gaps).
Puedes ajustar el tamaño del espacio utilizando una de las siguientes propiedades:
column-gaprow-gapgap
Ejemplo:
La propiedad column-gap establece el espacio entre las columnas:
.grid-container {
display: grid;
column-gap: 50px;
}
Ejemplo:
La propiedad row-gap establece el espacio entre las filas:
.grid-container {
display: grid;
row-gap: 50px;
}
Ejemplo:
La propiedad gap es una propiedad abreviada de las propiedades row-gap y column-gap:
.grid-container {
display: grid;
gap: 50px 100px;
}
Ejemplo:
La propiedad gap también se puede utilizar para establecer tanto el espacio de fila como el espacio de columna en un solo valor:
.grid-container {
display: grid;
gap: 50px;
}
Líneas Grid
Las líneas entre columnas se llaman líneas de columnas.
Las líneas entre filas se llaman líneas de fila.
Consulte los números de línea al colocar un elemento grid en un contenedor grid:
Ejemplo:
Coloque un elemento grid en la línea de columna 1 y déjelo terminar en la línea de columna 3:
.item1 {
grid-column-start: 1;
grid-column-end: 3;
}
Ejemplo:
Coloque un elemento grid en la línea de fila 1 y déjelo terminar en la línea de fila 3:
.item1 {
grid-row-start: 1;
grid-row-end: 3;
}
Todas las propiedades Grid CSS
| Propiedad | Descripción |
column-gap | Especifica el espacio entre las columnas. |
gap | Una propiedad abreviada para las propiedades row-gap y column-gap. |
grid | Una propiedad abreviada para las propiedades grid-template-rows, grid-template-columns, grid-template-areas, grid-auto-rows, grid-auto-columns y grid-auto-flow. |
grid-area | Especifica un nombre para el elemento grid o esta propiedad es una propiedad abreviada para las propiedades grid-row-start, grid-column-start, grid-row-end y grid-column-end. |
grid-auto-columns | Especifica un tamaño de columna predeterminado. |
grid-auto-flow | Especifica cómo se insertan los elementos colocados automáticamente en la cuadrícula. |
grid-auto-rows | Especifica un tamaño de fila predeterminado. |
grid-column | Una propiedad abreviada para las propiedades grid-column-start y grid-column-end. |
grid-column-end | Especifica dónde finalizar el elemento grid. |
grid-column-gap | Especifica el tamaño del espacio entre columnas. |
grid-column-start | Especifica dónde comenzar el elemento de la cuadrícula. |
grid-gap | Una propiedad abreviada para las propiedades grid-row-gap y grid-column-gap. |
grid-row | Una propiedad abreviada para las propiedades grid-row-start y grid-row-end. |
grid-row-end | Especifica dónde finalizar el elemento grid. |
grid-row-gap | Especifica el tamaño del espacio entre filas. |
grid-row-start | Especifica dónde comenzar el elemento grid. |
grid-template | Una propiedad abreviada para las propiedades grid-template-rows, grid-template-columns y grid-areas. |
grid-template-areas | Especifica cómo mostrar columnas y filas, utilizando elementos de cuadrícula con nombre. |
grid-template-columns | Especifica el tamaño de las columnas y cuántas columnas hay en un diseño de cuadrícula. |
grid-template-rows | Especifica el tamaño de las filas en un diseño grid. |
row-gap | Especifica el espacio entre las filas de grid. |
Traducido con 💚 desde W3Schools.com