Source

Sistim grid

Anggo grid flexbox munggaran mobile anu kuat pikeun ngawangun perenah tina sagala bentuk sareng ukuran berkat sistem dua belas kolom, lima tingkatan responsif standar, variabel Sass sareng campuran, sareng puluhan kelas anu tos siap.

Kumaha gawéna

Sistem grid Bootstrap ngagunakeun runtuyan wadah, baris, jeung kolom pikeun perenah jeung align eusi. Éta diwangun ku flexbox sareng pinuh responsif. Di handap ieu conto na katingal di-jero kumaha grid datangna babarengan.

Anyar atawa teu wawuh jeung flexbox? Baca ieu CSS Trik flexbox pituduh pikeun latar tukang, terminologi, tungtunan, sarta snippét kode.

Salah sahiji tilu kolom

<div class="container">
  <div class="row">
    <div class="col-sm">
      One of three columns
    </div>
    <div class="col-sm">
      One of three columns
    </div>
    <div class="col-sm">
      One of three columns
    </div>
  </div>
</div>

Conto di luhur nyiptakeun tilu kolom lebar anu sami dina alat anu alit, sedeng, ageung, sareng langkung ageung ngagunakeun kelas grid anu tos disetel. Kolom-kolom éta dipuseurkeun dina halaman sareng indungna .container.

Ngarecahna, ieu cara gawéna:

Wadah nyadiakeun sarana pikeun puseur jeung horisontal Pad eusi situs anjeun. Anggo .containerpikeun lebar piksel responsif atanapi .container-fluidkanggo width: 100%sadaya ukuran viewport sareng alat.
Baris mangrupakeun wrappers pikeun kolom. Unggal kolom boga horizontal padding(disebut talang a) pikeun ngadalikeun spasi antara aranjeunna. Ieu paddinglajeng counteracted dina barisan kalawan margins négatip. Ku cara ieu, sadaya eusi dina kolom anjeun sacara visual dijajarkeun di sisi kénca.
Dina perenah grid, eusi kudu disimpen dina kolom sarta ngan kolom bisa jadi barudak langsung tina barisan.
Hatur nuhun kana flexbox, kolom grid tanpa dieusian widthbakal otomatis perenah salaku kolom lebar sarua. Contona, opat instansi .col-smunggal bakal otomatis jadi 25% lega ti breakpoint leutik jeung up. Tingali bagian kolom perenah otomatis pikeun conto langkung seueur.
Kelas kolom nunjukkeun jumlah kolom anu anjeun hoyong dianggo tina kamungkinan 12 per baris. Janten, upami anjeun hoyong tilu kolom lebar anu sami, anjeun tiasa nganggo .col-4.
Kolom widths diatur dina persentase, ku kituna aranjeunna salawasna cair sareng ukuranana relatif ka unsur indungna.
Kolom gaduh horisontal paddingpikeun nyiptakeun talang antara kolom individu, kumaha ogé, anjeun tiasa ngahapus margintina barisan sareng paddingtina kolom kalayan .no-guttersdina .row.
Pikeun nyieun grid responsif, aya lima breakpoints grid, hiji pikeun tiap breakpoint responsif : sakabeh breakpoints (ekstra leutik), leutik, sedeng, badag, jeung tambahan badag.
Breakpoints grid dumasar kana pamundut média rubak minimum, hartina aranjeunna dilarapkeun ka hiji breakpoint jeung sakabeh nu di luhur eta (misalna .col-sm-4lumaku pikeun leutik, sedeng, badag, jeung alat tambahan badag, tapi lain xsbreakpoint munggaran).
Anjeun tiasa nganggo kelas grid anu tos siapkeun (sapertos .col-4) atanapi campuran Sass pikeun markup semantik langkung.

Waspada kana watesan sareng bug di sabudeureun flexbox , sapertos henteu mampuh ngagunakeun sababaraha elemen HTML salaku wadah fleksibel .

Pilihan grid

Sedengkeun Bootstrap ngagunakeun ems atawa rems pikeun nangtukeun paling ukuran, pxs dipaké pikeun breakpoints grid jeung lebar wadahna. Ieu kusabab lebar viewport aya dina piksel sareng henteu robih sareng ukuran font .

Tingali kumaha aspék sistem grid Bootstrap tiasa dianggo dina sababaraha alat anu nganggo méja anu praktis.

	Ekstra leutik <576px	Leutik ≥576px	Sedeng ≥768px	Badag ≥992px	Ekstra badag ≥1200px
