A grid area is an area that covers multiple grid cells.
The grid-area property defines the boundaries for the area.
It is specified as start-row / start-column / end-row / end-column.
Item 8 has a grid-area value of 1 / 2 / 5 / 6.
The area starts at row 1, column 2, and ends before row 5, column 6.
<style>
.grid-container {
background-color: steelblue;
padding: 10px;
display: grid;
grid-gap: 10px;
grid-template-columns: auto auto auto auto auto auto;
}
.grid-container > div {
background-color: aliceblue;
padding: 15px 5px;
text-align: center;
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 style="grid-area: 1 / 2 / 5 / 6;
color: white;
background-color: salmon;">8</div>
<div>9</div>
<div>10</div>
<div>11</div>
<div>12</div>
<div>13</div>
<div>14</div>
<div>15</div>
</div>
The grid-area is a shorthand property for:
grid-area: grid-row-start / grid-column-start /
grid-row-end / grid-column-end |
itemname;
| Value | Description |
|---|---|
| grid-row-start | Row to start displaying the item. |
| grid-column-start | Column to start displaying the item. |
| grid-row-end | Row-line to stop displaying the item, or how many rows to span. |
| grid-column-end | Column-line to stop displaying the item, or how many columns to span. |
itemname |
Grid item name |
This table shows when grid-area 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 |
