The grid-auto-columns CSS property is used in grid layouts to set the size of implicitly created columns when the grid items do not explicitly specify their own column sizes.
The grid-auto-columns property accepts a value or a series of values, such as length values (e.g., 200px, auto), percentage values (e.g., 50%), or minmax() functions (e.g., minmax(100px, 1fr)).
Here’s an example:
.grid-container {
display: grid;
grid-auto-columns: 200px;
}
In this example, the grid-auto-columns: 200px; rule sets the width of implicitly created columns in a grid container to 200 pixels. When grid items do not explicitly specify their own column sizes, these columns will be automatically created with a width of 200 pixels.
The grid-auto-columns property provides control over the sizing of implicitly created columns in grid layouts, ensuring consistent column widths and helping to achieve the desired grid structure.