ગ્રીડ સિસ્ટમ

બાર કૉલમ સિસ્ટમ, છ ડિફૉલ્ટ રિસ્પોન્સિવ ટિયર્સ, સાસ વેરિયેબલ્સ અને મિક્સિન્સ અને ડઝનેક પૂર્વવ્યાખ્યાયિત વર્ગોને આભારી તમામ આકારો અને કદના લેઆઉટ બનાવવા માટે અમારી શક્તિશાળી મોબાઇલ-ફર્સ્ટ ફ્લેક્સબોક્સ ગ્રીડનો ઉપયોગ કરો.

આ પૃષ્ઠ પર

ઉદાહરણ

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

ફ્લેક્સબોક્સ માટે નવા અથવા અજાણ્યા છો? પૃષ્ઠભૂમિ, પરિભાષા, માર્ગદર્શિકા અને કોડ સ્નિપેટ્સ માટે આ CSS ટ્રિક્સ ફ્લેક્સબોક્સ માર્ગદર્શિકા વાંચો .

કૉલમ

<div class="container">
  <div class="row">
    <div class="col">
      Column
    </div>
    <div class="col">
      Column
    </div>
    <div class="col">
      Column
    </div>
  </div>
</div>

ઉપરોક્ત ઉદાહરણ અમારા પૂર્વવ્યાખ્યાયિત ગ્રીડ વર્ગોનો ઉપયોગ કરીને તમામ ઉપકરણો અને વ્યુપોર્ટ્સમાં ત્રણ સમાન-પહોળાઈની કૉલમ બનાવે છે. તે કૉલમ પેરેન્ટ સાથે પૃષ્ઠમાં કેન્દ્રિત છે .container.

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

તેને તોડીને, ગ્રીડ સિસ્ટમ કેવી રીતે એકસાથે આવે છે તે અહીં છે:

અમારી ગ્રીડ છ રિસ્પોન્સિવ બ્રેકપોઇન્ટ્સને સપોર્ટ કરે છે. બ્રેકપોઇન્ટ્સ min-widthમીડિયા ક્વેરી પર આધારિત હોય છે, એટલે કે તે બ્રેકપોઇન્ટ અને તેની ઉપરના તમામને અસર કરે છે (દા.ત., , , , , અને ) .col-sm-4પર લાગુ થાય છે . આનો અર્થ એ છે કે તમે દરેક બ્રેકપોઇન્ટ દ્વારા કન્ટેનર અને કૉલમના કદ અને વર્તનને નિયંત્રિત કરી શકો છો.smmdlgxlxxl
કન્ટેનર તમારી સામગ્રીને મધ્યમાં અને આડા પેડ કરો. .containerરિસ્પોન્સિવ પિક્સેલ પહોળાઈ .container-fluidમાટે , width: 100%બધા વ્યૂપોર્ટ અને ડિવાઇસ માટે અથવા .container-mdપ્રવાહી અને પિક્સેલ પહોળાઈના સંયોજન માટે રિસ્પોન્સિવ કન્ટેનર (દા.ત., ) માટે ઉપયોગ કરો .
પંક્તિઓ કૉલમ માટે આવરણો છે. દરેક કૉલમ paddingતેમની વચ્ચેની જગ્યાને નિયંત્રિત કરવા માટે આડી (જેને ગટર કહેવાય છે) ધરાવે છે. paddingપછી તમારી કૉલમમાંની સામગ્રી ડાબી બાજુ નીચે સંરેખિત છે તેની ખાતરી કરવા માટે નકારાત્મક માર્જિન સાથે પંક્તિઓ પર આનો પ્રતિકાર કરવામાં આવે છે. પંક્તિઓ તમારી સામગ્રીના અંતરને બદલવા માટે કૉલમના કદ અને ગટર વર્ગોને સમાનરૂપે લાગુ કરવા માટે સંશોધક વર્ગોને પણ સમર્થન આપે છે.
કૉલમ અતિ લવચીક છે. પંક્તિ દીઠ 12 ટેમ્પલેટ કૉલમ્સ ઉપલબ્ધ છે, જે તમને કોઈપણ સંખ્યાના કૉલમમાં ફેલાયેલા તત્વોના વિવિધ સંયોજનો બનાવવાની મંજૂરી આપે છે. કૉલમ વર્ગો સ્પેન કરવા માટે ટેમ્પ્લેટ કૉલમ્સની સંખ્યા દર્શાવે છે (દા.ત., col-4ચાર સ્પેન્સ). widths ટકાવારીમાં સેટ કરેલ છે જેથી તમારી પાસે હંમેશા સમાન સંબંધિત કદ હોય.
ગટર પણ પ્રતિભાવશીલ અને વૈવિધ્યપૂર્ણ છે. ગટર વર્ગો તમામ બ્રેકપોઇન્ટ પર ઉપલબ્ધ છે, જેમાં અમારા માર્જિન અને પેડિંગ સ્પેસિંગ જેવા જ માપો છે . .gx-*વર્ગો સાથે આડી ગટર , ની સાથે ઊભી ગટર .gy-*અથવા વર્ગો સાથેના તમામ ગટર બદલો .g-*. .g-0ગટર દૂર કરવા માટે પણ ઉપલબ્ધ છે.
સાસ વેરીએબલ, નકશા અને મિક્સિન્સ ગ્રીડને પાવર કરે છે. જો તમે બુટસ્ટ્રેપમાં પૂર્વવ્યાખ્યાયિત ગ્રીડ વર્ગોનો ઉપયોગ કરવા માંગતા નથી, તો તમે વધુ સિમેન્ટીક માર્કઅપ સાથે તમારા પોતાના બનાવવા માટે અમારા ગ્રીડના સ્ત્રોત Sass નો ઉપયોગ કરી શકો છો. અમે તમારા માટે વધુ સુગમતા માટે આ Sass ચલોનો ઉપયોગ કરવા માટે કેટલીક CSS કસ્ટમ પ્રોપર્ટીઝ પણ શામેલ કરીએ છીએ.

