મુખ્ય સામગ્રી પર જાઓ ડૉક્સ નેવિગેશન પર જાઓ
Check
in English

CSS ગ્રીડ

ઉદાહરણો અને કોડ સ્નિપેટ્સ સાથે CSS ગ્રીડ પર બનેલી અમારી વૈકલ્પિક લેઆઉટ સિસ્ટમને કેવી રીતે સક્ષમ કરવી, ઉપયોગ કરવી અને કસ્ટમાઇઝ કરવી તે શીખો.

આ પૃષ્ઠ પર

બુટસ્ટ્રેપની ડિફોલ્ટ ગ્રીડ સિસ્ટમ એક દાયકાથી વધુની CSS લેઆઉટ તકનીકોની પરાકાષ્ઠાને રજૂ કરે છે, જે લાખો લોકો દ્વારા અજમાવી અને પરીક્ષણ કરવામાં આવી છે. પરંતુ, તે ઘણી આધુનિક CSS સુવિધાઓ અને તકનીકો વિના પણ બનાવવામાં આવી હતી જે અમે નવા CSS ગ્રીડ જેવા બ્રાઉઝર્સમાં જોઈ રહ્યા છીએ.

સાવચેત રહો—અમારી CSS ગ્રીડ સિસ્ટમ પ્રાયોગિક છે અને v5.1.0 મુજબ પસંદ કરો! અમે તેને તમારા માટે દર્શાવવા માટે અમારા દસ્તાવેજીકરણના CSSમાં શામેલ કર્યું છે, પરંતુ તે ડિફૉલ્ટ રૂપે અક્ષમ છે. તમારા પ્રોજેક્ટ્સમાં તેને કેવી રીતે સક્ષમ કરવું તે જાણવા માટે વાંચતા રહો.

તે કેવી રીતે કામ કરે છે

બુટસ્ટ્રેપ 5 સાથે, અમે CSS ગ્રીડ પર બનેલી અલગ ગ્રીડ સિસ્ટમને સક્ષમ કરવાનો વિકલ્પ ઉમેર્યો છે, પરંતુ બુટસ્ટ્રેપ ટ્વિસ્ટ સાથે. તમને હજુ પણ એવા વર્ગો મળે છે કે જેને તમે પ્રતિભાવાત્મક લેઆઉટ બનાવવા માટે અરજી કરી શકો છો, પરંતુ હૂડ હેઠળ એક અલગ અભિગમ સાથે.

  • CSS ગ્રિડ પસંદ કરેલું છે. સેટિંગ દ્વારા ડિફોલ્ટ ગ્રીડ સિસ્ટમને અક્ષમ કરો $enable-grid-classes: falseઅને સેટિંગ દ્વારા CSS ગ્રીડને સક્ષમ કરો $enable-cssgrid: true. પછી, તમારા સાસને ફરીથી કમ્પાઇલ કરો.

  • ના દાખલાઓને .rowસાથે બદલો .grid. .gridવર્ગ સેટ કરે display: gridછે અને બનાવે છે જે grid-templateતમે તમારા HTML વડે બિલ્ડ કરો છો.

  • .col-*વર્ગો સાથે વર્ગો બદલો .g-col-*. આ એટલા માટે છે કારણ કે અમારી CSS ગ્રીડ કૉલમ ની grid-columnજગ્યાએ પ્રોપર્ટીનો ઉપયોગ કરે છે width.

  • કૉલમ અને ગટરના કદ CSS ચલો દ્વારા સેટ કરવામાં આવે છે. આને પેરેન્ટ પર સેટ કરો .gridઅને તમે ઇચ્છો તેમ, ઇનલાઇન અથવા સ્ટાઇલશીટમાં, --bs-columnsઅને સાથે કસ્ટમાઇઝ કરો --bs-gap.

ભવિષ્યમાં, બુટસ્ટ્રેપ હાઇબ્રિડ સોલ્યુશનમાં શિફ્ટ થઈ જશે કારણ કે gapપ્રોપર્ટીએ ફ્લેક્સબોક્સ માટે લગભગ સંપૂર્ણ બ્રાઉઝર સપોર્ટ પ્રાપ્ત કર્યો છે.

