Contenedor de cuadrícula CSS
Contenedor de cuadrícula
Para convertir un elemento HTML en un contenedor de cuadrícula, puede establecer ladisplaypropiedad engridoinline-grid。
Dentro del contenedor de cuadrícula se colocan los elementos de cuadrícula formados por columnas y filas.
Propiedad grid-template-columns
La propiedad grid-template-columns define el número de columnas en el diseño de cuadrícula, y también puede establecer el ancho de cada columna.
El valor de la propiedad es una lista separada por espacios, donde cada valor define el ancho de la columna correspondiente.
Si desea que el diseño de cuadrícula contenga 4 columnas, debe establecer el ancho de las 4 columnas. Si todas las columnas tienen el mismo ancho, puede establecerlo enauto。
El siguiente ejemplo establece un diseño de cuadrícula de 4 columnas:
Nota:Si tiene más de 4 elementos de cuadrícula en una cuadrícula de 4 columnas, el diseño de cuadrícula creará una nueva fila para colocar ese elemento.
grid-template-columnsLa propiedad también se puede utilizar para especificar el ancho de las columnas.
Propiedad grid-template-rows
La propiedad grid-template-rows establece la altura de cada fila.
El valor de la propiedad es una lista separada por espacios, donde cada valor define la altura de la fila correspondiente:
Propiedad justify-content
La propiedad justify-content se utiliza para alinear la cuadrícula dentro del contenedor, estableciendo cómo se distribuye el espacio entre y alrededor de los elementos a lo largo del eje principal del contenedor flexible (o el eje de fila de la cuadrícula).
Nota:El ancho total de la cuadrícula debe ser menor que el ancho del contenedor para que la propiedad justify-content tenga efecto.
justify-contentPara más detalles, consulte:Propiedad CSS justify-content
Propiedad align-content
align-contentLa propiedad se utiliza para establecer la alineación de los elementos de cuadrícula en el contenedor en dirección vertical.
Nota:La altura total de los elementos de cuadrícula debe ser menor que la altura del contenedor para que la propiedad align-content tenga efecto.
Otras extensiones