Flexbox Layout
Flexbox aur gap se responsive row of cards banao jo zarurat par wrap ho sake.
Working code
<div class="cards">
<article>HTML</article>
<article>CSS</article>
<article>JavaScript</article>
</div>
<style>
.cards {
display: flex;
flex-wrap: wrap;
gap: 16px;
}
.cards article {
flex: 1 1 180px;
padding: 20px;
background: white;
border: 1px solid #ccd8e5;
border-radius: 10px;
}
</style>Preview
HTML
CSS
JavaScript
How it works
display: flex children ko flex items banata hai.
flex-wrap: wrap narrow space me items ko next line par bhej sakta hai; gap consistent spacing deta hai.
Try Yourself
<div class="cards">
<article>HTML</article>
<article>CSS</article>
<article>JavaScript</article>
</div>
<style>
.cards {
display: flex;
flex-wrap: wrap;
gap: 24px;
}
.cards article {
flex: 1 1 220px;
padding: 24px;
border: 1px solid #aaa;
}
</style>