ફ્લેક્સબોક્સની આજુબાજુની મર્યાદાઓ અને ભૂલોથી વાકેફ રહો , જેમ કે ફ્લેક્સ કન્ટેનર તરીકે કેટલાક HTML ઘટકોનો ઉપયોગ કરવામાં અસમર્થતા .

ગ્રીડ વિકલ્પો

બુટસ્ટ્રેપની ગ્રીડ સિસ્ટમ તમામ છ ડિફૉલ્ટ બ્રેકપોઇન્ટ અને તમે કસ્ટમાઇઝ કરેલ કોઈપણ બ્રેકપોઇન્ટને અનુકૂલિત કરી શકે છે. છ ડિફોલ્ટ ગ્રીડ સ્તરો નીચે મુજબ છે:

વધારાનું નાનું (xs)
નાનું (sm)
મધ્યમ (md)
મોટું (lg)
વધારાનું મોટું (xl)
વધારાની વધારાની મોટી (xxl)

ઉપર નોંધ્યું છે તેમ, આ દરેક બ્રેકપોઇન્ટનું પોતાનું કન્ટેનર, અનન્ય વર્ગ ઉપસર્ગ અને સંશોધકો છે. આ બ્રેકપોઇન્ટ પર ગ્રીડ કેવી રીતે બદલાય છે તે અહીં છે:

	xs <576px	sm ≥576px	md ≥768px	lg ≥992px	xl ≥1200px	xxl ≥1400px
કન્ટેનર`max-width`	કોઈ નહીં (ઓટો)	540px	720px	960px	1140px	1320px
વર્ગ ઉપસર્ગ	`.col-`	`.col-sm-`	`.col-md-`	`.col-lg-`	`.col-xl-`	`.col-xxl-`
કૉલમનો #	12
ગટરની પહોળાઈ	1.5rem (.75rem ડાબી અને જમણી બાજુએ)
કસ્ટમ ગટર	હા
નેસ્ટેબલ	હા
કૉલમ ક્રમ	હા

સ્વતઃ-લેઆઉટ કૉલમ્સ

જેમ કે સ્પષ્ટ ક્રમાંકિત વર્ગ વિના સરળ કૉલમ કદ બદલવા માટે બ્રેકપોઇન્ટ-વિશિષ્ટ કૉલમ વર્ગોનો ઉપયોગ કરો .col-sm-6.

સમાન-પહોળાઈ

ઉદાહરણ તરીકે, અહીં બે ગ્રીડ લેઆઉટ છે જે દરેક ઉપકરણ અને વ્યૂપોર્ટ પર લાગુ થાય છે, xsથી xxl. તમને જોઈતા દરેક બ્રેકપોઈન્ટ માટે ગમે તેટલા એકમ-ઓછા વર્ગો ઉમેરો અને દરેક કૉલમ સમાન પહોળાઈની હશે.

