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.
A grid container with 15 grid items. Item 1 spans four columns.
<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 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.
<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.
<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 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.
<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.
<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 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.
<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.
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).
<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.
<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>
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. |
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 |
