1 <!DOCTYPE html>
2 <html lang="en">
3 <head>
4 <meta charset="UTF-8">
5 <meta name="viewport" content="width=device-width, initial-scale=1.0">
6 <meta http-equiv="X-UA-Compatible" content="ie=edge">
7 <title>Document</title>
8 <link rel="stylesheet" type="text/css" href="three.css">
9 </head>
10 </body>
11 </html>
12 <div class="box" id="one">One</div>
13 <div class="box" id="two">Two</div>
14 <div class="box" id="three">Three</div>
15 <div class="box" id="four">Four</div>
16 <div class="box" id="five">five</div>
17 <div class="box" id="six">six</div>
18
19 </div >
.box {
display: inline-block;
width: 100px;
height: 100px;
color: white;
background:greenyellow;
color: rgb(16, 7, 29);
}
#one {
position:relative;
top: 20px;
left: 20px;
background:red;
}
#two {
position:relative;
top: 20px;
left: 20px;
background: blue;
}
#tree {
position:relative;
top: 20px;
left: 20px;
background:orange;
}
#four {
position:relative;
top: 20px;
left: 20px;
background:purple;
}
#five {
position:relative;
top: 20px;
left: 20px;
background:rgb(25, 5, 71);
}
#six {
position:relative;
top: 20px;
left: 20px;
background: pink;
}
.wrapper{
display:grid;
text-align: center;
grid-template-columns: 200px 50px 100px;
grid-auto-rows: 100px 30px ;
}
.iteml{
grid-column-start: 1;
grid-column-end: 3;
}
.item3{
grid-column-start: 2;
grid-column-end: 4;
}
.item4{
grid-column-start: 2;
grid-column-end: 4;
}
