The grid property defines a grid layout.
It specifies rows, columns, and areas by name and position.
This property is a shorthand for several grid settings.
A grid layout with 5 named grid areas.
<style>
.grid-template {
padding: 10px;
background-color: steelblue;
display: grid;
grid-gap: 10px;
grid: 'header header header header header header'
'menu main main main right right'
'menu footer footer footer footer footer';
}
.grid-template > div {
background-color: aliceblue;
text-align: center;
padding: 25px 5px;
font-size: 18px;
}
</style>
<div class="grid-template">
<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>
The grid property is a shorthand for these properties:
The grid property is a more powerful alternative to
grid-template and
grid-template-areas properties.
grid: none |
grid-template-rows / grid-template-columns |
grid-template-areas |
grid-template-rows / [grid-auto-flow] grid-auto-columns |
[grid-auto-flow] grid-auto-rows / grid-template-columns |
initial | inherit;
| Value | Description |
|---|---|
none |
Default. No sizing specified for rows and columns. |
|
grid-template-rows / grid-template-columns |
Sets row and column sizes. |
| grid-template-areas | Sets named grid areas. |
|
grid-template-rows / grid-auto-columns |
Sets rows heights and auto-sizes columns. |
|
grid-auto-rows / grid-template-columns |
Auto sizes rows and sets column heights. |
|
grid-template-rows / grid-auto-flow grid-auto-columns |
Sets rows heights, item placements, and auto-sizes columns. |
|
grid-auto-flow grid-auto-rows / grid-template-columns |
Sets item placements, auto-sizes rows and column heights. |
initial |
Sets the value to its default value. |
inherit |
Inherits the value from its parent element. |
A calculator grid layout.
Item 0 is grid area covering 2 rows and 2 columns.
<style>
.grid-container-example {
background-color: steelblue;
padding: 10px;
display: grid;
grid-gap: 10px;
grid: '. . . zero zero' '. . . zero zero';
}
.grid-container-example > div {
background-color: aliceblue;
text-align: center;
padding: 10px;
font-size: 24px;
}
</style>
<div class="grid-container-example">
<div style="grid-area: zero">0</div>
<div>7</div>
<div>8</div>
<div>9</div>
<div>4</div>
<div>5</div>
<div>6</div>
<div>1</div>
<div>2</div>
<div>3</div>
<div>.</div>
<div>=</div>
</div>
This table shows when grid 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 |
