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.
A grid container with 7 grid items.
<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 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.
<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 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.
<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 horizontally align the grid items.
This property accepts any of these values:
space-evenlyspace-aroundspace-betweencenterstartendA grid container with justify-content set to end.
<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 vertically aligns the grid items inside the container.
This property accepts any of these values:
space-evenlyspace-aroundspace-betweencenterstartendA grid container with align-content set to center.
<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.
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 |