2 માંથી 1

2 માંથી 2

3 માંથી 1

3 માંથી 2

3 માંથી 3

<div class="container">
  <div class="row">
    <div class="col">
      1 of 2
    </div>
    <div class="col">
      2 of 2
    </div>
  </div>
  <div class="row">
    <div class="col">
      1 of 3
    </div>
    <div class="col">
      2 of 3
    </div>
    <div class="col">
      3 of 3
    </div>
  </div>
</div>

એક કૉલમ પહોળાઈ સુયોજિત કરી રહ્યા છીએ

ફ્લેક્સબોક્સ ગ્રીડ કૉલમ્સ માટે સ્વતઃ-લેઆઉટનો અર્થ એ પણ છે કે તમે એક કૉલમની પહોળાઈ સેટ કરી શકો છો અને ભાઈ-બહેન કૉલમનું ઑટોમૅટિક રીતે તેની આસપાસ કદ બદલી શકો છો. તમે પૂર્વવ્યાખ્યાયિત ગ્રીડ વર્ગો (નીચે બતાવ્યા પ્રમાણે), ગ્રીડ મિક્સન્સ અથવા ઇનલાઇન પહોળાઈનો ઉપયોગ કરી શકો છો. નોંધ કરો કે મધ્ય કૉલમની પહોળાઈ ગમે તેટલી હોય અન્ય કૉલમનું કદ બદલાશે.

3 માંથી 1

3માંથી 2 (વિશાળ)

3 માંથી 3

3 માંથી 1

3માંથી 2 (વિશાળ)

3 માંથી 3

<div class="container">
  <div class="row">
    <div class="col">
      1 of 3
    </div>
    <div class="col-6">
      2 of 3 (wider)
    </div>
    <div class="col">
      3 of 3
    </div>
  </div>
  <div class="row">
    <div class="col">
      1 of 3
    </div>
    <div class="col-5">
      2 of 3 (wider)
    </div>
    <div class="col">
      3 of 3
    </div>
  </div>
</div>

ચલ પહોળાઈ સામગ્રી

વર્ગોનો ઉપયોગ col-{breakpoint}-autoતેમની સામગ્રીની કુદરતી પહોળાઈના આધારે કૉલમના કદ માટે કરો.

3 માંથી 1

ચલ પહોળાઈ સામગ્રી

3 માંથી 3

3 માંથી 1

ચલ પહોળાઈ સામગ્રી

3 માંથી 3

<div class="container">
  <div class="row justify-content-md-center">
    <div class="col col-lg-2">
      1 of 3
    </div>
    <div class="col-md-auto">
      Variable width content
    </div>
    <div class="col col-lg-2">
      3 of 3
    </div>
  </div>
  <div class="row">
    <div class="col">
      1 of 3
    </div>
    <div class="col-md-auto">
      Variable width content
    </div>
    <div class="col col-lg-2">
      3 of 3
    </div>
  </div>
</div>

રિસ્પોન્સિવ વર્ગો

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

બધા બ્રેકપોઇન્ટ

સૌથી નાના ઉપકરણોથી લઈને મોટામાં સમાન હોય તેવા ગ્રીડ માટે, .colઅને .col-*વર્ગોનો ઉપયોગ કરો. જ્યારે તમને ખાસ કરીને કદના કૉલમની જરૂર હોય ત્યારે ક્રમાંકિત વર્ગનો ઉલ્લેખ કરો; અન્યથા, વળગી રહેવા માટે મફત લાગે .col.

કર્નલ

કોલ-8

કોલ-4

<div class="container">
  <div class="row">
    <div class="col">col</div>
    <div class="col">col</div>
    <div class="col">col</div>
    <div class="col">col</div>
  </div>
  <div class="row">
    <div class="col-8">col-8</div>
    <div class="col-4">col-4</div>
  </div>
</div>

આડા પર સ્ટેક

વર્ગોના એક જ સેટનો ઉપયોગ કરીને .col-sm-*, તમે એક મૂળભૂત ગ્રીડ સિસ્ટમ બનાવી શકો છો જે સ્ટેકથી શરૂ થાય છે અને નાના બ્રેકપોઇન્ટ ( sm) પર આડી બને છે.

col-sm-8

col-sm-4

col-sm

