html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>practise</title>
<link rel="stylesheet" href="p.css">
</head>
<body>
<div>
<div class="wrapper">
<div class="a1">1</div>
<div class="a2">2</div>
<div class="a3">3</div>
<div class="a4">4</div>
<div class="a5">5</div>
<div class="a6">6</div>
</div>
</body>
</html>
css
.wrapper {
display:grid;
grid-template-columns: 200px 100px 200px;
grid-template-rows: 200px 100px 100px 200px;
}
.a1{
background: red;
grid-area: 1/1/2/4;
}
.a2{
background: green;
grid-area: 2/1/5/2;
}
.a3{
background: blue;
grid-area: 2/2/3/3;
}
.a4{
background: black;
grid-area: 3/2/4/3;
color: white;
}
.a5{
background: yellow;
grid-area: 4/2/5/3;
}
.a6{
background: pink;
grid-area: 2/3/5/4;
}