grid-auto-columns
Summary
Changes default size of columns. Creates implicit grid tracks when a grid item is placed into a row or column that is not explicitly sized (by grid-template-rows or grid-template-columns). This property (with grid-auto-rows) specifies the default size of such implicitly-created tracks.
Overview table
- Initial value
auto- Applies to
- Grid containers
- Inherited
- No
- Media
- visual
- Computed value
- As specified
- Animatable
- No
- Percentages
- As specified
Syntax
grid-auto-columns: <track-size>
Values
- <track-size>
- A space-separated track list specifying the line names and track sizing functions of the grid. See track sizing in specification for details.
Examples
/*
Grid item B is positioned in column 5. This automatically generates four implicit columns (1-4) and one implicit row (2).
The implicit (auto) columns and rows are sized at 20px
using grid-auto-columns and grid-column-rows.
*/
<style type="text/css">
#grid {
display: grid;
grid-auto-columns: 20px;
grid-auto-rows: 20px }
#A { grid-column: 1; grid-row: 1; }
#B { grid-column: 5; grid-row: 1 / span 2; }
#C { grid-column: 1 / span 2; grid-row: 2; }
</style>
Related specifications
- W3C Grid Layout Module
- W3C Working Draft