<div class="container">
  <div class="row">
    <div class="col-sm-8">col-sm-8</div>
    <div class="col-sm-4">col-sm-4</div>
  </div>
  <div class="row">
    <div class="col-sm">col-sm</div>
    <div class="col-sm">col-sm</div>
    <div class="col-sm">col-sm</div>
  </div>
</div>

મિક્સ એન્ડ મેચ

શું નથી ઈચ્છતા કે તમારી કૉલમ ફક્ત અમુક ગ્રીડ સ્તરોમાં જ સ્ટેક થાય? જરૂરિયાત મુજબ દરેક સ્તર માટે વિવિધ વર્ગોના સંયોજનનો ઉપયોગ કરો. તે બધું કેવી રીતે કાર્ય કરે છે તેના વધુ સારા વિચાર માટે નીચેનું ઉદાહરણ જુઓ.

.col-md-8

.col-6 .col-md-4

.col-6

<div class="container">
  <!-- Stack the columns on mobile by making one full-width and the other half-width -->
  <div class="row">
    <div class="col-md-8">.col-md-8</div>
    <div class="col-6 col-md-4">.col-6 .col-md-4</div>
  </div>

  <!-- Columns start at 50% wide on mobile and bump up to 33.3% wide on desktop -->
  <div class="row">
    <div class="col-6 col-md-4">.col-6 .col-md-4</div>
    <div class="col-6 col-md-4">.col-6 .col-md-4</div>
    <div class="col-6 col-md-4">.col-6 .col-md-4</div>
  </div>

  <!-- Columns are always 50% wide, on mobile and desktop -->
  <div class="row">
    <div class="col-6">.col-6</div>
    <div class="col-6">.col-6</div>
  </div>
</div>

પંક્તિ કૉલમ

.row-cols-*તમારી સામગ્રી અને લેઆઉટને શ્રેષ્ઠ રીતે પ્રસ્તુત કરતી કૉલમની સંખ્યાને ઝડપથી સેટ કરવા માટે પ્રતિભાવશીલ વર્ગોનો ઉપયોગ કરો . જ્યારે સામાન્ય .col-*વર્ગો વ્યક્તિગત કૉલમ્સ પર લાગુ થાય છે (દા.ત., .col-md-4), પંક્તિ કૉલમ વર્ગો .rowસમાવિષ્ટ કૉલમ્સ માટે ડિફોલ્ટ તરીકે પેરેન્ટ પર સેટ કરવામાં આવે છે. સાથે .row-cols-autoતમે કૉલમને તેમની કુદરતી પહોળાઈ આપી શકો છો.

આ પંક્તિ કૉલમ વર્ગોનો ઉપયોગ ઝડપથી મૂળભૂત ગ્રીડ લેઆઉટ બનાવવા અથવા તમારા કાર્ડ લેઆઉટને નિયંત્રિત કરવા અને કૉલમ સ્તર પર જરૂર પડે ત્યારે ઓવરરાઇડ કરવા માટે કરો.

કૉલમ

<div class="container">
  <div class="row row-cols-2">
    <div class="col">Column</div>
    <div class="col">Column</div>
    <div class="col">Column</div>
    <div class="col">Column</div>
  </div>
</div>

કૉલમ

<div class="container">
  <div class="row row-cols-3">
    <div class="col">Column</div>
    <div class="col">Column</div>
    <div class="col">Column</div>
    <div class="col">Column</div>
  </div>
</div>

કૉલમ

<div class="container">
  <div class="row row-cols-auto">
    <div class="col">Column</div>
    <div class="col">Column</div>
    <div class="col">Column</div>
    <div class="col">Column</div>
  </div>
</div>

કૉલમ

<div class="container">
  <div class="row row-cols-4">
    <div class="col">Column</div>
    <div class="col">Column</div>
    <div class="col">Column</div>
    <div class="col">Column</div>
  </div>
</div>

કૉલમ

<div class="container">
  <div class="row row-cols-4">
    <div class="col">Column</div>
    <div class="col">Column</div>
    <div class="col-6">Column</div>
    <div class="col">Column</div>
  </div>
</div>

કૉલમ

<div class="container">
  <div class="row row-cols-1 row-cols-sm-2 row-cols-md-4">
    <div class="col">Column</div>
    <div class="col">Column</div>
    <div class="col">Column</div>
    <div class="col">Column</div>
  </div>
</div>

કૉલમ

