CSS propertyGrid
grid-auto-columns
Sets the width of the columns the grid creates automatically.
- Initial value
auto- Inherited
- No
- Animatable
- yes, as a length, percentage, or fr
- Applies to
- grid containers
- JavaScript
element.style.gridAutoColumns = "120px"
Example
#CSS
.carousel {
display: grid;
grid-auto-flow: column;
grid-auto-columns: 140px;
gap: 10px;
overflow-x: auto;
}Example HTML
<div class="carousel stage">
<div class="box">Module 1</div><div class="box">Module 2</div><div class="box">Module 3</div>
<div class="box">Module 4</div><div class="box">Module 5</div>
</div>Preview
Definition and usage
#The grid-auto-columns property applies to implicit columns, the ones not listed in grid-template-columns but created when an item lands outside the defined grid, or when grid-auto-flow is set to column.
By default, implicit columns have the width auto, meaning sized to their content. Giving a fixed value, like 120px, gets you equal columns in a horizontal scrolling strip.
You can give several values, and they then repeat cyclically for the next implicit columns.
Syntax
#Syntax
grid-auto-columns: <track-size>+;Values
#Values in practice
#auto
Columns sized to their content and stretched to fill the available space.
.demo { grid-auto-columns: auto; }70px
Every automatic column is 70px.
.demo { grid-auto-columns: 70px; }1fr
The automatic columns split the space evenly.
.demo { grid-auto-columns: 1fr; }40px 80px
The widths alternate.
.demo { grid-auto-columns: 40px 80px; }Browser support
#Widely available
Works in all modern browsers, phones included. You can use it without worry.
- Chrome
- Edge
- Firefox
- Safari
Good practices
#- Combining
grid-auto-flow: columnandgrid-auto-columnsis a convenient way to build a horizontal strip of cards. - Columns defined in
grid-template-columnsaren’t affected by this property.
Related entries
#Spotted a mistake or missing an example? Write to us.