Grid structure

📖 Theory

ત્રણ cards જે બાજુ બાજુ બેસતાં નથી

તમારી પાસે FestConnect નાં ત્રણ event નાં cards છે: Robotics, Dance, Coding. તમને એ સુઘડ હરોળમાં જોઈએ છે, દરેક પહોળાઈનો ત્રીજો ભાગ રોકતું. <div> ને ખડકવાથી એ ફક્ત એકની નીચે એક આવે છે. એમને float કરવું કડાકૂટભર્યું છે અને નાના પડદા પર તૂટી પડે છે.

Bootstrap ગોઠવણનો ઉકેલ grid થી કરે છે: એ માની લે છે કે દરેક હરોળ 12 સરખા સ્તંભમાં લીટીબદ્ધ છે, અને તમે કહો છો કે દરેક ટુકડો કેટલા સ્તંભ રોકે. ત્રણ ત્રીજા ભાગ એટલે દરેક card 12 માંથી 4 રોકે.

📖 Theory

12 ચોરસ પહોળો ગ્રાફ પેપર

પાનાની દરેક હરોળને બરાબર 12 ચોરસ પહોળા ગ્રાફ પેપરની પટ્ટી તરીકે કલ્પો. Card મૂકવા તમે કહો છો કે એ કેટલા ચોરસ ખાય. અડધી પહોળાઈનું card 6 ચોરસ ખાય છે, ત્રીજો ભાગ 4, ચોથો ભાગ 3. જ્યાં સુધી એક પટ્ટીના ચોરસનો સરવાળો 12 થાય, ત્યાં સુધી બધું સંપૂર્ણ રીતે હરોળમાં ગોઠવાય છે, કારણ કે એ બધા એક જ માપપટ્ટી વહેંચે છે.

📖 Theory

container, row, col

Grid એ ત્રણ અંદરોઅંદર ગોઠવાયેલા સ્તર છે:

• `.container`: બહારનું આવરણ (વચ્ચે, responsive પહોળાઈ).
• `.row`: આડી પટ્ટી, હંમેશા 12 સ્તંભ પહોળી.
• `.col-N`: હરોળનું સંતાન જે 12 માંથી N સ્તંભ રોકે છે.

એક હરોળની અંદર N નાં મૂલ્યોનો સરવાળો 12 થવો જોઈએ. col-6 વત્તા col-6 એ બે અડધા છે; col-4 વત્તા col-4 વત્તા col-4 એ ત્રણ ત્રીજા ભાગ. આંકડા વગરનું સાદું .col હરોળને પોતાનાં ભાઈબંધો સાથે સરખે ભાગે વહેંચે છે.

⌨️ Practical

ત્રણ event નાં cards, એક હરોળ

<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

સ્તંભનું ગણિત કરો

તમને એક હરોળમાં પહોળા 'featured event' ની બાજુમાં સાંકડું 'sidebar' જોઈએ છે, અને featured નો ભાગ sidebar કરતાં ત્રણ ગણો પહોળો હોવો જોઈએ. કયા બે col-N ના classes એ આપે છે, અને એમનો સરવાળો 12 થાય છે?

🧩 Quiz

એક હરોળમાં col-8, col-6, અને col-4 છે (કુલ 18). પાના પર શું થાય છે?

1. col-4 નવી લીટીમાં વળી જાય છે, કારણ કે હરોળ ફક્ત 12 સ્તંભ રાખે છે
2. ત્રણેય 12 સ્તંભમાં બેસવા પ્રમાણસર સંકોચાય છે
3. Bootstrap ભૂલ આપે છે અને કશું દેખાડતું નથી
4. વધારાના 6 સ્તંભ ઉમેરાય છે, અને હરોળ 18 પહોળી થાય છે

⚠️ Watch out

Grid ની રચનાના ફાંદા

1. col એ row ની સીધું અંદર નહીં: .col-4 એ .row નું સીધું સંતાન હોવું જ જોઈએ. એને વધારાના <div> માં વીંટવાથી ગોઠવણ અને ગાળા તૂટે છે.

2. row એ container ની અંદર નહીં: rows ઋણ હાંસિયા વાપરે છે જેને container રદ કરે છે; રખડતી row આડી scrollbar લાવી શકે છે.

3. સ્તંભનો સરવાળો 12 થી વધુ: એ વળી જાય છે. ક્યારેક તમને એ જ જોઈતું હોય (ચિત્રોની હાર), પણ જો ગોઠવણ 'અણધારી રીતે પછીની લીટીમાં કૂદે', તો તમારા સ્તંભના આંકડા સરવાળો કરો, એ 12 થી વધી ગયા છે.

📖 Theory

આગળ: એ જ grid, પણ responsive

અત્યારે col-4 એ દરેક પડદા પર ત્રણ બાજુ બાજુ છે, phone સહિત જ્યાં એ બહુ ઠાંસેલું છે. 'Bootstrap Grids' નો પાઠ col-md-4 જેવી breakpoint વાળી આવૃત્તિઓ ઉમેરે છે, જેનો અર્થ છે 'મધ્યમ પડદા અને ઉપર ત્રીજો ભાગ, નીચે પૂરી પહોળાઈ'. તમે હમણાં શીખ્યા એ 12 સ્તંભનો વિચાર એ જ રહે છે; તમે ફક્ત પડદાના માપનું લેબલ ઉમેરો છો.

✅ Summary

Key takeaways

• Bootstrap ની grid દરેક હરોળને 12 સરખા સ્તંભમાં લીટીબદ્ધ કરે છે.
• અંદરોઅંદર: .container > .row > .col-N, જેમાં col એ row નું સીધું સંતાન હોય.
• col-N એ 12 માંથી N રોકે છે: col-6 = અડધું, col-4 = ત્રીજો ભાગ, col-3 = ચોથો ભાગ.
• હરોળમાં સ્તંભના આંકડાનો સરવાળો 12 થવો જોઈએ; 12 થી વધે તો નવી લીટીમાં વળી જાય છે.
• આંકડા વગરનું સાદું .col હરોળને પોતાનાં ભાઈબંધો સાથે સરખે ભાગે વહેંચે છે.
• Memory hook: 12 ચોરસ પહોળો ગ્રાફ પેપર.