lebar wadahna Max	Euweuh (otomatis)	540px	720px	960px	1140px
Awalan kelas	`.col-`	`.col-sm-`	`.col-md-`	`.col-lg-`	`.col-xl-`
# kolom	12
Lebar talang	30px (15px dina unggal sisi kolom)
Nestable	Sumuhun
Susunan kolom	Sumuhun

Kolom perenah otomatis

Anggo kelas kolom khusus breakpoint pikeun ukuran kolom anu gampang tanpa kelas wilangan anu eksplisit sapertos .col-sm-6.

Sarua-lebar

Contona, di dieu aya dua layouts grid nu dilarapkeun ka unggal alat jeung viewport, ti xska xl. Tambahkeun sajumlah kelas unit-kurang pikeun tiap breakpoint nu peryogi tur unggal kolom bakal lebar sarua.

1 ti 2

2 ti 2

1 ti 3

2 ti 3

3 ti 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>

Kolom sarua-lebar bisa pegat kana sababaraha garis, tapi aya hiji Safari flexbox bug nu nyegah ieu bisa dipake tanpa eksplisit flex-basisatawa border. Aya workarounds pikeun versi browser heubeul, tapi maranéhna teu kudu diperlukeun lamun anjeun up-to-date.

Kolom

<div class="container">
  <div class="row">
    <div class="col">Column</div>
    <div class="col">Column</div>
    <div class="w-100"></div>
    <div class="col">Column</div>
    <div class="col">Column</div>
  </div>
</div>

Nyetel hiji lebar kolom

Layout otomatis pikeun kolom grid flexbox ogé hartosna anjeun tiasa nyetél lebar hiji kolom sareng gaduh kolom duduluran sacara otomatis ngatur ukuran di sakurilingna. Anjeun tiasa nganggo kelas grid anu tos disetel (sapertos anu dipidangkeun di handap), campuran grid, atanapi lebar inline. Catet yén kolom anu sanés bakal ngarobih ukuran henteu paduli lebar kolom tengah.

1 ti 3

2 ti 3 (leuwih lega)

3 ti 3

1 ti 3

2 ti 3 (leuwih lega)

3 ti 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>

Eusi lebar variabel

Anggo col-{breakpoint}-autokelas pikeun ukuran kolom dumasar kana lebar alami eusina.

1 ti 3

Eusi lebar variabel

3 ti 3

1 ti 3

Eusi lebar variabel

3 ti 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>

Sarua-lebar multi-baris

Jieun kolom sarua-lebar nu bentang sababaraha baris ku inserting a .w-100dimana rék kolom megatkeun kana garis anyar. Jieun istirahat responsif ku nyampur .w-100jeung sababaraha utilitas tampilan responsif .

col

<div class="row">
  <div class="col">col</div>
  <div class="col">col</div>
  <div class="w-100"></div>
  <div class="col">col</div>
  <div class="col">col</div>
</div>

kelas responsif

Grid Bootstrap kalebet lima tingkatan kelas anu tos siap pikeun ngawangun perenah responsif anu kompleks. Sesuaikeun ukuran kolom anjeun dina alat anu langkung alit, alit, sedeng, ageung, atanapi langkung ageung kumaha waé anu anjeun pikahoyong.

Kabéh breakpoints

Pikeun grids anu sarua ti pangleutikna alat ka nu panggedéna, make .coljeung .col-*kelas. Sebutkeun kelas wilanganana nalika anjeun peryogi kolom ukuran khusus; disebutkeun, ngarasa Luncat ka lengket .col.

col

col-8

col-4

<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>

Ditumpuk ka horizontal

Ngagunakeun set tunggal .col-sm-*kelas, Anjeun bisa nyieun sistem grid dasar nu dimimitian kaluar tumpuk saméméh jadi horizontal kalawan di breakpoint leutik ( sm).

col-sm-8

col-sm-4

col-sm

<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>

Campur jeung patandingan

Naha anjeun henteu hoyong kolom anjeun ngan saukur tumpukan dina sababaraha tingkatan grid? Anggo kombinasi kelas anu béda pikeun tiap tingkatan upami diperyogikeun. Tingali conto di handap pikeun ide anu langkung saé kumaha éta sadayana jalan.

.col-12 .col-md-8

.col-6 .col-md-4

.col-6

<!-- Stack the columns on mobile by making one full-width and the other half-width -->
<div class="row">
  <div class="col-12 col-md-8">.col-12 .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>

Ngajajar

Paké flexbox alignment utiliti pikeun vertikal sarta horizontal align kolom.

alignment nangtung

Salah sahiji tilu kolom