<div class="container">
  <div class="row row-cols-2 row-cols-lg-3">
    <div class="col">Column</div>
    <div class="col">Column</div>
    <div class="col">Column</div>
    <div class="col">Column</div>
    <div class="col">Column</div>
    <div class="col">Column</div>
    <div class="col-4 col-lg-2">Column</div>
    <div class="col-4 col-lg-2">Column</div>
    <div class="col-4 col-lg-2">Column</div>
    <div class="col-4 col-lg-2">Column</div>
    <div class="col-4 col-lg-2">Column</div>
    <div class="col-4 col-lg-2">Column</div>
  </div>
</div>

તમે સાસ મિક્સિનનો પણ ઉપયોગ કરી શકો છો row-cols():

.element {
  // Three columns to start
  @include row-cols(3);

  // Five columns from medium breakpoint up
  @include media-breakpoint-up(md) {
    @include row-cols(5);
  }
}

માળો

તમારી સામગ્રીને ડિફોલ્ટ ગ્રીડ સાથે નેસ્ટ કરવા માટે, હાલની કૉલમમાં એક નવો .rowઅને કૉલમનો સેટ ઉમેરો . નેસ્ટેડ પંક્તિઓમાં કૉલમનો સમૂહ શામેલ હોવો જોઈએ જે 12 અથવા તેથી ઓછા ઉમેરે છે (તે જરૂરી નથી કે તમે બધી ઉપલબ્ધ 12 કૉલમનો ઉપયોગ કરો)..col-sm-*.col-sm-*

સ્તર 1: .col-sm-3

સ્તર 2: .col-8 .col-sm-6

સ્તર 2: .col-4 .col-sm-6

<div class="container">
  <div class="row">
    <div class="col-sm-3">
      Level 1: .col-sm-3
    </div>
    <div class="col-sm-9">
      <div class="row">
        <div class="col-8 col-sm-6">
          Level 2: .col-8 .col-sm-6
        </div>
        <div class="col-4 col-sm-6">
          Level 2: .col-4 .col-sm-6
        </div>
      </div>
    </div>
  </div>
</div>

સસ

બુટસ્ટ્રેપના સ્ત્રોત Sass ફાઇલોનો ઉપયોગ કરતી વખતે, તમારી પાસે કસ્ટમ, સિમેન્ટીક અને રિસ્પોન્સિવ પેજ લેઆઉટ બનાવવા માટે Sass વેરિયેબલ્સ અને મિક્સિનનો ઉપયોગ કરવાનો વિકલ્પ હોય છે. અમારા પૂર્વવ્યાખ્યાયિત ગ્રીડ વર્ગો ઝડપી પ્રતિભાવ લેઆઉટ માટે ઉપયોગમાં લેવા માટે તૈયાર વર્ગોનો સંપૂર્ણ સ્યુટ પ્રદાન કરવા માટે આ જ ચલો અને મિશ્રણોનો ઉપયોગ કરે છે.

ચલો

ચલો અને નકશા કૉલમની સંખ્યા, ગટરની પહોળાઈ અને મીડિયા ક્વેરી પોઈન્ટ કે જ્યાંથી ફ્લોટિંગ કૉલમ શરૂ કરવા તે નક્કી કરે છે. અમે ઉપરોક્ત દસ્તાવેજીકૃત પૂર્વવ્યાખ્યાયિત ગ્રીડ વર્ગો તેમજ નીચે સૂચિબદ્ધ વૈવિધ્યપૂર્ણ મિશ્રણો માટે આનો ઉપયોગ કરીએ છીએ.

$grid-columns:      12;
$grid-gutter-width: 1.5rem;

$grid-breakpoints: (
  xs: 0,
  sm: 576px,
  md: 768px,
  lg: 992px,
  xl: 1200px,
  xxl: 1400px
);

$container-max-widths: (
  sm: 540px,
  md: 720px,
  lg: 960px,
  xl: 1140px,
  xxl: 1320px
);

મિક્સિન્સ

વ્યક્તિગત ગ્રીડ કૉલમ્સ માટે સિમેન્ટીક CSS જનરેટ કરવા માટે ગ્રીડ વેરીએબલ્સ સાથે મિક્સિનનો ઉપયોગ કરવામાં આવે છે.

// Creates a wrapper for a series of columns
@include make-row();

// Make the element grid-ready (applying everything but the width)
@include make-col-ready();

