CSS Grid Layout
CSS Grid se equal responsive columns me cards arrange karo.
Working code
<div class="grid">
<article>HTML</article>
<article>CSS</article>
<article>JavaScript</article>
<article>Python</article>
</div>
<style>
.grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
gap: 16px;
}
.grid article {
padding: 20px;
background: white;
border: 1px solid #ccd8e5;
border-radius: 10px;
}
</style>Preview
HTML
CSS
JavaScript
Python
How it works
display: grid grid layout enable karta hai.
repeat(auto-fit, minmax(...)) available width ke according responsive columns create karta hai aur gap tracks ke beech spacing deta hai.
Try Yourself
<div class="grid">
<article>HTML</article>
<article>CSS</article>
<article>JavaScript</article>
<article>Python</article>
</div>
<style>
.grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
gap: 20px;
}
.grid article {
padding: 24px;
border: 1px solid #aaa;
}
</style>