CSS grid-template-columns Property

Grid is a layout system that uses a grid with rows and columns.

The grid-template-columns property defines grid columns.

The value is a space-separated list with column widths.

Example

#

A grid container with 4 columns of different widths.

1
2
3
4
5
6
7
8
<style>
  .grid-container {
    background-color: steelblue;
    padding: 10px;
    display: grid;
    grid-gap: 10px;
    grid-template-columns: 50px 75px 100px auto;
  }

  .grid-container > div {
    background-color: aliceblue;
    text-align: center;
    padding: 15px;
    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> 

Syntax

grid-template-columns: none | auto | max-content | 
        min-content | length | initial | inherit;

Values

#

Value Description
none Default, creates columns if needed
auto Columns size is determined by the container size and on the size of the content of the items in the column
max-content Sets the column size depending on the largest column item
min-content Sets the column size depending on the smallest column item
length Sets the size of the columns, by using any CSS legal length value.
initial Sets the value to its default value.
inherit Inherits the value from its parent element.

More Examples

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

1
2
3
4
5
6
7
8
<style>
  .grid-template-columns-example {
    background-color: steelblue;
    padding: 10px;
    display: grid;
    grid-gap: 10px;
    grid-template-columns: none;
  }

  .grid-template-columns-example > div {
    background-color: aliceblue;
    text-align: center;
    padding: 15px;
    font-size: 20px;
  }
</style>

<div class="grid-template-columns-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> 

Browser support

This table shows when grid-template-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