મુખ્ય તફાવતો

ડિફૉલ્ટ ગ્રીડ સિસ્ટમની તુલનામાં:

  • ફ્લેક્સ ઉપયોગિતાઓ એ જ રીતે CSS ગ્રીડ કૉલમ્સને અસર કરતી નથી.

  • ગાબડા ગટરને બદલે છે. gapપ્રોપર્ટી paddingઅમારી ડિફોલ્ટ ગ્રીડ સિસ્ટમમાંથી હોરીઝોન્ટલને બદલે છે અને તેના જેવા વધુ કાર્યો કરે છે margin.

  • જેમ કે, s થી વિપરીત .row, .grids પાસે કોઈ નકારાત્મક માર્જિન નથી અને ગ્રીડ ગટર બદલવા માટે માર્જિન ઉપયોગિતાઓનો ઉપયોગ કરી શકાતો નથી. ગ્રીડ ગેપ ડિફૉલ્ટ રૂપે આડા અને ઊભી રીતે લાગુ કરવામાં આવે છે. વધુ વિગતો માટે કસ્ટમાઇઝિંગ વિભાગ જુઓ .

  • style="--bs-columns: 3;"ઇનલાઇન અને કસ્ટમ શૈલીઓને મોડિફાયર વર્ગો (દા.ત., વિ class="row-cols-3".) માટે રિપ્લેસમેન્ટ તરીકે જોવી જોઈએ .

  • નેસ્ટિંગ એ જ રીતે કામ કરે છે, પરંતુ તમારે નેસ્ટેડના દરેક ઇન્સ્ટન્સ પર તમારી કૉલમ ગણતરીઓ રીસેટ કરવાની જરૂર પડી શકે છે .grid. વિગતો માટે માળો વિભાગ જુઓ .

ઉદાહરણો

ત્રણ કૉલમ

.g-col-4વર્ગોનો ઉપયોગ કરીને તમામ વ્યુપોર્ટ અને ઉપકરણોમાં ત્રણ સમાન-પહોળાઈના કૉલમ બનાવી શકાય છે. વ્યૂપોર્ટ સાઇઝ દ્વારા લેઆઉટ બદલવા માટે પ્રતિભાવશીલ વર્ગો ઉમેરો .

.g-col-4
.g-col-4
.g-col-4
html 
<div class="grid text-center">
  <div class="g-col-4">.g-col-4</div>
  <div class="g-col-4">.g-col-4</div>
  <div class="g-col-4">.g-col-4</div>
</div>

પ્રતિભાવશીલ

સમગ્ર વ્યૂપોર્ટમાં તમારા લેઆઉટને સમાયોજિત કરવા માટે પ્રતિભાવશીલ વર્ગોનો ઉપયોગ કરો. અહીં આપણે સૌથી સાંકડા વ્યુપોર્ટ્સ પર બે કૉલમથી શરૂઆત કરીએ છીએ, અને પછી મધ્યમ વ્યૂપોર્ટ અને તેનાથી ઉપરના ત્રણ કૉલમ સુધી વધીએ છીએ.

.g-col-6 .g-col-md-4
.g-col-6 .g-col-md-4
.g-col-6 .g-col-md-4
html 
<div class="grid text-center">
  <div class="g-col-6 g-col-md-4">.g-col-6 .g-col-md-4</div>
  <div class="g-col-6 g-col-md-4">.g-col-6 .g-col-md-4</div>
  <div class="g-col-6 g-col-md-4">.g-col-6 .g-col-md-4</div>
</div>

બધા વ્યુપોર્ટ પર આ બે કૉલમ લેઆઉટ સાથે તેની સરખામણી કરો.

.g-col-6
.g-col-6
html 
<div class="grid text-center">
  <div class="g-col-6">.g-col-6</div>
  <div class="g-col-6">.g-col-6</div>
</div>

રેપિંગ

