I currently have 9 different div containers, each with unique styling for spacing and padding. My goal is to arrange these div cards into 2 rows with sufficient spacing between them for easy readability. As of now, I have all the div containers stacked in a single row, creating inconsistent spacing. Below, I will outline my logic with both CSS and HTML code.
// css code
.cards-container {
display: flex;
flex-wrap: wrap;
justify-content: center;
}
.card {
width: 100px;
height: 100px;
}
.card img {
max-width: 60px;
max-height: 60px;
}
.card h3 {
font-size: 16px;
margin-top: 10px;
}
.card-container > .card {
width: 120px;
height: 120px;
}
.card-body {
display: flex;
flex-direction: row;
align-items: center;
height: 50px;
padding: 10px;
}
.icon {
font-size: 24px;
margin-right: 5px;
}
h3 {
margin: 0;
font-size: 14px;
}
// bootstrap html code
<!-- Shop by Categories starts here -->
<div id="hot">
<div class="box py-4">
<div class="container">
<div class="row">
<div class="col-md-9">
<h2 class="mb-0">
Shop by Categories
</h2>
<!-- Health and Beauty icon -->
<a href="category-full.html">
<div class="cards-container d-flex justify-content-between">
<div class="card-container">
<div class="card">
<div class="card-body">
<div class="row flex-wrap">
<div class="col-12">
<img src="img/eShop-Images/NewBeauty.png.png">
<h3>Health and Beauty</h3>
</div>
</div>
</div>
</div>
</div>
</div>
</a>
<!--Clothing & Accessories icon-->
<a href="category-full.html">
<div class="card-container">
<div class="card">
<div class="card-body">
<div class="row flex-wrap">
<div class="col-12">
<img src="img/eShop-Images/clothes_accessories.png.png">
<h3>Clothing & Accessories</h3>
</div>
</div>
</div>
</div>
</div>
</a>
...
<!--Office equipment -->
<a href="category.html">
<div class="card-container">
<div class="card">
<div class="card-body">
<div class="row flex-wrap">
<div class="col-12">
<img src="img/eShop-Images/office_equipment.png.png">
<h3>Office equipment</h3>
</div>
</div>
</div>
</div>
</div>
</a>
</div>
</div>
</div>
</div>