CSS Grid Container

A grid container defines a grid layout with rows and columns.

It contains grid items that are placed in this grid.

Create a container with display:grid or display:inline-grid.

Example

#

A grid container with 7 grid items.

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

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

The grid-template-columns property

The grid-template-columns property defines the number of grid columns.

This property can also set the column widths.

The value is space-separated list where each value is either auto or a column width.

A grid template with 3 fixed-width and 1 auto-width column.

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

  .gridcontainer-columns > div {
    background-color: aliceblue;
    text-align: center;
    padding: 15px 5px;
    font-size: 18px;
  }
</style>

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

For details on grid-template-columns, see our CSS grid-template-columns Property Reference.


The grid-template-rows property

The grid-template-rows property defines the number of grid rows.

This property can also set the row heights.

The value is space-separated list where each value is either auto or a row height.

A grid template with 2 fixed-height and 1 auto-height row.

1
2
3
4
5
6
7
8
9
<style>
  .gridcontainer-rows {
    background-color: steelblue;
    padding: 10px;
    display: grid;
    grid-gap: 10px;
    grid-template-columns: auto auto auto auto;
    grid-template-rows: 110px auto 150px;
  }

  .gridcontainer-rows > div {
    background-color: aliceblue;
    text-align: center;
    padding: 15px 5px;
    font-size: 18px;
  }
</style>

<div class="gridcontainer-rows">
  <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>

For details on grid-template-rows, see our CSS grid-template-rows Property Reference.


The justify-content property

The justify-content property horizontally align the grid items.

This property accepts any of these values:

  • space-evenly
  • space-around
  • space-between
  • center
  • start
  • end

A grid container with justify-content set to end.

1
2
3
4
5
6
<style>
  .gridcontainer-justify {
    background-color: steelblue;
    padding: 10px;
    display: grid;
    grid-gap: 10px;
    grid-template-columns: 100px 100px 100px;
    justify-content: end;
  }

  .gridcontainer-justify > div {
    background-color: aliceblue;
    text-align: center;
    padding: 15px 5px;
    font-size: 18px;
  }
</style>

<div class="gridcontainer-justify">
  <div>1</div>
  <div>2</div>
  <div>3</div>
  <div>4</div>
  <div>5</div>
  <div>6</div>
</div>

For details on justify-content, see our CSS justify-content Property Reference.


The align-content property

The align-content property vertically aligns the grid items inside the container.

This property accepts any of these values:

  • space-evenly
  • space-around
  • space-between
  • center
  • start
  • end

A grid container with align-content set to center.

1
2
3
4
5
6
7
8
<style>
  .gridcontainer-align {
    background-color: steelblue;
    padding: 10px;
    height: 250px;
    display: grid;
    grid-gap: 10px;
    grid-template-columns: auto auto auto auto;
    align-content: center;
  }

  .gridcontainer-align > div {
    background-color: aliceblue;
    text-align: center;
    padding: 15px 5px;
    font-size: 18px;
  }
</style>

<div class="gridcontainer-align">
  <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>

For details on align-content, see our CSS align-content Property Reference.


Grid Properties

A list of grid properties. Click the property for more details.

Property Description
grid A shorthand property for a grid container. Sets all grid properties in a single declaration.
grid-area A shorthand property for a grid item. Sets the item's size and location in a grid.
grid-auto-columns A grid container property that sets the size of a grid column.
grid-auto-flow A grid container property that sets how auto-placed items flow in the grid.
grid-auto-rows A grid container property that sets the size of a grid row.
grid-column A shorthand property for a grid item that sets the element's size and location within a column.
grid-column-end An item property that sets the element's end position within the grid column.
grid-column-gap A grid container property that sets the gap (gutter) between the columns.
grid-column-start An item property that sets the element's start position within the grid column.
grid-gap A grid container property that sets the gap (gutter) between the rows and columns.
grid-row An item property that sets the size and location within the row.
grid-row-end An item property that sets the element's end position within the grid row.
grid-row-gap A grid container property that sets the gap (gutter) between the rows.
grid-row-start An item property that sets the element's start position within the grid row.
grid-template A grid container property that is a shorthand for defining rows, columns, and areas.
grid-template-columns Defines the container line names and track sizing functions of the columns.
grid-template-rows Defines the container line names and track sizing functions of the rows.

Browser Support

This table shows when grid support started for each browser

Chrome
57.0 Jul 2014
Firefox
52.0 Oct 2012
IE/Edge
16.0 Oct 2013
Opera
44 Jul 2013
Safari
10 Sep 2015

You may also like

Guides