grid-auto-columns

Draft

Definition

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.