// Without optional size values, the mixin will create equal columns (similar to using .col)
@include make-col();
@include make-col($size, $columns: $grid-columns);

// Get fancy by offsetting, or changing the sort order
@include make-col-offset($size, $columns: $grid-columns);

ઉદાહરણ ઉપયોગ

તમે તમારા પોતાના વૈવિધ્યપૂર્ણ મૂલ્યોમાં ચલોને સંશોધિત કરી શકો છો, અથવા ફક્ત તેમના ડિફોલ્ટ મૂલ્યો સાથે મિક્સિનનો ઉપયોગ કરી શકો છો. વચ્ચેના અંતર સાથે બે-કૉલમ લેઆઉટ બનાવવા માટે ડિફૉલ્ટ સેટિંગ્સનો ઉપયોગ કરવાનું અહીં ઉદાહરણ છે.

.example-container {
  @include make-container();
  // Make sure to define this width after the mixin to override
  // `width: 100%` generated by `make-container()`
  width: 800px;
}

.example-row {
  @include make-row();
}

.example-content-main {
  @include make-col-ready();

  @include media-breakpoint-up(sm) {
    @include make-col(6);
  }
  @include media-breakpoint-up(lg) {
    @include make-col(8);
  }
}

.example-content-secondary {
  @include make-col-ready();

  @include media-breakpoint-up(sm) {
    @include make-col(6);
  }
  @include media-breakpoint-up(lg) {
    @include make-col(4);
  }
}

મુખ્ય સામગ્રી

ગૌણ સામગ્રી

<div class="example-container">
  <div class="example-row">
    <div class="example-content-main">Main content</div>
    <div class="example-content-secondary">Secondary content</div>
  </div>
</div>

ગ્રીડ કસ્ટમાઇઝ કરી રહ્યા છીએ

અમારા બિલ્ટ-ઇન ગ્રીડ Sass ચલ અને નકશાનો ઉપયોગ કરીને, પૂર્વવ્યાખ્યાયિત ગ્રીડ વર્ગોને સંપૂર્ણપણે કસ્ટમાઇઝ કરવાનું શક્ય છે. સ્તરોની સંખ્યા, મીડિયા ક્વેરી પરિમાણો અને કન્ટેનરની પહોળાઈ બદલો-પછી ફરીથી કમ્પાઇલ કરો.

સ્તંભો અને ગટર

ગ્રીડ સ્તંભોની સંખ્યા Sass વેરીએબલ દ્વારા સુધારી શકાય છે. $grid-columnsદરેક વ્યક્તિગત કૉલમની પહોળાઈ (ટકામાં) જનરેટ કરવા માટે વપરાય છે જ્યારે $grid-gutter-widthકૉલમ ગટર માટે પહોળાઈ સેટ કરે છે.

$grid-columns: 12 !default;
$grid-gutter-width: 1.5rem !default;

ગ્રીડ સ્તરો

કૉલમ્સથી આગળ વધીને, તમે ગ્રીડ સ્તરોની સંખ્યાને પણ કસ્ટમાઇઝ કરી શકો છો. જો તમે ફક્ત ચાર ગ્રીડ સ્તરો ઇચ્છતા હો, તો તમે આના જેવું કંઈક અપડેટ $grid-breakpointsકરશો $container-max-widths:

$grid-breakpoints: (
  xs: 0,
  sm: 480px,
  md: 768px,
  lg: 1024px
);

$container-max-widths: (
  sm: 420px,
  md: 720px,
  lg: 960px
);

Sass ચલ અથવા નકશામાં કોઈપણ ફેરફારો કરતી વખતે, તમારે તમારા ફેરફારો સાચવવા અને ફરીથી કમ્પાઈલ કરવાની જરૂર પડશે. આમ કરવાથી કૉલમની પહોળાઈ, ઑફસેટ્સ અને ઑર્ડરિંગ માટે પૂર્વવ્યાખ્યાયિત ગ્રીડ વર્ગોનો એકદમ નવો સેટ આઉટપુટ થશે. કસ્ટમ બ્રેકપોઇન્ટનો ઉપયોગ કરવા માટે રિસ્પોન્સિવ વિઝિબિલિટી યુટિલિટીઝને પણ અપડેટ કરવામાં આવશે. px(ન rem, em, અથવા %) માં ગ્રીડ મૂલ્યો સેટ કરવાની ખાતરી કરો .