ગ્રીડ આઇટમ્સ ઑટોમૅટિક રીતે આગલી લાઇન પર લપેટી જાય છે જ્યારે આડી રીતે વધુ જગ્યા ન હોય. નોંધ કરો કે gapગ્રીડ આઇટમ્સ વચ્ચેના આડા અને ઊભા અંતરને લાગુ પડે છે.

.g-col-6
.g-col-6
.g-col-6
.g-col-6
html 
<div class="grid text-center">
  <div class="g-col-6">.g-col-6</div>
  <div class="g-col-6">.g-col-6</div>

  <div class="g-col-6">.g-col-6</div>
  <div class="g-col-6">.g-col-6</div>
</div>

શરૂ થાય છે

સ્ટાર્ટ ક્લાસનો હેતુ અમારા ડિફૉલ્ટ ગ્રીડના ઑફસેટ વર્ગોને બદલવાનો છે, પરંતુ તે સંપૂર્ણપણે સમાન નથી. CSS ગ્રીડ શૈલીઓ દ્વારા એક ગ્રીડ ટેમ્પલેટ બનાવે છે જે બ્રાઉઝર્સને "આ કૉલમથી શરૂ" અને "આ કૉલમ પર સમાપ્ત" કરવાનું કહે છે. તે ગુણધર્મો છે grid-column-startઅને grid-column-end. પ્રારંભિક વર્ગો ભૂતપૂર્વ માટે લઘુલિપિ છે. તેમને કદ પ્રમાણે કૉલમ વર્ગો સાથે જોડી અને તમને જરૂર હોય તેમ તમારા કૉલમ સંરેખિત કરો. આ ગુણધર્મ માટે અમાન્ય મૂલ્ય 1હોવાથી વર્ગો શરૂ થાય છે.0

.g-col-3 .g-start-2
.g-col-4 .g-start-6
html 
<div class="grid text-center">
  <div class="g-col-3 g-start-2">.g-col-3 .g-start-2</div>
  <div class="g-col-4 g-start-6">.g-col-4 .g-start-6</div>
</div>

સ્વતઃ કૉલમ

જ્યારે ગ્રીડ આઇટમ્સ (a ના તાત્કાલિક બાળકો) પર કોઈ વર્ગો ન હોય ત્યારે .grid, દરેક ગ્રીડ આઇટમ આપોઆપ એક કૉલમમાં માપવામાં આવશે.

1
1
1
1
1
1
1
1
1
1
1
1
html 
<div class="grid text-center">
  <div>1</div>
  <div>1</div>
  <div>1</div>
  <div>1</div>
  <div>1</div>
  <div>1</div>
  <div>1</div>
  <div>1</div>
  <div>1</div>
  <div>1</div>
  <div>1</div>
  <div>1</div>
</div>

આ વર્તનને ગ્રીડ કૉલમ વર્ગો સાથે મિશ્રિત કરી શકાય છે.

.g-col-6
1
1
1
1
1
1
html 
<div class="grid text-center">
  <div class="g-col-6">.g-col-6</div>
  <div>1</div>
  <div>1</div>
  <div>1</div>
  <div>1</div>
  <div>1</div>
  <div>1</div>
</div>

માળો

અમારી ડિફોલ્ટ ગ્રીડ સિસ્ટમની જેમ જ, અમારી CSS ગ્રીડ .grids ના સરળ માળખા માટે પરવાનગી આપે છે. જો કે, ડિફોલ્ટથી વિપરીત, આ ગ્રીડ પંક્તિઓ, કૉલમ્સ અને ગાબડાઓમાં ફેરફારોને વારસામાં મેળવે છે. નીચેના ઉદાહરણને ધ્યાનમાં લો:

  • અમે સ્થાનિક CSS વેરીએબલ સાથે કૉલમની ડિફૉલ્ટ સંખ્યાને ઓવરરાઇડ કરીએ છીએ: --bs-columns: 3.
  • પ્રથમ ઓટો-કૉલમમાં, કૉલમની ગણતરી વારસામાં મળે છે અને દરેક કૉલમ ઉપલબ્ધ પહોળાઈના ત્રીજા ભાગની હોય છે.
  • બીજી ઑટો-કૉલમમાં, અમે નેસ્ટેડ પર કૉલમ કાઉન્ટને .grid12 (અમારું ડિફૉલ્ટ) પર ફરીથી સેટ કર્યું છે.
  • ત્રીજા સ્વતઃ-સ્તંભમાં કોઈ નેસ્ટેડ સામગ્રી નથી.