<div class="container">
  <div class="row align-items-start">
    <div class="col">
      One of three columns
    </div>
    <div class="col">
      One of three columns
    </div>
    <div class="col">
      One of three columns
    </div>
  </div>
  <div class="row align-items-center">
    <div class="col">
      One of three columns
    </div>
    <div class="col">
      One of three columns
    </div>
    <div class="col">
      One of three columns
    </div>
  </div>
  <div class="row align-items-end">
    <div class="col">
      One of three columns
    </div>
    <div class="col">
      One of three columns
    </div>
    <div class="col">
      One of three columns
    </div>
  </div>
</div>

Salah sahiji tilu kolom

<div class="container">
  <div class="row">
    <div class="col align-self-start">
      One of three columns
    </div>
    <div class="col align-self-center">
      One of three columns
    </div>
    <div class="col align-self-end">
      One of three columns
    </div>
  </div>
</div>

alignment horizontal

Salah sahiji dua kolom

<div class="container">
  <div class="row justify-content-start">
    <div class="col-4">
      One of two columns
    </div>
    <div class="col-4">
      One of two columns
    </div>
  </div>
  <div class="row justify-content-center">
    <div class="col-4">
      One of two columns
    </div>
    <div class="col-4">
      One of two columns
    </div>
  </div>
  <div class="row justify-content-end">
    <div class="col-4">
      One of two columns
    </div>
    <div class="col-4">
      One of two columns
    </div>
  </div>
  <div class="row justify-content-around">
    <div class="col-4">
      One of two columns
    </div>
    <div class="col-4">
      One of two columns
    </div>
  </div>
  <div class="row justify-content-between">
    <div class="col-4">
      One of two columns
    </div>
    <div class="col-4">
      One of two columns
    </div>
  </div>
</div>

Taya talang

The talang antara kolom dina kelas grid tos siap kami bisa dihapus kalawan .no-gutters. Ieu ngaluarkeun margins négatip tina .rowjeung horizontal paddingti sakabeh kolom barudak saharita.

Ieu kodeu sumber pikeun nyiptakeun gaya ieu. Catet yén overrides kolom diwengku ukur ka kolom barudak munggaran sareng ditargetkeun ku pamilih atribut . Sanaos ieu ngahasilkeun pamilih anu langkung spésifik, padding kolom masih tiasa disaluyukeun deui sareng utilitas jarak .

Peryogi desain ujung-ka-ujung? Leupaskeun kolot .containeratawa .container-fluid.

.no-gutters {
  margin-right: 0;
  margin-left: 0;

  > .col,
  > [class*="col-"] {
    padding-right: 0;
    padding-left: 0;
  }
}

Dina prakna, ieu kumaha rupana. Catet yén anjeun tiasa teras-terasan ngagunakeun ieu sareng sadaya kelas grid anu tos siapkeun (kalebet lebar kolom, tingkatan responsif, susunan ulang, sareng seueur deui).

.col-12 .col-sm-6 .col-md-8

.col-6 .col-md-4

<div class="row no-gutters">
  <div class="col-12 col-sm-6 col-md-8">.col-12 .col-sm-6 .col-md-8</div>
  <div class="col-6 col-md-4">.col-6 .col-md-4</div>
</div>

Bungkus kolom

Lamun leuwih ti 12 kolom disimpen dina hiji baris, unggal grup kolom tambahan bakal, salaku hiji unit, mungkus kana garis anyar.

.col-9

.col-4
Kusabab 9 + 4 = 13 > 12, div 4-kolom-lega ieu bakal dibungkus kana garis anyar salaku hiji Unit contiguous.

.col-6
kolom saterusna nuluykeun sapanjang garis anyar.

<div class="row">
  <div class="col-9">.col-9</div>
  <div class="col-4">.col-4<br>Since 9 + 4 = 13 &gt; 12, this 4-column-wide div gets wrapped onto a new line as one contiguous unit.</div>
  <div class="col-6">.col-6<br>Subsequent columns continue along the new line.</div>
</div>

Kolom ngarecah

Megatkeun kolom ka garis anyar dina flexbox merlukeun hack leutik: tambahkeun hiji unsur jeung width: 100%dimana wae Anjeun hoyong mungkus kolom anjeun ka garis anyar. Biasana ieu dilakonan ku sababaraha .rows, tapi teu unggal palaksanaan métode bisa akun pikeun ieu.

.col-6 .col-sm-3

<div class="row">
  <div class="col-6 col-sm-3">.col-6 .col-sm-3</div>
  <div class="col-6 col-sm-3">.col-6 .col-sm-3</div>

  <!-- Force next columns to break to new line -->
  <div class="w-100"></div>

  <div class="col-6 col-sm-3">.col-6 .col-sm-3</div>
  <div class="col-6 col-sm-3">.col-6 .col-sm-3</div>
