My HTML setup:
<div class="holder">
<div class="box">
<div class="unit" data-type="html" data-desc="I am HTML">
<h2>HTML5</h2>
</div>
</div>
</div>
CSS code I'm using:
.holder {
padding: 0 15px;
max-width: 100%;
height: 100vh;
}
.box {
display: flex;
flex-wrap: wrap;
justify-content: space-between;
overflow: auto;
}
.unit {
width:180px;
height: 150px;
background-color: #222;
color: #fd5c8c;
margin-bottom: 20px;
border-radius: 5px;
cursor: pointer;
margin: 0;
display: flex;
flex-direction: column;
justify-content: flex-end;
padding: 10px;
border: 3px solid #0088CC;
box-shadow: 0 0 9px #88bef5;
}
I'm trying to remove the gaps between the cards and add more, but struggling with how to accomplish this while using Flex properties.