The grid-auto-columns property
The grid-auto-columns property specifies
a number and width of columns that an element
will occupy in an implicitly-created grid.
Implicitly-created grid - a grid that
is created automatically when elements go beyond
the already designated grid. In the property value,
specify the width of the columns in any
size units.
The property is specified on the parent element
and determines the width of the columns of
child elements.
Syntax
selector {
grid-auto-columns: column width;
}
Example
Let's set the column widths for our elements in the implicitly-created grid:
<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;
}
:
See also
-
the
grid-auto-rowsproperty
that specifies a number and width of rows in an implicitly-created grid -
the
grid-template-columnsproperty
that specifies a number and width of columns in a grid