</div>

Anjeun ogé tiasa nerapkeun istirahat ieu dina titik putus khusus sareng utilitas tampilan responsif kami .

.col-6 .col-sm-4

<div class="row">
  <div class="col-6 col-sm-4">.col-6 .col-sm-4</div>
  <div class="col-6 col-sm-4">.col-6 .col-sm-4</div>

  <!-- Force next columns to break to new line at md breakpoint and up -->
  <div class="w-100 d-none d-md-block"></div>

  <div class="col-6 col-sm-4">.col-6 .col-sm-4</div>
  <div class="col-6 col-sm-4">.col-6 .col-sm-4</div>
</div>

Susunan deui

Mesen kelas

Paké .order-kelas pikeun ngadalikeun urutan visual eusi Anjeun. Kelas ieu responsif, ku kituna anjeun tiasa nyetél orderku breakpoint (contona, .order-1.order-md-2). Ngawengku pangrojong pikeun 1ngalangkungan 12sadaya lima tingkatan grid.

Kahiji, tapi teu diurutkeun

Kadua, tapi panungtungan

Katilu, tapi kahiji

<div class="container">
  <div class="row">
    <div class="col">
      First, but unordered
    </div>
    <div class="col order-12">
      Second, but last
    </div>
    <div class="col order-1">
      Third, but first
    </div>
  </div>
</div>

Aya ogé kelas responsif .order-firstsareng .order-lastanu ngarobih orderunsur ku cara nerapkeun order: -1sareng order: 13( order: $columns + 1), masing-masing. Kelas-kelas ieu ogé tiasa dicampurkeun sareng .order-*kelas anu wilanganana upami diperyogikeun.

Mimiti, tapi panungtung

Kadua, tapi henteu teratur

Katilu, tapi kahiji

<div class="container">
  <div class="row">
    <div class="col order-last">
      First, but last
    </div>
    <div class="col">
      Second, but unordered
    </div>
    <div class="col order-first">
      Third, but first
    </div>
  </div>
</div>

Ngimbangkeun kolom

Anjeun tiasa ngimbangan kolom grid ku dua cara: .offset-kelas grid responsif kami sareng utilitas margin kami . Kelas grid ukuranana cocog kolom bari margins leuwih mangpaat pikeun layouts gancang dimana lebar offset nyaeta variabel.

kelas offset

Pindahkeun kolom ka katuhu nganggo .offset-md-*kelas. Kelas ieu ningkatkeun margin kénca kolom ku *kolom. Contona, .offset-md-4ngalir .col-md-4ngaliwatan opat kolom.

.col-md-4

.col-md-4 .offset-md-4

.col-md-3 .offset-md-3

.col-md-6 .offset-md-3

<div class="row">
  <div class="col-md-4">.col-md-4</div>
  <div class="col-md-4 offset-md-4">.col-md-4 .offset-md-4</div>
</div>
<div class="row">
  <div class="col-md-3 offset-md-3">.col-md-3 .offset-md-3</div>
  <div class="col-md-3 offset-md-3">.col-md-3 .offset-md-3</div>
</div>
<div class="row">
  <div class="col-md-6 offset-md-3">.col-md-6 .offset-md-3</div>
</div>

Salian ngabersihan kolom dina titik putus responsif, anjeun panginten kedah ngareset offset. Tempo ieu aksi dina conto grid .

.col-sm-5 .col-md-6

.col-sm-5 .offset-sm-2 .col-md-6 .offset-md-0

.col-sm-6 .col-md-5 .col-lg-6

.col-sm-6 .col-md-5 .offset-md-2 .col-lg-6 .offset-lg-0

<div class="row">
  <div class="col-sm-5 col-md-6">.col-sm-5 .col-md-6</div>
  <div class="col-sm-5 offset-sm-2 col-md-6 offset-md-0">.col-sm-5 .offset-sm-2 .col-md-6 .offset-md-0</div>
</div>

<div class="row">
  <div class="col-sm-6 col-md-5 col-lg-6">.col-sm-6 .col-md-5 .col-lg-6</div>
  <div class="col-sm-6 col-md-5 offset-md-2 col-lg-6 offset-lg-0">.col-sm-6 .col-md-5 .offset-md-2 .col-lg-6 .offset-lg-0</div>
</div>

Utiliti margin

Kalayan pindah ka flexbox di v4, anjeun tiasa nganggo utilitas margin sapertos .mr-automaksakeun kolom duduluran ti hiji anu sanés.

