CSS Grid Layout
Last Updated: November 2025
CSS Grid is a two-dimensional layout system for creating rows and columns easily.
It is perfect for complex layouts like dashboards, galleries, or web pages with multiple sections.
🗣 Hinglish Tip: Flexbox ek direction (row/column) me layout karta hai, jabki Grid dono (row + column) me control deta hai.
To use Grid, set the parent container's display to grid.
.container {
display: grid;
}
All its direct children become grid items.
<div class="container">
<div class="item">1</div>
<div class="item">2</div>
<div class="item">3</div>
<div class="item">4</div>
</div>
Grid Container Properties
These control the layout of the grid.
Example: Basic Grid Layout
.container {
display: grid;
grid-template-columns: 1fr 1fr 1fr;
grid-template-rows: 100px 200px;
gap: 10px;
}
.item {
background-color: lightcoral;
padding: 20px;
font-size: 20px;
text-align: center;
}
🗣 Hinglish Tip: fr ka matlab hota hai “fraction” — available space ka proportion.
Grid Item Properties
These properties control how individual grid items behave inside the grid.
Example: Grid Item Properties
.container {
display: grid;
grid-template-columns: repeat(3, 1fr);
grid-template-rows: 100px 100px;
gap: 10px;
}
.item1 {
background-color: lightgreen;
grid-column: 1 / 3;
}
.item2 {
background-color: lightblue;
grid-row: 1 / 3;
}
.item3 {
background-color: lightcoral;
justify-self: center;
}
🗣 Hinglish Tip: Grid me har cell ek coordinate system hota hai — column aur row numbers se items ko place karte hain.
💡 Shorthand Properties
Hinglish Tip: grid-template-areas se layout banana bahut visual aur readable hota hai — jaise table ke boxes.