વ્યવહારમાં આ અમારી ડિફોલ્ટ ગ્રીડ સિસ્ટમની સરખામણીમાં વધુ જટિલ અને કસ્ટમ લેઆઉટ માટે પરવાનગી આપે છે.

પ્રથમ સ્વતઃ-સ્તંભ
સ્વતઃ-સ્તંભ
સ્વતઃ-સ્તંભ
બીજી સ્વતઃ-સ્તંભ
12માંથી 6
12 માંથી 4
12માંથી 2
ત્રીજી સ્વતઃ-સ્તંભ
html 
<div class="grid text-center" style="--bs-columns: 3;">
  <div>
    First auto-column
    <div class="grid">
      <div>Auto-column</div>
      <div>Auto-column</div>
    </div>
  </div>
  <div>
    Second auto-column
    <div class="grid" style="--bs-columns: 12;">
      <div class="g-col-6">6 of 12</div>
      <div class="g-col-4">4 of 12</div>
      <div class="g-col-2">2 of 12</div>
    </div>
  </div>
  <div>Third auto-column</div>
</div>

કસ્ટમાઇઝિંગ

સ્થાનિક CSS ચલો સાથે કૉલમની સંખ્યા, પંક્તિઓની સંખ્યા અને અંતરની પહોળાઈને કસ્ટમાઇઝ કરો.

ચલ ફોલબેક મૂલ્ય વર્ણન
--bs-rows 1 તમારા ગ્રીડ નમૂનામાં પંક્તિઓની સંખ્યા
--bs-columns 12 તમારા ગ્રીડ નમૂનામાં કૉલમની સંખ્યા
--bs-gap 1.5rem કૉલમ વચ્ચેના અંતરનું કદ (ઊભી અને આડી)

આ CSS ચલોની કોઈ મૂળભૂત કિંમત નથી; તેના બદલે, તેઓ ફોલબેક મૂલ્યો લાગુ કરે છે જેનો ઉપયોગ સ્થાનિક દાખલો પૂરો પાડવામાં ન આવે ત્યાં સુધી થાય છે. ઉદાહરણ તરીકે, અમે var(--bs-rows, 1)અમારી CSS ગ્રીડ પંક્તિઓ માટે ઉપયોગ કરીએ છીએ, જે અવગણના કરે --bs-rowsછે કારણ કે તે હજી સુધી ક્યાંય સેટ કરવામાં આવી નથી. એકવાર તે થઈ જાય, .gridદાખલા ની ફોલબેક મૂલ્યને બદલે તે મૂલ્યનો ઉપયોગ કરશે 1.

કોઈ ગ્રીડ વર્ગો નથી

ના તાત્કાલિક બાળકોના ઘટકો એ ગ્રીડ આઇટમ છે, તેથી સ્પષ્ટપણે વર્ગ .gridઉમેર્યા વિના તેનું કદ કરવામાં આવશે ..g-col

સ્વતઃ-સ્તંભ
સ્વતઃ-સ્તંભ
સ્વતઃ-સ્તંભ
html 
<div class="grid text-center" style="--bs-columns: 3;">
  <div>Auto-column</div>
  <div>Auto-column</div>
  <div>Auto-column</div>
</div>

કૉલમ અને ગાબડા

કૉલમની સંખ્યા અને ગેપને સમાયોજિત કરો.

.g-col-2
.g-col-2
html 
<div class="grid text-center" style="--bs-columns: 4; --bs-gap: 5rem;">
  <div class="g-col-2">.g-col-2</div>
  <div class="g-col-2">.g-col-2</div>
