{"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 That example creates a grid container with three columns defined by As said above, Here are some situations where that might come up.<\/p>\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 The first column is set to If we add the Now as you can see in the following image, the last column\u2019s size is set to Note that the tracks that don\u2019t have an explicit size are A grid that is defined by the 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 However, the implicit columns are sized automatically based on the space that\u2019s left. That\u2019s why Say we size those implicit grid columns to Now, no matter how many implicit columns get created, they will all have their size set to Another scenario where the So what we did there was set the last We can specify multiple column sizes for grid tracks using the Here, we move the last child of our grid out of the explicit columns and our grid creates implicit columns to hold that item as a result. This grid has two explicit columns ( The If we had one more implicit columns, what would be the size of that column?<\/p>\n\n\n\n It would be The This value can be any valid and non-negative CSS length, such as This is a non-negative value relative to the inner inline size of the grid container. If the size of the grid container depends on the size of its tracks, then the percentage must be treated the same as declaring One disadvantage of using a percentage value is that, if you add gaps between the tracks<\/a>, the size of the gaps will be added to the size of the tracks which may cause an overflow<\/a>. Use the This is a non-negative value expressed in For example, consider a grid container that\u2019s The second two columns are fractional, so they\u2019re going to take any remaining available space. And, in this case, the available space is whatever is leftover after the first column\u2019s fixed In this example, the remaining and available space is Aha! One fraction is The Take the following example:<\/p>\n\n\n\n There\u2019s two columns here: one that\u2019s In clearer terms: As long as there\u2019s more than The So, this is invalid since the But these are totally valid:<\/p>\n\n\n\n The Since Take a look at the result of these two track examples:<\/p>\n\n\n\n When all three columns are set to The Let\u2019s say the content is \u201cCSS is awesome.\u201d the In code, that looks like this:<\/p>\n\n\n\n \u2026which results in something like this:<\/p>\n\n\n\n The If we revisit our 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
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
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
Columns that are defined by
grid-template-areas<\/code> that have no explicit size set by
grid-template-columns<\/code><\/h4>\n\n\n
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
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
<\/figure>\n\n\n\n
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
150px<\/code>:<\/p>\n\n\n\n
150px<\/code> using
grid-auto-columns<\/code> property.<\/figcaption><\/figure>\n\n\n\n
auto<\/code>-sized.<\/p>\n\n\n
Implicit columns are created when there are more grid items than cells<\/h4>\n\n\n
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
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
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
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
250px<\/code>.<\/p>\n\n\n\n
Implicit columns are created when we position an item outside of the explicit grid<\/h4>\n\n\n
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
.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
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 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
auto<\/code><\/li>
Multiple track sizes<\/h4>\n\n\n
grid-auto-columns<\/code> property. In this case, the multiple track size works as a pattern and it gets repeated if necessary.<\/p>\n\n\n\n
.grid-container {\n display: grid;\n grid-template-columns: 150px 150px;\n grid-auto-columns: 50px 100px 200px;\n}\n\n.grid-item:last-child {\n grid-column: 8;\n}<\/code><\/pre>\n\n\n\n
150px 150px<\/code>) and since the last item wants to be in the eighth column (
grid-column: 8<\/code>), six implicit columns are automatically generated in the grid.<\/p>\n\n\n\n
grid-auto-columns<\/code> sets the first implicit column size to
50px<\/code>, the second to
100px<\/code> and third column to
200px<\/code>. Since we have more than three implicit columns, our grid repeats this pattern to size them.<\/p>\n\n\n\n
<\/figure>\n\n\n\n
\n Show me the answer! <\/summary>\n \n\n
150px<\/code>, but I bet you knew that without looking. 😀<\/p>\n\n\n<\/details>\n\n
Values<\/h3>\n\n\n
grid-auto-columns<\/code> values are almost the same as the values of the
grid-template-columns<\/code><\/a> property, except in
grid-auto-columns<\/code> you can\u2019t use the following values:<\/p>\n\n\n\n
none<\/code><\/li>
[linename]<\/code><\/li>
repeat()<\/code><\/li>
subgrid<\/code><\/li>
masonry<\/code><\/li><\/ul>\n\n\n\n
\/* Keyword values *\/\ngrid-auto-columns: auto;\ngrid-auto-columns: min-content;\ngrid-auto-columns: max-content;\n\n\/* single track-size values *\/\ngrid-auto-columns: 200px;\ngrid-auto-columns: 30vmin;\ngrid-auto-columns: 50%;\ngrid-auto-columns: 1.5fr;\ngrid-auto-columns: minmax(100px, 2fr);\ngrid-auto-columns: minmax(min-content, 1fr);\ngrid-auto-columns: fit-content(15rem);\n\n\/* multiple track-size values *\/\ngrid-auto-columns: 100px 1fr;\ngrid-auto-columns: 200px min-content 1fr;\ngrid-auto-columns: 100px 200px 50px 10%;\ngrid-auto-columns: minmax(100px, auto) auto max-content fit-content(200px);\n\n\/* Global values *\/\ngrid-auto-columns: inherit;\ngrid-auto-columns: initial; \/* same as `auto` *\/\ngrid-auto-columns: revert;\ngrid-auto-columns: revert-layer;\ngrid-auto-columns: unset;<\/code><\/pre>\n\n\n
<length><\/code><\/h4>\n\n\n
px<\/code>,
em<\/code> and
rem<\/code> , among others to specify the track size (i.e. width) of the column.<\/p>\n\n\n
<percentage><\/code><\/h4>\n\n\n
auto<\/code>.<\/p>\n\n\n\n
fr<\/code> unit<\/a> or
auto<\/code> keyword to size the tracks and prevent that from happening.<\/p>\n\n\n
<flex><\/code><\/h4>\n\n\n
fr<\/code> units<\/a> and it allows you to create flexible grid tracks by specifying the size of a track as a fraction of the available space<\/strong> in the grid container. That way, as the grid changes widths, so do the columns, making for a more responsive grid.<\/p>\n\n\n\n
900px<\/code> wide and it has three implicit columns. Let\u2019s say the width of the first (left) implicit column is fixed (i.e. it doesn\u2019t change) at
300px<\/code> while the second column takes up one fractional unit (
1fr<\/code>) and the third column weighs in at two fractional units (
2fr<\/code>):<\/p>\n\n\n\n
.grid-container {\n display: grid;\n width: 900px;\n grid-auto-columns: 300px 1fr 2fr;\n}<\/code><\/pre>\n\n\n\n
300px<\/code> width is taken into account. After that, the second two columns divvy up what\u2019s left according to how many fractions they get.<\/p>\n\n\n\n
600px<\/code> (i.e.
900px<\/code> minus
300px<\/code>). The second columns gets one fraction (
1fr<\/code>) of that space and the third column gets two fractions (
2fr<\/code>). Let\u2019s get math-y for a moment to figure out the width of one fraction of
600px<\/code>:<\/p>\n\n\n\n
1fr = ([Grid Container Width] - [Fixed Column Width]) \/ [Sum of the flex factors]\n1fr = (900px - 300px) \/ 3\n1fr = 600px \/ 3\n1fr = 200px<\/code><\/pre>\n\n\n\n
200px<\/code>. And since the second column is
1fr<\/code>, it must be
200px<\/code> as well. That leaves us with
400px<\/code> of available space (i.e.
900px<\/code> –
300px<\/code> –
200px<\/code>) which just so happens to be twice<\/em> the size of the second column. And twice the size of the second column is
2fr<\/code> (
1fr(2)<\/code>)!<\/p>\n\n\n
minmax(min, max)<\/code><\/h4>\n\n\n
minmax()<\/code> function accepts two arguments: a minimum length value and a maximum length value. And what that tells a grid container is that the
grid-auto-columns<\/code> can be no narrower<\/em> than the minimum value, but no wider<\/em> than the maximum value. Our Guide to CSS Functions has a more thorough, detailed explanation<\/a> of how the function works.<\/p>\n\n\n\n
grid-auto-columns: 200px minmax(100px, 400px);<\/code><\/pre>\n\n\n\n
200px<\/code> wide, and another that\u2019s expressed as
minmax(100px, 400px)<\/code>. Looks weird, right? But all that\u2019s saying is that the second column must<\/em> take up at least
100px<\/code> of space, but no more than two fractions of whatever the available space is after the first columns
200px<\/code> is taken into account.<\/p>\n\n\n\n
100px<\/code> of available space, then the second column can flex up to
400px<\/code> but has to stop there. Otherwise, the column is
100px<\/code> wide.<\/p>\n\n\n\n
min<\/code> and
max<\/code> arguments accept all the following values, except that the
min<\/code> value can\u2019t be a flex value (e.g.
1fr<\/code>):<\/p>\n\n\n\n
<length-percentage> | <flex> | min-content | max-content | auto<\/code><\/pre>\n\n\n\n
min<\/code> value is a flex value:<\/p>\n\n\n\n
grid-auto-columns: minmax(1fr, 500px) 3fr;<\/code><\/pre>\n\n\n\n
grid-auto-columns: minmax(auto, 1fr) 3fr;\ngrid-auto-columns: minmax(200%, 1fr) 1fr;<\/code><\/pre>\n\n\n
auto<\/code><\/h4>\n\n\n
auto<\/code> keyword behaves similarly to
minmax(min-content, max-content)<\/code> in most cases.<\/p>\n\n\n\n
auto<\/code> track sizes can be stretched by the
align-content<\/code><\/a> and
justify-content<\/code><\/a> properties they will take up any remaining space in the grid container by default (you know,
auto<\/code>-matically). That said,
auto<\/code> track sizes can\u2019t win a fight against
fr<\/code> units when allocating the remaining space \u2014 they adjust to the maximum size of their content.<\/p>\n\n\n\n
grid-auto-columns: auto auto auto;\ngrid-auto-columns: auto 1fr auto;<\/code><\/pre>\n\n\n\n
auto<\/code> (which we also could have written as
repeat(3, auto)<\/code> \u2014 but more on that later), all they do is share equal space. But when we drop a fractional unit in the middle as the second column, the
auto<\/code> columns are only as wide as the content inside them and the
1fr<\/code> column takes up the remaining space.<\/p>\n\n\n\n
<\/figure>\n\n\n
min-content<\/code><\/h4>\n\n\n
min-content<\/code> keyword represents the smallest<\/em> amount of space possible that an element can take in a grid container without overflowing its content. The content can be texts, images or videos.<\/p>\n\n\n\n
min-content<\/code> is the width of the world \u201cawesome\u201d because that is the widest part of the content (wider than \u201cCSS\u201d and \u201cis\u201d combined). If the column goes any narrower, then the text starts to overflow the container.<\/p>\n\n\n\n
.grid {\n display: grid;\n grid-auto-columns: min-content 1fr;\n gap: 1rem;\n}<\/code><\/pre>\n\n\n\n
<\/figure>\n\n\n
max-content<\/code><\/h4>\n\n\n
max-content<\/code> keyword represents the smallest size required<\/em> for an element to fit all of its content without being wrapped or overflowed. I know, a name that includes \u201cmax\u201dmakes it sound like we\u2019re dealing with a maximum size, so this value can be a bit of a brain teaser.<\/p>\n\n\n\n
min-content<\/code> example above, a grid track with a size value of
max-content<\/code> will grow until its content can fit into a single line. So, in the case of \u201cCSS is awesome\u201d the