.col-md-4

.col-md-4 .ml-otomatis

.col-md-3 .ml-md-otomatis

.col-otomatis .mr-otomatis

.col-otomatis

<div class="row">
  <div class="col-md-4">.col-md-4</div>
  <div class="col-md-4 ml-auto">.col-md-4 .ml-auto</div>
</div>
<div class="row">
  <div class="col-md-3 ml-md-auto">.col-md-3 .ml-md-auto</div>
  <div class="col-md-3 ml-md-auto">.col-md-3 .ml-md-auto</div>
</div>
<div class="row">
  <div class="col-auto mr-auto">.col-auto .mr-auto</div>
  <div class="col-auto">.col-auto</div>
</div>

Nyarang

Pikeun nyarang eusi anjeun sareng grid standar, tambahkeun kolom anyar .rowsareng set dina .col-sm-*kolom anu tos aya .col-sm-*. Baris Nested kedah ngawengku sakumpulan kolom nu nambahan nepi ka 12 atawa leuwih saeutik (teu diperlukeun nu make sakabeh 12 kolom sadia).

Tingkat 1: .col-sm-9

Tingkat 2: .col-8 .col-sm-6

Tingkat 2: .col-4 .col-sm-6

<div class="row">
  <div class="col-sm-9">
    Level 1: .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>

Sass mixins

Nalika nganggo file Sass sumber Bootstrap, anjeun gaduh pilihan ngagunakeun variabel Sass sareng mixin pikeun nyiptakeun perenah halaman khusus, semantik, sareng responsif. Kelas grid tos siap kami nganggo ieu variabel sarua jeung mixins nyadiakeun sakabeh suite kelas siap pake pikeun layouts responsif gancang.

Variabel

Variabel sareng peta nangtukeun jumlah kolom, lebar talang, sareng titik query media dimana ngawitan kolom ngambang. Kami nganggo ieu pikeun ngahasilkeun kelas grid anu tos siap didokumentasikeun di luhur, ogé pikeun campuran khusus anu didaptarkeun di handap.

$grid-columns:      12;
$grid-gutter-width: 30px;

$grid-breakpoints: (
  // Extra small screen / phone
  xs: 0,
  // Small screen / phone
  sm: 576px,
  // Medium screen / tablet
  md: 768px,
  // Large screen / desktop
  lg: 992px,
  // Extra large screen / wide desktop
  xl: 1200px
);

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

Campuran

Mixins dipaké ditéang jeung variabel grid keur ngahasilkeun CSS semantis pikeun kolom grid individu.

// 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();
@include make-col($size, $columns: $grid-columns);

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

Conto pamakéan

Anjeun tiasa ngarobih variabel kana nilai khusus anjeun, atanapi ngan ukur nganggo mixin kalayan nilai standarna. Ieu conto ngagunakeun setélan standar pikeun nyieun tata perenah dua kolom kalayan sela antara.

.example-container {
  width: 800px;
  @include make-container();
}

.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);
  }
}

eusi utama

eusi sékundér

<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>

Ngaropea grid

Nganggo variabel sareng peta Sass grid anu diwangun, anjeun tiasa ngarobih kelas grid anu tos siap. Robah jumlah undakan, dimensi query media, sareng lebar wadahna-teras kompilkeun deui.

Kolom jeung talang

Jumlah kolom grid bisa dirobah via variabel Sass. $grid-columnsdipaké pikeun ngahasilkeun lebar (dina persen) unggal kolom individu bari $grid-gutter-widthngamungkinkeun lebar breakpoint-spésifik nu dibagi merata sakuliah padding-leftsarta padding-rightpikeun talang kolom.

$grid-columns: 12 !default;
$grid-gutter-width: 30px !default;

Tiers grid

Pindah saluareun kolom sorangan, anjeun ogé tiasa ngaropea jumlah tiers grid. Upami anjeun ngan ukur hoyong opat undakan grid, anjeun badé ngapdet $grid-breakpointssareng $container-max-widthska anu sapertos kieu:

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

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

Nalika ngalakukeun parobahan naon waé kana variabel atanapi peta Sass, anjeun kedah nyimpen parobihan anjeun sareng nyusun ulang. Lakukeun kitu bakal ngahasilkeun set anyar kelas grid tos siap pikeun lebar kolom, offsets, sarta susunan. Utiliti pisibilitas responsif ogé bakal diénggalan pikeun nganggo titik putus khusus. Pastikeun pikeun ngeset nilai grid dina px(sanes rem, em, atawa %).