<section class='container'>
<div class=''></div>
<div class=''></div>
<div class=''></div>
<div class=''></div>
</section>
<section class='grid-container'>
<div class=''></div>
<div class=''></div>
<div class=''></div>
<div class=''></div>
</section>
div {
background-color: green;
height: 100px;
width: 100px;
border: 1px solid black
}
/* Flexbox */
.container {
display: flex;
justify-content: center;
align-items: center;
gap: 10px;
margin-bottom: 10px;
}
/* CSS Grid */
.grid-container {
display: grid;
grid-template-columns: repeat(4, 0.1fr);
gap: 1px;
}
This Pen doesn't use any external CSS resources.
This Pen doesn't use any external JavaScript resources.