CSS Grid Items

Grid items are the child elements in a grid container.

By default, a container has one grid item for each grid cell.

The number of cells a grid item occupies can be controlled with CSS.

Example

#

A grid container with 15 grid items. Item 1 spans four columns.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
<style>
  .griditems-child {
    background-color: steelblue;
    padding: 10px;
    display: grid;
    grid-gap: 10px;
    grid-template-columns: auto auto auto auto auto auto;
  }

  .griditems-child > div {
    background-color: aliceblue;
    padding: 10px 0;
    text-align: center;
    font-size: 18px;
  }
</style>

<div class="griditems-child">
  <div style="background-color:salmon;
              color: white;
              grid-column: 1 / 5">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>12</div>
  <div>13</div>
  <div>14</div>
  <div>15</div>
</div>


For details on the grid, see our CSS grid Property Reference.

The grid-column property

The grid-column property sets which columns an item occupies.

The coverage can be defined with a starting and ending grid line.

Or it can be defined with a span value.

Grid item 1 starts at column 1 and ends before column 3.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
<style>
  .griditems-column {
    background-color: steelblue;
    padding: 10px;
    display: grid;
    grid-gap: 10px;
    grid-template-columns: auto auto auto auto auto auto;
  }

  .griditems-column > div {
    background-color: aliceblue;
    padding: 10px 0;
    text-align: center;
    font-size: 18px;
  }
</style>

<div class="griditems-column">
  <div style="background-color: salmon;
              color: white;
              grid-column: 1 / 3;">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>12</div>
  <div>13</div>
  <div>14</div>
  <div>15</div>
</div>

Item 1 starts at row 1 and spans 3 columns.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
<style>
  .griditems-columnspan {
    background-color: steelblue;
    padding: 10px;
    display: grid;
    grid-gap: 10px;
    grid-template-columns: auto auto auto auto auto auto;
  }

  .griditems-columnspan > div {
    background-color: aliceblue;
    padding: 10px 0;
    text-align: center;
    font-size: 18px;
  }
</style>

<div class="griditems-columnspan">
  <div style="background-color: salmon;
              color: white;
              grid-column: 1 / span 3; ">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>12</div>
  <div>13</div>
  <div>14</div>
  <div>15</div>
  <div>16</div>
</div>

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


The grid-row property

The grid-row property sets which rows an item occupies.

The coverage can be defined with a starting and ending row.

Or it can be defined with a span value.

Grid item 2 starts at grid row 1 and ends before column 4.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
<style>
  .griditems-row {
    background-color: steelblue;
    padding: 10px;
    display: grid;
    grid-gap: 10px;
    grid-template-columns: auto auto auto auto auto auto;
  }

  .griditems-row > div {
    background-color: aliceblue;
    padding: 10px 0;
    text-align: center;
    font-size: 18px;
  }
</style>

<div class="griditems-row">
  <div style="background-color: salmon;
              color: white;
              grid-row: 1 / 4;">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>12</div>
  <div>13</div>
  <div>14</div>
  <div>15</div>
  <div>16</div>
</div>

Grid item 1 starts at row 1 and spans 2 rows.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
<style>
  .griditems-rowspan {
    background-color: steelblue;
    padding: 10px;
    display: grid;
    grid-gap: 10px;
    grid-template-columns: auto auto auto auto auto auto;
  }

  .griditems-rowspan > div {
    background-color: aliceblue;
    padding: 10px 0;
    text-align: center;
    font-size: 18px;
  }
</style>

<div class="griditems-rowspan">
  <div style="background-color: salmon;
              color: white;
              grid-row: 1 / span 2;">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>12</div>
  <div>13</div>
  <div>14</div>
  <div>15</div>
  <div>16</div>
  <div>17</div>
</div>

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


The grid-area property

The grid-area property defines an area of rows and columns.

This property is a shorthand for:

These values specify the start and end rows and columns.

Item 8 starts at row/column 1/2 and ends before 5/6.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
<style>
  .griditems-area {
    background-color: steelblue;
    padding: 10px;
    display: grid;
    grid-gap: 10px;
    grid-template-columns: auto auto auto auto auto auto;
  }

  .griditems-area > div {
    background-color: aliceblue;
    padding: 10px 0;
    text-align: center;
    font-size: 18px;
  }
</style>

<div class="griditems-area">
  <div>1</div>
  <div>2</div>
  <div>3</div>
  <div>4</div>
  <div>5</div>
  <div>6</div>
  <div>7</div>
  <div style="background-color:salmon;
              color: white;
              grid-area: 1 / 2 / 5 / 6;">8</div>
  <div>9</div>
  <div>10</div>
  <div>11</div>
  <div>12</div>
  <div>13</div>
  <div>14</div>
  <div>15</div>
</div>


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


Grid Item Names

The grid-template-areas property creates named grid areas.

Grid items can refer to these names with the grid-area property.

Item 1 refers to the areas template to obtain the area definition (5 columns).

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

  .grid-container > div {
    background-color: aliceblue;
    padding: 10px 0;
    text-align: center;
    font-size: 18px;
  }
</style>

<div class="grid-container">
  <div style="background-color:salmon;
              color: white;
              grid-area: area1">1</div>
  <div>2</div>
  <div>3</div>
  <div>4</div>
  <div>5</div>
  <div>6</div>
</div>

A grid layout with named areas ready for use.

Header
Menu
Main
Right
Footer
<style>
  .griditems-example {
    background-color: steelblue;
    padding: 10px;
    display: grid;
    grid-gap: 10px;
    grid-template-areas:
      'header header header header header header'
      'menu main main main right right'
      'menu footer footer footer footer footer';
  }

  .griditems-example > div {
    background-color: aliceblue;
    padding: 20px 0;
    text-align: center;
    font-size: 18px;
  }
</style>

<div class="griditems-example">
  <div style="grid-area: header">Header</div>
  <div style="grid-area: menu">Menu</div>
  <div style="grid-area: main">Main</div>
  <div style="grid-area: right">Right</div>
  <div style="grid-area: footer">Footer</div>
</div>

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