<!DOCTYPE html>
<html lang=”en”>
<head>
<metacharset=”UTF-8″>
<metaname=”viewport”content=”width=device-width, initial-scale=1.0″>
<title>CSS grid</title>
<style>
.container{display:grid;
grid-template-rows:100px100px100px100px100px100px ;
grid-template-columns:100px100px100px100px100px100px ;
}
.item-1{background-color: aquamarine;
grid-column: 1/7; }
.item-2{background-color: rgb(48, 94, 34);
grid-row:2/6;
grid-column:1/2;
}
.item-3{background-color: brown;
grid-row:2/6;
grid-column:2/6;
}
.item-4{
background-color: blue;
grid-row:6/7;
grid-column:7/-7;
}
.item-5{
grid-row:2/6;
grid-column:7/6;
background-color: yellow;
}
</style>
</head>
<body>
<divclass=”container”>
<divclass = “item-1”>1</div>
<divclass = “item-2”>2</div>
<divclass = “item-3”>3</div>
<divclass=”item-4″>4</div>
<divclass=”item-5″>5</div>
</div>
</body>
</html>
<!– row = y axis
ROWY
column x axis
cololumnx
-0->
Site Title 