Grid is a layout system that uses a grid with rows and columns.
A grid-template
defines rows, columns, and areas in a grid layout.
It's a shorthand for 3 properties that define rows, columns, and areas.
Item 2 is defined as a grid area spanning 2 rows and 3 columns.
<style>
.grid-container {
background-color: steelblue;
padding: 10px;
display: grid;
grid-gap: 10px;
grid-template:
'. area2 area2 . . .'
'. area2 area2 . . .'
'. area2 area2 . . .';
}
.grid-container > div {
background-color: aliceblue;
text-align: center;
padding: 15px 5px;
font-size: 18px;
}
</style>
<div class="grid-container">
<div>1</div>
<div style="grid-area: area2;
color: white;
background-color: salmon;">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>
A grid is like a table but with responsive layouts and easier CSS styling.
The grid-template
property is a shorthand for:
grid-template: none | grid-template-rows / grid-template-columns | grid-template-areas | initial | inherit;
Value | Description |
---|---|
none |
Default. Rows and columns are not positioned or resized. |
grid-template-rows | Sets the rows positioning and sizes |
grid-template-columns | Sets the columns positioning and sizes |
grid-template-areas | Defines area positioning and sizes |
initial |
Sets the value to its default value. |
inherit |
Inherits the value from its parent element. |
A grid-template
that defines 5 named areas.
<style>
.grid-template {
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';
}
.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>
A calculator grid layout.
Item 0 is defined as a grid area with 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-template
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 |