Contenedor de cuadrícula CSS
1
2
3
4
5
6
7
8
Contenedor de rejilla
Para hacer que un elemento HTML se comporte como un contenedor de cuadrícula, debe establecer la displaypropiedad en
grido inline-grid.
Los contenedores de cuadrícula consisten en elementos de cuadrícula, colocados dentro de columnas y filas.
La propiedad grid-template-columns
La grid-template-columnspropiedad define el número de columnas en su diseño de cuadrícula y puede definir el ancho de cada columna.
El valor es una lista separada por espacios, donde cada valor define el ancho de la columna respectiva.
Si desea que su diseño de cuadrícula contenga 4 columnas, especifique el ancho de las 4 columnas o "automático" si todas las columnas deben tener el mismo ancho.
Ejemplo
Haz una grilla con 4 columnas:
.grid-container {
display: grid;
grid-template-columns: auto auto auto auto;
}
Nota: si tiene más de 4 elementos en una cuadrícula de 4 columnas, la cuadrícula agregará automáticamente una nueva fila para colocar los elementos.
La grid-template-columnspropiedad también se puede utilizar para especificar el tamaño (ancho) de las columnas.
Ejemplo
Establezca un tamaño para las 4 columnas:
.grid-container {
display: grid;
grid-template-columns: 80px 200px auto 40px;
}
La propiedad grid-template-rows
La grid-template-rowspropiedad define la altura de cada fila.
1
2
3
4
5
6
7
8
El valor es una lista separada por espacios, donde cada valor define la altura de la fila respectiva:
Ejemplo
.grid-container {
display: grid;
grid-template-rows: 80px 200px;
}
La propiedad de justificar el contenido
La justify-contentpropiedad se utiliza para alinear toda la cuadrícula dentro del contenedor.
1
2
3
4
5
6
Nota: el ancho total de la cuadrícula debe ser menor que el ancho del contenedor para que la justify-contentpropiedad tenga algún efecto.
Ejemplo
.grid-container {
display: grid;
justify-content: space-evenly;
}
Ejemplo
.grid-container {
display: grid;
justify-content: space-around;
}
Ejemplo
.grid-container {
display: grid;
justify-content: space-between;
}
Ejemplo
.grid-container {
display: grid;
justify-content: center;
}
Ejemplo
.grid-container {
display: grid;
justify-content: start;
}
Ejemplo
.grid-container {
display: grid;
justify-content: end;
}
La propiedad de alineación de contenido
La align-contentpropiedad se usa para alinear
verticalmente toda la cuadrícula dentro del contenedor.
1
2
3
4
5
6
Nota: la altura total de la cuadrícula debe ser menor que la altura del contenedor para que la align-contentpropiedad tenga algún efecto.
Ejemplo
.grid-container {
display: grid;
height: 400px;
align-content: center;
}
Ejemplo
.grid-container {
display: grid;
height: 400px;
align-content: space-evenly;
}
Ejemplo
.grid-container {
display: grid;
height: 400px;
align-content: space-around;
}
Ejemplo
.grid-container {
display: grid;
height: 400px;
align-content: space-between;
}
Ejemplo
.grid-container {
display: grid;
height: 400px;
align-content: start;
}
Ejemplo
.grid-container {
display: grid;
height: 400px;
align-content: end;
}