The grid-auto-columns property in CSS Grid Layout specifies the size of any columns that are created automatically. When grid items are placed in columns that you haven't explicitly defined, grid-auto-columns sets their width, ensuring a consistent and predictable layout for implicitly created grid tracks.
Example 1: Setting a Single Auto Column Size
.grid-container {
display: grid;
grid-template-columns: 200px 200px; /* Explicitly define two columns */
grid-auto-columns: 150px; /* Implicitly created columns will be 150px wide */
gap: 10px;
}
.item5 {
grid-column: 5; /* This item creates an implicit column */
}
Explanation: This code defines a grid with two explicit 200px columns. When .item5 is placed in the 5th column, which doesn't exist, an implicit column is created. The grid-auto-columns property ensures this new column has a width of 150px.
Example 2: Using minmax() for Responsive Auto Columns
.grid-container {
display: grid;
grid-auto-columns: minmax(100px, 1fr); /* Auto columns are flexible */
grid-auto-flow: column;
gap: 10px;
}
Explanation: Here, grid-auto-columns with minmax(100px, 1fr) makes implicitly created columns responsive. They will have a minimum width of 100px and can grow to take up an equal share of the available space, but no larger than the grid container.
Example 3: Multiple Auto Column Sizes
.grid-container {
display: grid;
grid-auto-columns: 100px 200px; /* Pattern for auto-created columns */
grid-auto-flow: column;
gap: 15px;
}
Explanation: This example sets a repeating pattern for auto-generated columns. The first implicit column will be 100px wide, the second 200px, the third 100px, and so on, creating a varied but consistent rhythm.
Example 4: Using fit-content() for Auto Columns
.grid-container {
display: grid;
grid-auto-columns: fit-content(300px); /* Size based on content, up to 300px */
grid-auto-flow: column;
gap: 10px;
}
Explanation: The fit-content(300px) value sizes the auto column based on its content's width. The column will shrink to fit the content but will not exceed 300px, preventing oversized items from breaking the layout.
Example 5: Combining with Explicit Grid
.grid-container {
display: grid;
grid-template-columns: repeat(2, 1fr); /* Two explicit flexible columns */
grid-auto-columns: 120px; /* Implicit columns are fixed at 120px */
gap: 10px;
}
.item4 {
grid-column: 4; /* Places item in an implicit column */
}
Explanation: This demonstrates how grid-auto-columns works alongside an explicit grid. The first two columns are flexible, while any columns created automatically to place items like .item4 will have a fixed width of 120px.
Example 6: Using Different Units
.grid-container {
display: grid;
grid-template-columns: 1fr; /* One explicit column */
grid-auto-columns: 20rem; /* Auto columns use rem units */
grid-auto-flow: column;
gap: 10px;
}
Explanation: This example uses rem units for the grid-auto-columns. This makes the width of implicitly created columns relative to the root font size, which is great for accessibility and scalability.
Example 7: Auto Columns with auto Keyword
.grid-container {
display: grid;
grid-auto-columns: auto; /* Auto columns size based on the largest item */
grid-auto-flow: column;
gap: 10px;
}
Explanation: Using the auto keyword for grid-auto-columns tells the browser to size the column based on the widest item within it. This ensures that content is never clipped within implicitly created columns.