{"id":366713,"date":"2022-07-15T06:16:58","date_gmt":"2022-07-15T13:16:58","guid":{"rendered":"https:\/\/css-tricks.com\/?page_id=366713"},"modified":"2022-07-15T06:16:59","modified_gmt":"2022-07-15T13:16:59","slug":"grid-auto-columns","status":"publish","type":"page","link":"https:\/\/css-tricks.com\/almanac\/properties\/g\/grid-auto-columns\/","title":{"rendered":"grid-auto-columns"},"content":{"rendered":"\n

The grid-auto-columns<\/code> CSS property is part of the CSS Grid Layout specification<\/a>, specifying the size of the grid columns that were created without having an explicit size. In other words, this property sets the size of implicit columns<\/a> and any other columns that have not been explicitly sized in the grid-template-columns<\/code><\/a> property.<\/p>\n\n\n\n\n\n\n\n

.grid-container {\n  display: grid;\n  grid-template-areas: \"media detail detail\";\n  grid-template-columns: 200px 400px;\n  grid-auto-columns: 150px;\n}<\/code><\/pre>\n\n\n\n
That example creates a grid container with three columns defined by grid-template-areas<\/code>. The first two columns have an explicit size set by grid-template-columns<\/code>, but not the last column. This is where grid-auto-columns<\/code> kicks in and sets that column\u2019s size to 150px<\/code>.<\/p>\n\n\n
grid-auto-columns<\/code> use cases<\/h3>\n\n\n
As said above, grid-auto-columns<\/code> sets the size of any columns that don\u2019t have an explicit size. Now the question is, what kind of columns don\u2019t have an explicit size? Or, how does a grid create columns without an explicit size?<\/p>\n\n\n\n
Here are some situations where that might come up.<\/p>\n\n\n
Columns that are defined by grid-template-areas<\/code> that have no explicit size set by grid-template-columns<\/code><\/h4>\n\n\n
The first case is the one that we saw at the top of this article. A grid can have an explicit column defined by grid-template-areas<\/code> without having its size set explicitly by the grid-template-columns<\/code> property.<\/p>\n\n\n\n
.grid-container {\n  display: grid;\n  grid-template-areas: \"media detail detail\"; \/* 3 columns *\/\n  grid-template-columns: 200px 150px; \/* 2 sizes *\/\n}<\/code><\/pre>\n\n\n\n
The first column is set to 200px<\/code> and the second one has its size set to 150px<\/code>. And since the last column is not set to any explicit size, it will be set to auto<\/code> and take up the available space that\u2019s leftover from the other two columns.<\/p>\n\n\n\n
\"Three<\/figure>\n\n\n\n
If we add the grid-auto-columns<\/code> to the above example we can control the size of the last column too:<\/p>\n\n\n\n
.grid-container {\n  display: grid;\n  grid-template-areas: \"media detail detail\";\n  grid-template-columns: 200px 150px;\n  grid-auto-columns: 150px;\n}<\/code><\/pre>\n\n\n\n
Now as you can see in the following image, the last column\u2019s size is set to 150px<\/code>:<\/p>\n\n\n\n
\"\"
Three column tracks with the last column\u2019s size is set to 150px<\/code> using grid-auto-columns<\/code> property.<\/figcaption><\/figure>\n\n\n\n
Note that the tracks that don\u2019t have an explicit size are auto<\/code>-sized.<\/p>\n\n\n
Implicit columns are created when there are more grid items than cells<\/h4>\n\n\n
A grid that is defined by the grid-template-columns<\/code>, grid-template-rows<\/code> or\/and grid-template-areas<\/code> is called an explicit grid<\/strong>, meaning that all the grid tracks have a set size. Let\u2019s say, for example, we have 12 HTML child elements in a parent grid container, and we explicitly define three columns and four rows in the grid.<\/p>\n\n\n\n
.grid {\n  display: grid;\n  grid-template-rows: repeat(4, auto);\n  grid-template-columns: repeat(3, auto);\n}<\/code><\/pre>\n\n\n\n
We have implicit grid tracks for those columns and rows because there\u2019s no sizing information. Only the number of columns and the number of rows.<\/p>\n\n\n\n
One situation where you\u2019ll find implicit columns is when there are more grid items than there are defined columns. Imagine in our last example that we now have more than 12 HTML elements. We previously set up three columns and four rows, so there are exactly 12 cells in the grid \u2014 the perfect amount for our 12 elements. But with more than 12 elements, we suddenly have an overflow problem, right?<\/p>\n\n\n\n
Not at all! CSS Grid\u2019s auto-placement algorithm<\/a> creates additional rows or columns to hold the extra items. Those extra columns and rows are called implicit tracks<\/strong>.<\/p>\n\n\n\n
By default, the auto-placement algorithm creates row tracks to hold extra items. In the following example, we ask our grid to lay out the extra items in columns (not rows), so we need to set the auto-placement algorithm to column<\/code>. Awesome, now our grid is capable of holding everything, no matter how many items we toss at it.<\/p>\n\n\n\n
However, the implicit columns are sized automatically based on the space that\u2019s left. That\u2019s why grid-auto-columns<\/code> is so useful \u2014we can give all of those columns a size and CSS Grid will stop filling columns when it reaches the last element, even if the last column in the last row of the grid falls short of the grid\u2019s full width,<\/p>\n\n\n\n
Say we size those implicit grid columns to 250px<\/code>:<\/p>\n\n\n\n
.grid-container {\n  display: grid;\n  grid-template-columns: repeat(3, 150px);\n  grid-auto-flow: column; \/* Set the auto-placement algorithm to column *\/\n  grid-auto-columns: 250px;\n}<\/code><\/pre>\n\n\n\n
Now, no matter how many implicit columns get created, they will all have their size set to 250px<\/code>.<\/p>\n\n\n\n
\"Single
The explicit grid is marked with a solid line and the implicit one is marked using a dotted line.<\/figcaption><\/figure>\n\n\n
Implicit columns are created when we position an item outside of the explicit grid<\/h4>\n\n\n
Another scenario where the grid-auto-columns<\/code> property comes in handy is when implicit tracks are created when we position an item outside of the explicit grid. The implicit tracks are automatically created to make a place for that item.<\/p>\n\n\n\n
.grid-container {\n  display: grid;\n  grid-template-columns: 150px 150px 150px; \/* 3 explicit columns *\/\n  grid-auto-columns: 150px; \/* Size of the implicit columns *\/\n}\n\n.grid-item:last-child {\n  grid-column: 5; \/* Placed in 5th column in a 3-column grid *\/\n  grid-row: 3;\n}<\/code><\/pre>\n\n\n\n
So what we did there was set the last .grid-item<\/code> child in the fifth column\u2026 but there is no fifth column in our three-column grid! That puts the last grid item outside the explicit grid, which creates two implicit column tracks. Even though those columns were created for us, we can set them to 150px<\/code> using the grid-auto-columns<\/code> property.<\/p>\n\n\n\n
\"Five
Positioning the last child into the fifth column of a three-column explicit grid causes two implicit column tracks. We set those columns size to 150px<\/code> using the grid-auto-columns<\/code> property.<\/figcaption><\/figure>\n\n\n
Syntax<\/h3>\n\n\n
grid-auto-columns: <track-size>+<\/code><\/pre>\n\n\n\n
\n  \n          Full Definition      <\/summary>\n  \n\n
where\n<track-size> = <track-breadth> | minmax( <inflexible-breadth> , <track-breadth> ) | fit-content( [ <length> | <percentage> ] )\n\nwhere\n<track-breadth> = <length-percentage> | <flex> | min-content | max-content | auto <inflexible-breadth> = <length> | <percentage> | min-content | max-content | auto\n\nwhere\n<length-percentage> = <length> | <percentage><\/code><\/pre>\n\n\n<\/details>\n\n\n