</div>
.g-col-6
.g-col-4
html 
<div class="grid text-center" style="--bs-columns: 10; --bs-gap: 1rem;">
  <div class="g-col-6">.g-col-6</div>
  <div class="g-col-4">.g-col-4</div>
</div>

પંક્તિઓ ઉમેરી રહ્યા છીએ

વધુ પંક્તિઓ ઉમેરીને અને કૉલમનું સ્થાન બદલીને:

સ્વતઃ-સ્તંભ
સ્વતઃ-સ્તંભ
સ્વતઃ-સ્તંભ
html 
<div class="grid text-center" style="--bs-rows: 3; --bs-columns: 3;">
  <div>Auto-column</div>
  <div class="g-start-2" style="grid-row: 2">Auto-column</div>
  <div class="g-start-3" style="grid-row: 3">Auto-column</div>
</div>

ગાબડાં

ને સંશોધિત કરીને જ ઊભી અંતર બદલો row-gap. નોંધ કરો કે અમે s gapપર ઉપયોગ કરીએ છીએ .grid, પરંતુ row-gapઅને column-gapજરૂરિયાત મુજબ સુધારી શકાય છે.

.g-col-6
.g-col-6
.g-col-6
.g-col-6
html 
<div class="grid text-center" style="row-gap: 0;">
  <div class="g-col-6">.g-col-6</div>
  <div class="g-col-6">.g-col-6</div>

  <div class="g-col-6">.g-col-6</div>
  <div class="g-col-6">.g-col-6</div>
</div>

તેના કારણે, તમારી પાસે વિવિધ વર્ટિકલ અને હોરીઝોન્ટલ gaps હોઈ શકે છે, જે એક મૂલ્ય (બધી બાજુઓ) અથવા મૂલ્યોની જોડી (ઊભી અને આડી) લઈ શકે છે. આ માટે ઇનલાઇન શૈલી gapસાથે અથવા અમારા --bs-gapCSS વેરીએબલ સાથે લાગુ કરી શકાય છે.

.g-col-6
.g-col-6
.g-col-6
.g-col-6
html 
<div class="grid text-center" style="--bs-gap: .25rem 1rem;">
  <div class="g-col-6">.g-col-6</div>
  <div class="g-col-6">.g-col-6</div>

  <div class="g-col-6">.g-col-6</div>
  <div class="g-col-6">.g-col-6</div>
</div>

સસ

CSS ગ્રીડની એક મર્યાદા એ છે કે અમારા ડિફૉલ્ટ વર્ગો હજુ પણ બે Sass ચલો દ્વારા જનરેટ થાય છે, $grid-columnsઅને $grid-gutter-width. આ અમારા સંકલિત CSSમાં જનરેટ થયેલા વર્ગોની સંખ્યાને અસરકારક રીતે પૂર્વનિર્ધારિત કરે છે. તમારી પાસે અહીં બે વિકલ્પો છે:

  • તે ડિફૉલ્ટ Sass ચલોને સંશોધિત કરો અને તમારા CSSને ફરીથી કમ્પાઇલ કરો.
  • પ્રદાન કરેલ વર્ગોને વધારવા માટે ઇનલાઇન અથવા કસ્ટમ શૈલીઓનો ઉપયોગ કરો.

ઉદાહરણ તરીકે, તમે કૉલમની સંખ્યા વધારી શકો છો અને ગેપનું કદ બદલી શકો છો, અને પછી ઇનલાઇન શૈલીઓ અને પૂર્વવ્યાખ્યાયિત CSS ગ્રીડ કૉલમ વર્ગો (દા.ત., .g-col-4) ના મિશ્રણ સાથે તમારા "કૉલમ્સ"નું કદ કરી શકો છો.

14 કૉલમ
.g-col-4
html 
<div class="grid text-center" style="--bs-columns: 18; --bs-gap: .5rem;">
  <div style="grid-column: span 14;">14 columns</div>
  <div class="g-col-4">.g-col-4</div>
</div>