Propiedad grid-auto-columns
La propiedad grid-auto-columns establece
el número y el ancho de las columnas que
ocupará un elemento en una cuadrícula implícita.
Cuadrícula implícita - una cuadrícula que se crea
automáticamente cuando los elementos se salen
de los límites de una cuadrícula ya definida.
En el valor de la propiedad especificamos el ancho de las columnas
en cualquier unidad
de medida.
La propiedad se especifica en el elemento padre
y determina el ancho de las columnas de los elementos hijos.
Sintaxis
selector {
grid-auto-columns: ancho de columna;
}
Ejemplo
Establezcamos el ancho de las columnas para nuestros elementos en la cuadrícula implícita:
<div id="parent">
<div>1</div>
<div>2</div>
<div>3</div>
<div>4</div>
<div>5</div>
</div>
#parent {
display: grid;
grid-template-rows: 40px 40px;
grid-auto-columns: 200px;
border: 2px solid #696989;
padding: 10px;
}
#parent > div {
padding: 10px;
border: 1px solid #696989;
}
:
Ver también
-
la propiedad
grid-auto-rows,
que establece el número y el ancho de las filas en una cuadrícula implícita -
la propiedad
grid-template-columns,
que establece el número y el ancho de las columnas en una cuadrícula
