grid.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>grig</title>
<link rel="stylesheet" type="text/css" href="grid-test.css">
</head>
<body>
<div class="wrapper">
<div class="item1">1</div>
<div class="item2">2</div>
<div class="item3">3</div>
<div class="item4">4</div>
<div class="item5">5</div>
<div class="item6">6</div>
</div>
</body>
</html>
grid-test.css
.wrapper {
display: grid;
grid-template-columns: 200px 900px 200px;
grid-template-rows: 50px 150px 150px 150px;
}
.item1 {
grid-row-start: 1;
grid-row-end: 2;
grid-column-start: 1;
grid-column-end: 4;
background:Coral;
}
.item2 {
grid-row-start: 2;
grid-row-end: 5;
grid-column-start: 1;
grid-column-end: 2;
background-color: Bisque;
}
.item3 {
grid-row-start: 2;
grid-row-end: 3;
grid-column-start: 2;
grid-column-end: 3;
background-color:LightGoldenRodYellow;
}
.item4 {
grid-row-start: 3;
grid-row-end: 4;
grid-column-start: 2;
grid-column-end: 3;
background-color:DarkCyan;
}
.item5 {
grid-row-start: 4;
grid-row-end: 5;
grid-column-start: 2;
grid-column-end: 3;
background-color:CadetBlue;
}
.item6 {
grid-row-start: 2;
grid-row-end: 5;
grid-column-start: 3;
grid-column-end: 4;
background-color: Khaki ;
}