How can I create equal spacing between two columns of blocks?
Please help me with the following code:
<div class="row">
<div class="col-md-6">
<img src="./img/02.jpg" class="img-fluid" alt="Image">
</div>
<div class="col-md-6">
<div class="row">
<div class="col-md-6">
<div class="square-container bg-primary"></div>
</div>
<div class="col-md-6">
<div class="square-container bg-secondary"></div>
</div>
<div class="col-md-6">
<div class="square-container bg-success"></div>
</div>
<div class="col-md-6">
<div class="square-container bg-danger"></div>
</div>
</div>
</div>
</div>
Here is the CSS that I am using:
body {
font-family: 'Exo 2', sans-serif;
width: 100%;
height: 100%;
background-size: cover;
}
p {
font-family: Verdana, Geneva, Tahoma, sans-serif;
}
.square-container {
width: 220px;
height: 235px;
}
.grid-gap {
display: grid;
grid-gap: 1em;
}
I attempted to utilize grid for spacing but all the squares ended up in one column. Can you please advise on how to achieve equal spacing between the columns?