Contenedor de rejilla CSS

1
2
3
4
5
6
7
8

Prueba personalmente

Contenedor de rejilla

Para que un elemento HTML actúe como contenedor de rejilla, debe configurar display El atributo se configura como grid o inline-grid.

El contenedor de rejilla se compone de elementos de rejilla colocados dentro de columnas y filas.

Atributo grid-template-columns

grid-template-columns El atributo define el número de columnas en el diseño de rejilla y puede definir el ancho de cada columna.

Este valor es una lista separada por espacios, donde cada valor define la longitud de la columna correspondiente.

Si desea que el diseño de rejilla contenga 4 columnas, especifique el ancho de estas 4 columnas; si todas las columnas deben tener el mismo ancho, configurelo como "auto".

Ejemplo

Generar una rejilla que contenga cuatro columnas:

.grid-container {
  display: grid;
  grid-template-columns: auto auto auto auto;
}

Prueba personalmente

Nota:Si en una rejilla de 4 columnas hay más de 4 elementos, la rejilla agregará automáticamente nuevas filas y colocará estos elementos en ellas.

grid-template-columns El atributo también se puede utilizar para especificar el tamaño de las columnas (ancho).

Ejemplo

Establecer el tamaño de estos 4 columnas:

.grid-container {
  display: grid;
  grid-template-columns: 80px 200px auto 40px;
}

Prueba personalmente

Atributo grid-template-rows

grid-template-rows El atributo define la altura de cada columna.

1
2
3
4
5
6
7
8

Su valor es una lista separada por espacios, donde cada valor define la altura de la fila correspondiente:

Ejemplo

.grid-container {
  display: grid;
  grid-template-rows: 80px 200px;
}

Prueba personalmente

Atributo justify-content

justify-content El atributo se utiliza para alinear toda la rejilla dentro del contenedor.

1
2
3
4
5
6
7
8

Nota:El ancho total de la rejilla debe ser menor que el ancho del contenedor, de esta manera el atributo justify-content puede funcionar.

Ejemplo

.grid-container {
  display: grid;
  justify-content: space-evenly;
}

Prueba personalmente

Ejemplo

.grid-container {
  display: grid;
  justify-content: space-around;
}

Prueba personalmente

Ejemplo

.grid-container {
  display: grid;
  justify-content: space-between;
}

Prueba personalmente

Ejemplo

.grid-container {
  display: grid;
  justify-content: center;
}

Prueba personalmente

Ejemplo

.grid-container {
  display: grid;
  justify-content: start;
}

Prueba personalmente

Ejemplo

.grid-container {
  display: grid;
  justify-content: end;
}

Prueba personalmente

Atributo alineación de contenido

alineación de contenido La propiedad se utiliza para alinear verticalmente todo el网格 dentro del contenedor.

1
2
3
4
5
6
7
8

Nota:La altura total de la rejilla debe ser menor que la altura del contenedor, de modo que el atributo align-content funcione.

Ejemplo

.grid-container {
  display: grid;
  height: 400px;
  align-content: center;
}

Prueba personalmente

Ejemplo

.grid-container {
  display: grid;
  height: 400px;
  align-content: space-evenly;
}

Prueba personalmente

Ejemplo

.grid-container {
  display: grid;
  height: 400px;
  align-content: space-around;
}

Prueba personalmente

Ejemplo

.grid-container {
  display: grid;
  height: 400px;
  align-content: space-between;
}

Prueba personalmente

Ejemplo

.grid-container {
  display: grid;
  height: 400px;
  align-content: start;
}

Prueba personalmente

Ejemplo

.grid-container {
  display: grid;
  height: 400px;
  align-content: end;
}

Prueba personalmente