Thegrid-auto-columnsCSS property specifies the size of an implicitly-created grid columntrack or pattern of tracks.

Try it

grid-auto-columns: auto;

grid-auto-columns: 1fr;

grid-auto-columns: min-content;

grid-auto-columns: minmax(10px, auto);

<section>  <div>    <div>      <div>One</div>      <div>Two</div>      <div>Three</div>      <div>Four</div>      <div></div>    </div>  </div></section>

#example-element {  border: 1px solid #c5c5c5;  display: grid;  grid-auto-rows: 40px;  grid-gap: 10px;  width: 220px;}#example-element > div {  background-color: rgb(0 0 255 / 0.2);  border: 3px solid blue;}#example-element > div:nth-child(1) {  grid-column: 1 / 3;}#example-element > div:nth-child(2) {  grid-column: 2;}

If a grid item is positioned into a column that is not explicitly sized bygrid-template-columns, implicitgrid tracks are created to hold it. This can happen either by explicitly positioning into a column that is out of range, or by the auto-placement algorithm creating additional columns.

Syntax

/* Keyword values */grid-auto-columns: min-content;grid-auto-columns: max-content;grid-auto-columns: auto;/* <length> values */grid-auto-columns: 100px;grid-auto-columns: 20cm;grid-auto-columns: 50vmax;/* <percentage> values */grid-auto-columns: 10%;grid-auto-columns: 33.3%;/* <flex> values */grid-auto-columns: 0.5fr;grid-auto-columns: 3fr;/* minmax() values */grid-auto-columns: minmax(100px, auto);grid-auto-columns: minmax(max-content, 2fr);grid-auto-columns: minmax(20%, 80vmax);/* fit-content() values */grid-auto-columns: fit-content(400px);grid-auto-columns: fit-content(5cm);grid-auto-columns: fit-content(20%);/* multiple track-size values */grid-auto-columns: min-content max-content auto;grid-auto-columns: 100px 150px 390px;grid-auto-columns: 10% 33.3%;grid-auto-columns: 0.5fr 3fr 1fr;grid-auto-columns: minmax(100px, auto) minmax(max-content, 2fr)  minmax(20%, 80vmax);grid-auto-columns: 100px minmax(100px, auto) 10% 0.5fr fit-content(400px);/* Global values */grid-auto-columns: inherit;grid-auto-columns: initial;grid-auto-columns: revert;grid-auto-columns: revert-layer;grid-auto-columns: unset;

Values

<length>

Is a non-negative length.

<percentage>

Is a non-negative<percentage> value relative to the block size of the grid container. If the block size of the grid container is indefinite, the percentage value is treated likeauto.

<flex>

Is a non-negative dimension with the unitfr specifying the track's flex factor. Each<flex>-sized track takes a share of the remaining space in proportion to its flex factor.

When appearing outside aminmax() notation, it implies an automatic minimum (i.e.,minmax(auto, <flex>)).

max-content

Is a keyword representing the largest maximal content contribution of the grid items occupying the grid track.

min-content

Is a keyword representing the largest minimal content contribution of the grid items occupying the grid track.

minmax(min, max)

Is a functional notation that defines a size range greater than or equal tomin and less than or equal tomax. Ifmax is smaller thanmin, thenmax is ignored and the function is treated asmin. As a maximum, a<flex> value sets the track's flex factor. As a minimum, it is treated as zero (or minimal content, if the grid container is sized under a minimal content constraint).

fit-content( [ <length> | <percentage> ] )

Represents the formulamin(max-content, max(auto, argument)), which is calculated similar toauto (i.e.,minmax(auto, max-content)), except that the track size is clamped atargument if it is greater than theauto minimum.

auto

As a maximum represents the largestmax-content size of the items in that track.

As a minimum represents the largest minimum size of items in that track (specified by themin-width/min-height of the items). This is often, though not always, themin-content size.

If used outside ofminmax() notation,auto represents the range between the minimum and maximum described above. This behaves similarly tominmax(min-content,max-content) in most cases.

Note:auto track sizes (and onlyauto track sizes) can be stretched by thealign-content andjustify-content properties. Therefore by default, anauto sized track will take up any remaining space in the grid container.

Formal definition

Formal syntax

grid-auto-columns =
<track-size>+

<track-size> =
<track-breadth>|
minmax(<inflexible-breadth> ,<track-breadth>)|
fit-content(<length-percentage [0,∞]>)

<track-breadth> =
<length-percentage [0,∞]>|
<flex [0,∞]>|
min-content|
max-content|
auto

<inflexible-breadth> =
<length-percentage [0,∞]>|
min-content|
max-content|
auto

<length-percentage> =
<length>|
<percentage>

Examples

Setting grid column size

HTML

<div>  <div></div>  <div></div>  <div></div></div>

CSS

#grid {  height: 100px;  display: grid;  grid-template-areas: "a a";  gap: 10px;  grid-auto-columns: 200px;}#grid > div {  background-color: lime;}

Result

Specifications

Browser compatibility

See also

• grid-auto-rows
• grid-auto-flow
• grid
• Auto-placement in grid layout: sizing rows in the implicit grid
• Video:Introducing grid auto-placement and order