The grid-auto-columns property sets the column sizes in a grid.
The value represents the minimum width of a grid item.
Options include a length value, or auto, min-content, minmax, etc.
A grid container with grid-auto-columns set to 100px.
All items are 100px wide.
<style>
.grid-container {
background-color: steelblue;
padding: 10px;
display: grid;
grid-gap: 10px;
grid-template-areas: 'a a a a';
grid-auto-columns: 100px;
}
.grid-container > div {
background-color: aliceblue;
padding: 15px 5px;
text-align: center;
font-size: 18px;
}
</style>
<div class="grid-container">
<div>1</div>
<div>2</div>
<div>3</div>
<div>4</div>
<div>5</div>
<div>6</div>
<div>7</div>
<div>8</div>
<div>9</div>
<div>10</div>
<div>11</div>
</div>
grid-auto-columns: auto | min-content | max-content |
minmax() | length | %;
| Value | Description |
|---|---|
| auto | Default. Columns size is determined by the size of the container |
| min-content | Sets column size depending on the smallest item in the column |
| max-content | Sets column size depending on the largest item in the column |
| minmax(min.max) | Sets column size range between min and max |
| length | Sets column size to a positive length value. |
| % | Sets column size to a percentage relative to the container size. |
Click the buttons to see different grid-auto-columns values.
<style>
.grid-container-example {
background-color: steelblue;
padding: 10px;
display: grid;
grid-gap: 10px;
grid-template-areas: 'a a a a';
grid-auto-columns: auto;
}
.grid-container-example > div {
background-color: aliceblue;
padding: 15px;
text-align: center;
font-size: 18px;
}
</style>
<div class="grid-container-example">
<div>1</div>
<div>2</div>
<div>3</div>
<div>4</div>
<div>5</div>
<div>6</div>
<div>7</div>
<div>8</div>
<div>9</div>
<div>10</div>
<div>11</div>
</div>
This table shows when grid-auto-columns support started for each browser.
 Chrome
|
57 | Mar 2017 |
 Firefox
|
52 | Mar 2017 |
 IE/Edge
|
16 | Sep 2017 |
 Opera
|
44 | Mar 2017 |
 Safari
|
10 | Sep 2016 |
