<div class="wrapper">
<div class="first-box">
<h2 class="heading">Box 1 </h2>
<div class="one">Item One</div>
<div class="two">Item Two</div>
<div class="three">Item Three</div>
</div>
<div class="second-box">
<h2>Box 2 </h2>
</div>
<div class="third-box">
<h2>Box 3 </h2>
</div>
<div class="fourth-box">
<h2>Box 4 </h2>
</div>
<div class="fifth-box">
<h2>Box 5 </h2>
</div>
<div class="sixth-box">
<h2>Box 6 </h2>
</div>
</div>
.wrapper{
background-color: gainsboro;
display:grid;
border: 1.5px black solid;
grid-template-columns: repeat(3, 1fr);
grid-auto-rows: 100px;
column-gap: 7px;
row-gap: 1.5em;
}
.first-box{
padding: 10px;
border: 1px black solid;
text-align: center;
background-color:seashell;
grid-column-start: 1;
grid-column-end: 4;
grid-row-start: 1;
grid-row-end: 3;
display:grid;
grid-template-columns: repeat(3, 1fr);
gap: 3px;
}
.first-box .heading{
grid-column-start: 1;
grid-column-end: 4;
}
.first-box .one{
border: 1px black solid;
padding: 5px;
background-color:ivory;
}
.first-box .two{
border: 1px black solid;
padding: 5px;
background-color:ivory;
}
.first-box .three{
border: 1px black solid;
padding: 5px;
background-color: ivory;
}
.second-box{
padding: 10px;
border: 1px black solid;
text-align: center;
background-color:beige;
grid-column-start: 1;
grid-row-start: 3;
grid-row-end: 5;
}
.third-box{
padding: 10px;
border: 1px black solid;
text-align: center;
background-color:oldlace;
}
.fourth-box{
padding: 10px;
border: 1px black solid;
text-align: center;
background-color: linen;
}
.fifth-box{
padding: 10px;
border: 1px black solid;
text-align: center;
background-color: lavenderblush;
}
.sixth-box{
padding: 10px;
border: 1px black solid;
text-align: center;
background-color: mistyrose;
}
This Pen doesn't use any external CSS resources.
This Pen doesn't use any external JavaScript resources.