Grid structure

📖 Theory

तीन cards जो बगल-बगल नहीं बैठेंगे

आपके पास तीन FestConnect event cards हैं: Robotics, Dance, Coding। आप चाहते हैं वे एक साफ़ row में हों, हर एक width का एक third लेते हुए। <div>s को stack करना बस उन्हें एक के नीचे एक रख देता है। उन्हें float करना fiddly है और छोटी screens पर टूट जाता है।

Bootstrap layout को एक grid से solve करता है: यह मान लेता है हर row 12 बराबर columns में ruled है, और आप बताते हैं हर block को कितने columns span करने चाहिए। तीन thirds का मतलब है हर card 12 में से 4 span करता है।

📖 Theory

Graph paper, 12 squares चौड़ा

सोचिए page की हर row graph paper की एक strip है जो exactly 12 squares चौड़ी है। एक card रखने के लिए, आप बताते हैं यह कितने squares खाता है। एक half-width card 6 squares खाता है, एक third 4, एक quarter 3। जब तक एक strip के squares जुड़कर 12 बनते हैं, सब कुछ perfectly line up होता है, क्योंकि वे एक ही ruler share करते हैं।

📖 Theory

container, row, col

Grid तीन nested layers है:

• `.container`: outer wrapper (centered, responsive width)।
• `.row`: एक horizontal strip, हमेशा 12 columns चौड़ी।
• `.col-N`: row का एक child जो 12 में से N span करता है।

एक row के अंदर N values जुड़कर 12 बननी चाहिए। col-6 + col-6 दो halves हैं; col-4 + col-4 + col-4 तीन thirds हैं। बिना number वाला सादा .col अपने siblings के साथ row बराबर share करता है।

⌨️ Practical

तीन event cards, एक row

<div class="container">
  <div class="row">
    <div class="col-4">Robotics</div>   <!-- 4/12 = one third -->
    <div class="col-4">Dance</div>
    <div class="col-4">Coding</div>
  </div>

  <!-- a half + a half in the next strip -->
  <div class="row">
    <div class="col-6">Schedule</div>
    <div class="col-6">Venue Map</div>
  </div>
</div>

This example runs in Gri-Learn on the web, where you can edit it and see the output.

💭 Think first

Column maths कीजिए

आप एक row में एक wide 'featured event' के बगल एक narrow 'sidebar' चाहते हैं, और featured part sidebar से तीन गुना चौड़ा होना चाहिए। कौन से दो col-N classes यह देते हैं, और क्या वे जुड़कर 12 बनते हैं?

🧩 Quiz

एक row में col-8, col-6, और col-4 (total 18) हैं। Page पर क्या होता है?

1. col-4 एक नई line पर wrap हो जाता है, क्योंकि एक row सिर्फ़ 12 columns रखता है
2. तीनों 12 columns में फिट होने के लिए proportionally shrink हो जाते हैं
3. Bootstrap एक error देता है और कुछ नहीं दिखाता
4. अतिरिक्त 6 columns जोड़ दिए जाते हैं, row को 18 चौड़ा बनाते हुए

⚠️ Watch out

Grid structure traps

1. col सीधे row के अंदर नहीं: एक .col-4 एक .row का direct child होना ज़रूरी है। इसे एक extra <div> में wrap करना alignment और gutters तोड़ देता है।

2. row एक container के अंदर नहीं: rows negative margins इस्तेमाल करते हैं जिन्हें एक container cancel करता है; एक stray row एक horizontal scrollbar cause कर सकता है।

3. Columns 12 से ज़्यादा जुड़ना: वे wrap हो जाते हैं। कभी-कभी आप यह चाहते हैं (एक gallery), पर अगर एक layout 'अचानक अगली line पर jump करता है', अपने column numbers जोड़िए, वे 12 से ज़्यादा हैं।

📖 Theory

अगला: वही grid, पर responsive

अभी col-4 हर screen पर three-across है, यहाँ तक कि एक phone पर भी जहाँ यह बहुत cramped है। 'Bootstrap Grids' lesson col-md-4 जैसे breakpoint versions जोड़ता है, जिसका मतलब है 'medium screens और ऊपर पर एक third, उससे नीचे full width'। 12-column idea जो आपने अभी सीखा वही रहता है; आप सिर्फ़ एक screen-size label जोड़ते हैं।

✅ Summary

Key takeaways

• Bootstrap का grid हर row को 12 बराबर columns में ruled करता है।
• Nest कीजिए: .container > .row > .col-N, col row का direct child हो।
• col-N 12 में से N span करता है: col-6 = आधा, col-4 = third, col-3 = quarter।
• एक row में column numbers जुड़कर 12 होने चाहिए; 12 से ऊपर जाना अगली line पर wrap करता है।
• बिना number वाला सादा .col अपने siblings के साथ row बराबर बाँटता है।
• Memory hook: graph paper, 12 squares चौड़ा।