Módulo de布局 de cuadrícula CSS

Encabezado
Menú
Principal
Derecha
Pie de página

Prueba personal

Diseño de cuadrícula

El módulo de diseño de cuadrícula de CSS (CSS Grid Layout Module) proporciona un sistema de diseño basado en cuadrícula con filas y columnas, lo que hace que el diseño web sea más fácil sin necesidad de usar flotación y posicionamiento.

Compatibilidad del navegador

Todos los navegadores modernos admiten las propiedades de cuadrícula.

57.0 16.0 52.0 10 44

Elementos de cuadrícula

El diseño de cuadrícula se compone de un elemento padre y uno o más elementos 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>
1
2
3
4
5
6
7
8
9

Prueba personal

Atributo Display

cuando el atributo HTML display La propiedad se establece en grid o inline-grid en ese caso, se convertirá en contenedor de cuadrícula.

Ejemplo

.grid-container {
  display: grid;
}

Prueba personal

Ejemplo

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

Prueba personal

Todos los elementos directos hijos del contenedor de cuadrícula se convierten automáticamente en elementos de cuadrícula.

Columnas de cuadrícula (Grid Columns)

Las líneas verticales de los elementos de cuadrícula se llaman columnas.

Filas de cuadrícula (Grid Rows)

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

Espacios de cuadrícula (Grid Gaps)

El espacio entre cada columna/fila se llama espacio.

Puede ajustar el tamaño del espacio utilizando una de las siguientes propiedades:

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

Ejemplo

grid-column-gap Esta propiedad establece el espacio entre columnas:

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

Prueba personal

Ejemplo

grid-row-gap Esta propiedad establece el espacio entre filas:

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

Prueba personal

Ejemplo

grid-gap Esta propiedad es una abreviatura de las propiedades grid-row-gap y grid-column-gap:

.grid-container {
  display: grid;
  grid-gap: 50px 100px;
}

Prueba personal

Ejemplo

grid-gap Las propiedades también se pueden usar para establecer el espacio entre filas y columnas en un valor:

.grid-container {
  display: grid;
  grid-gap: 50px;
}

Prueba personal

Líneas de cuadrícula (Grid Lines)

Las líneas entre las columnas se llaman líneas de columna (column lines).

Las líneas entre las filas se llaman líneas de fila (row lines).

Cuando coloques el elemento de cuadrícula en el contenedor de cuadrícula, refiere a los números de fila:

Ejemplo

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

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

Prueba personal

Ejemplo

Coloca el elemento de cuadrícula en la línea de fila 1 y finaliza en la línea de fila 3:

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

Prueba personal