Módulo de diseño de cuadrícula CSS
Encabezamiento
Menú
Principal
Correcto
Pie de página
Diseño de cuadrícula
El módulo de diseño de cuadrícula de CSS 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 usar flotadores y posiciones.
Compatibilidad con navegador
Las propiedades de la cuadrícula son compatibles con todos los navegadores modernos.
| 57.0 | 16.0 | 52.0 | 10 | 44 |
Elementos de cuadrícula
Un diseño de cuadrícula consta de un elemento principal, con uno o más elementos secundarios.
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>
1
2
3
4
5
6
7
8
9
Mostrar propiedad
Un elemento HTML se convierte en un contenedor de cuadrícula cuando su displaypropiedad se establece en
grido inline-grid.
Ejemplo
.grid-container {
display: grid;
}
Ejemplo
.grid-container {
display: inline-grid;
}
Todos los elementos secundarios directos del contenedor de cuadrícula se convierten automáticamente en elementos de cuadrícula .
Columnas de cuadrícula
Las líneas verticales de los elementos de la cuadrícula se denominan columnas .
Filas de cuadrícula
Las líneas horizontales de los elementos de la cuadrícula se denominan filas .
Brechas de rejilla
Los espacios entre cada columna/fila se denominan espacios .
Puede ajustar el tamaño del espacio usando una de las siguientes propiedades:
grid-column-gapgrid-row-gapgrid-gap
Ejemplo
La grid-column-gappropiedad establece el espacio entre las columnas:
.grid-container {
display: grid;
grid-column-gap: 50px;
}
Ejemplo
La grid-row-gappropiedad establece el espacio entre las filas:
.grid-container {
display: grid;
grid-row-gap: 50px;
}
Ejemplo
La grid-gappropiedad es una propiedad abreviada para el
grid-row-gapy las
grid-column-gappropiedades:
.grid-container {
display: grid;
grid-gap: 50px 100px;
}
Ejemplo
La grid-gappropiedad también se puede usar para establecer tanto el espacio entre filas como el espacio entre columnas en un valor:
.grid-container {
display: grid;
grid-gap: 50px;
}
Líneas de cuadrícula
Las líneas entre columnas se llaman líneas de columna .
Las líneas entre filas se llaman líneas de fila .
Consulte los números de línea cuando coloque un elemento de cuadrícula en un contenedor de cuadrícula:
Ejemplo
Coloque un elemento de cuadrícula en la línea de columna 1 y deje que termine en la línea de columna 3:
.item1 {
grid-column-start: 1;
grid-column-end: 3;
}
Ejemplo
Coloque un elemento de cuadrícula en la línea de fila 1 y deje que termine en la línea de fila 3:
.item1 {
grid-row-start: 1;
grid-row-end: 3;
}
Todas las propiedades de cuadrícula CSS
| Property | Description |
|---|---|
| column-gap | Specifies the gap between the columns |
| gap | A shorthand property for the row-gap and the column-gap properties |
| grid | A shorthand property for the grid-template-rows, grid-template-columns, grid-template-areas, grid-auto-rows, grid-auto-columns, and the grid-auto-flow properties |
| grid-area | Either specifies a name for the grid item, or this property is a shorthand property for the grid-row-start, grid-column-start, grid-row-end, and grid-column-end properties |
| grid-auto-columns | Specifies a default column size |
| grid-auto-flow | Specifies how auto-placed items are inserted in the grid |
| grid-auto-rows | Specifies a default row size |
| grid-column | A shorthand property for the grid-column-start and the grid-column-end properties |
| grid-column-end | Specifies where to end the grid item |
| grid-column-gap | Specifies the size of the gap between columns |
| grid-column-start | Specifies where to start the grid item |
| grid-gap | A shorthand property for the grid-row-gap and grid-column-gap properties |
| grid-row | A shorthand property for the grid-row-start and the grid-row-end properties |
| grid-row-end | Specifies where to end the grid item |
| grid-row-gap | Specifies the size of the gap between rows |
| grid-row-start | Specifies where to start the grid item |
| grid-template | A shorthand property for the grid-template-rows, grid-template-columns and grid-areas properties |
| grid-template-areas | Specifies how to display columns and rows, using named grid items |
| grid-template-columns | Specifies the size of the columns, and how many columns in a grid layout |
| grid-template-rows | Specifies the size of the rows in a grid layout |
| row-gap | Specifies the gap between the grid rows |