CSS grid-auto-columns Property

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.

Example

#

A grid container with grid-auto-columns set to 100px.
All items are 100px wide.

1
2
3
4
5
6
7
8
9
10
11
<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>  

Syntax

grid-auto-columns: auto | min-content | max-content | 
                   minmax() | length | %;

Values

#

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.

More Examples

Click the buttons to see different grid-auto-columns values.

1
2
3
4
5
6
7
8
9
10
11
<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>

Browser support

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

You may also like

Guides