CSS Grid सीखना अब हुआ बेहद आसान। इस guide में जानिए कैसे CSS Grid का use करके complex और responsive web layouts को बिना किसी hassle के design किया जाता है।
CSS Grid Tutorial: Beginner to Advanced Guide (CSS Grid क्या है और इसका Use कैसे करें?)
अगर आप एक full-stack developer या web development के student हैं, तो आपने web layouts बनाने के लिए Flexbox, Floats या absolute positioning का use ज़रूर किया होगा। लेकिन जब बात एक complex, two-dimensional layout design करने की आती है, तो CSS Grid से बेहतर और efficient tool कोई नहीं है।
Vivaa Technologies के इस CSS Grid Tutorial में हम बिल्कुल basic से समझेंगे कि CSS Grid क्या है, यह Flexbox से कैसे different है, और इसका use करके modern responsive layouts कैसे build किए जाते हैं।
CSS Grid क्या है? (What is CSS Grid?)
CSS Grid web development का एक powerful 2-dimensional layout system है। 2-Dimensional का मतलब है कि आप इसमें rows (horizontal) और columns (vertical) दोनों को एक साथ efficiently control कर सकते हैं। इसके विपरीत, Flexbox मुख्य रूप से 1-dimensional layout model है, जो या तो row direction में काम करता है या फिर column direction में।
CSS Grid की मदद से complex web layouts को बिना किसी messy CSS hacks या unnecessary nested div containers के आसानी से organize किया जा सकता है।
CSS Grid की Basic Terminology
Grid implementation से पहले इन core technical terms को समझना जरूरी है:
Grid Container: वह direct parent HTML element जिस पर
display: grid;property apply की जाती है।Grid Items: Grid container के अंदर मौजूद direct children elements।
Grid Tracks: दो adjacent grid lines के बीच का horizontal या vertical space, यानी entire row या column।
Grid Cell: Grid layout की single smallest unit (जैसे किसी HTML table का single cell)।
Grid Area: Multiple grid cells का combined rectangular space।
Grid Gap (Gap): Grid items, rows और columns के बीच का spacing या gutter।
CSS Grid का Use कैसे करें: Step-by-Step Implementation
इस CSS Grid Tutorial में आइए इसे एक simple practical example के ज़रिए समझते हैं। सबसे पहले basic HTML markup तैयार करते हैं:
HTML
<div class="grid-container">
<div class="item">1</div>
<div class="item">2</div>
<div class="item">3</div>
<div class="item">4</div>
<div class="item">5</div>
<div class="item">6</div>
</div>
अब इस container को CSS Grid layout में convert करने के लिए styling apply करते हैं:
CSS
.grid-container {
display: grid;
grid-template-columns: repeat(3, 1fr);
grid-template-rows: auto;
gap: 20px;
background-color: #f4f4f4;
padding: 20px;
}
.item {
background-color: #3498db;
color: #ffffff;
padding: 30px;
text-align: center;
font-size: 20px;
border-radius: 6px;
}
इस Code की Technical Working
display: grid: Parent container पर Grid formatting context enable करता है।
grid-template-columns:
repeat(3, 1fr)property 3 equal columns create करती है।fr(fractional unit) container के available dynamic space को distribute करता है।gap: 20px: Rows और columns के बीच uniform 20px space configure करता है।
Essential CSS Grid Properties
1. repeat() Function और fr Unit
बार-बार identical values declare करने के बजाय repeat() function use किया जाता है:grid-template-columns: repeat(4, 1fr); (यह 4 equal columns automatically generate करता है)।
2. grid-column और grid-row (Item Level Control)
जब किसी specific item को multiple columns या rows में span कराना हो, तो item-level selector पर start और end lines specify की जाती हैं:
CSS
.item-1 {
grid-column: 1 / 3;
}
यह rule item को grid line 1 से start करके line 3 से ठीक पहले तक expand करता है।
3. grid-template-areas (Semantic Layout Architecture)
Header, Sidebar, Main Content और Footer जैसे complex macro layouts के लिए यह सबसे clean approach है:
CSS
.grid-container {
display: grid;
grid-template-areas:
"header header header"
"sidebar content content"
"footer footer footer";
grid-template-columns: 220px 1fr 1fr;
}
.header { grid-area: header; }
.sidebar { grid-area: sidebar; }
.content { grid-area: content; }
.footer { grid-area: footer; }
CSS Grid को Responsive कैसे बनाएं?
Media queries के बिना fluid और responsive layout achieve करने के लिए auto-fit keyword और minmax() function का combination use किया जाता है:
grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
auto-fit: Viewport width के हिसाब से columns को dynamically wrap और adjust करता है।
minmax(220px, 1fr): Column की minimum size 220px fix करता है और available space के base पर 1fr तक stretch होने की permission देता है।
Conclusion
CSS Grid modern frontend engineering का एक extremely versatile और robust module है। शुरुआत में grid lines, tracks और fractions syntax थोड़े unfamiliar लग सकते हैं, लेकिन regular hands-on practice से यह development time को drastically reduce कर देता है।
