<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
* {
padding: 0;
margin: 0;
box-sizing: border-box;
}
#wrap {
display: grid;
grid-template-columns: repeat(6, auto);
grid-template-rows: repeat(6, auto);
}
#div1 {
background-color: green;
grid-column: 1/7;
}
#div2 {
background-color: red;
}
#div3 {
background-color: blue;
grid-column: 2/7;
grid-row: 2/4;
}
#div0 {
background-color: bisque;
grid-row: 3/5;
/* grid-row: 6; */
}
#div02 {
grid-column: 2/7;
/* grid-row: 6; */
background-color: aquamarine;
}
#div4 {
background-color: purple;
grid-column: 1/7;
}
</style>
</head>
<body>
<div id="wrap">
<div id="div1">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et
dolore magna aliqua. Non quam lacus suspendisse faucibus interdum posuere lorem. Mauris vitae ultricies
leo integer. Blandit cursus risus at ultrices mi tempus imperdiet nulla malesuada. Et magnis dis
parturient montes nascetur ridiculus mus. In nisl nisi scelerisque eu ultrices vitae auctor. Etiam non
quam lacus suspendisse faucibus interdum posuere lorem. At urna condimentum mattis pellentesque</p>
</div>
<div id="div2">
<p>red aliqua. Noterdum posuere lorem. Mauri</p>
</div>
<div id="div3">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut
labore et
dolore magna aliqua. Non quam lacus suspendisse faucibus interdum posuere lorem. Mauris vitae ultricies leo
integer. Blandit cursus risus at ultrices mi tempus imperdiet nulla malesuada. Et magnis dis parturient
montes nascetur ridiculus mus. In nisl nisi scelerisque eu ultrices vitae auctor. Etiam non quam lacus
suspendisse faucibus interdum posuere lorem. At urna condimentum mattis pellentesque
</div>
<!-- <div id="div0">
white
</div>
<div id="div02">
ss
</div> -->
<div id="div4">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et
dolore magna aliqua. Non quam lacus suspendisse faucibus interdum posuere lorem. Mauris vitae ultricies
leo integer. Blandit cursus risus at ultrices mi tempus imperdiet nulla malesuada. Et magnis dis
parturient montes nascetur ridiculus mus. In nisl nisi scelerisque eu ultrices vitae auctor. Etiam non
quam lacus suspendisse faucibus interdum posuere lorem. At urna condimentum mattis pellentesque</p>
</div>
</div>
</div>
</body>
</html>
