<div class="wrapper">
<div class="first-box">
<h2> Box 1</h2>
</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{
display:grid;
background-color: darkgrey;
border-style: solid;
border-color: black;
border-width: 1.5px;
}
.first-box{
border: solid 1px black;
background-color: aqua;
padding: 10px;
text-align: center;
}
.second-box{
border: solid 1px black;
background-color: cyan;
padding: 10px;
text-align: center;
}
.third-box{
border: solid 1px black;
background-color: lightcyan;
padding: 10px;
text-align: center;
}
.fourth-box{
border: solid 1px black;
background-color: paleturquoise;
padding: 10px;
text-align: center;
}
.fifth-box{
border: solid 1px black;
background-color: aquamarine;
padding: 10px;
text-align: center;
}
.sixth-box{
border: solid 1px black;
background-color: turquoise;
padding: 10px;
text-align: center;
}
This Pen doesn't use any external CSS resources.
This Pen doesn't use any external JavaScript resources.