Grid nhyehyɛe

Fa yɛn mobile-first flexbox grid a ahoɔden wom no si nhyehyeɛ a ɛwɔ nsusuwii ne ne kɛseɛ nyinaa aseda a ɛwɔ adum dumienu nhyehyɛeɛ, default mmuaeɛ tiers anum, Sass variables ne mixins, ne adesua ahodoɔ du du pii a wɔadi kan akyerɛkyerɛ mu.

Sɛnea ɛyɛ adwuma

Bootstrap grid nhyehyɛe no de containers, rows, ne columns ahorow a ɛtoatoa so di dwuma de hyehyɛ nneɛma no na ɛne no hyia. Wɔde flexbox na esii na ɛyɛ nea ɛyɛ adwuma yiye. Ase hɔ no yɛ nhwɛso ne hwɛ a emu dɔ a ɛfa sɛnea grid no bom ho.

Woyɛ foforo wɔ flexbox mu anaasɛ wunnim? Kenkan CSS Tricks flexbox akwankyerɛ yi ma akyi, nsɛmfua, akwankyerɛ, ne koodu nsɛm nketenkete.

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

Nhwɛsoɔ a ɛwɔ atifi hɔ no yɛ nkorabata mmiɛnsa a ne tɛtrɛtɛ yɛ pɛ wɔ mfiri nketewa, mfimfini, akɛseɛ, ne akɛseɛ a ɛboro soɔ so de yɛn grid adesua ahodoɔ a yɛadi kan akyerɛkyerɛ mu no di dwuma. Saa nkyerɛwde ahorow no wɔ kratafa no mfinimfini a ɔwofo no ka ho .container.

Sɛ yɛbubu no a, sɛnea ɛyɛ adwuma ni:

• Containers ma ɔkwan a wobɛfa so ahyɛ wo site no mu nsɛm no mfinimfini na woayɛ no tẽẽ. Fa di dwuma .containerma pixel trɛw a ɛyɛ mmuae anaasɛ .container-fluidma width: 100%wɔ viewport ne mfiri akɛse nyinaa so.
• Rows yɛ ntama a wɔde kyekyere adum ho. Adum biara wɔ horizontal padding(a wɔfrɛ no gutter) a wɔde hwɛ baabi a ɛda wɔn ntam no so. paddingAfei wɔde nsensanee a enye siw eyi ano wɔ nkyerɛwde ahorow no so . Saa kwan yi so no, nsɛm a ɛwɔ wo nkyerɛwde ahorow no mu nyinaa yɛ nea wɔde aniwa hu a ɛne benkum so hyia.
• Wɔ grid nhyehyeɛ mu no, ɛsɛ sɛ wɔde nsɛm a ɛwɔ mu no to nkorabata mu na nkorabata nko ara na ɛbɛtumi ayɛ row ahorow no mma ntɛm ara.
• Esiane flexbox nti, grid columns a enni specified widthno bɛhyehyɛ ne ho sɛ columns a ne tɛtrɛtɛ yɛ pɛ. Sɛ nhwɛso no, nhwɛso anan a .col-smemu biara bɛyɛ 25% trɛw ankasa fi breakpoint ketewa no ne soro. Hwɛ auto-layout columns ɔfã no ma nhwɛso pii.
• Kɔlam adesua ahorow kyerɛ kɔla dodow a wopɛ sɛ wode di dwuma wɔ 12 a ebetumi aba wɔ row biara mu no mu. Enti, sɛ wopɛ sɛ nkyerɛwde abiɛsa a ne tɛtrɛtɛ yɛ pɛ twa a, wubetumi de adi dwuma .col-4.
• Wɔde kɔla widths ahyɛ ɔha mu nkyekyɛmu mu, enti ɛyɛ nsuo ne kɛseɛ berɛ biara sɛ wɔde toto wɔn awofoɔ element ho.
• Columns wɔ horizontal paddinga ɛbɛma gutters no wɔ columns ankorankoro ntam, nanso, wubetumi ayi marginafi rows ne paddingfi columns no mu ne .no-gutterson the .row.
• Sɛnea ɛbɛyɛ a grid no bɛtumi ayɛ adwuma no, grid no breakpoints anum na ɛwɔ hɔ, baako ma breakpoint biara a ɛyɛ mmuaeɛ : breakpoints no nyinaa (ketewa a ɛboro soɔ), nketewa, mfimfini, kɛseɛ, ne kɛseɛ a ɛboro soɔ.
• Grid breakpoints gyina minimum width media queries so, a ɛkyerɛ sɛ ɛfa saa breakpoint biako ne wɔn a ɛwɔ n’atifi nyinaa ho (sɛ nhwɛso no, .col-sm-4ɛfa mfiri nketewa, mfinimfini, akɛse, ne akɛse a ɛboro so ho, nanso ɛnyɛ xsbreakpoint a edi kan no).
• Wubetumi de grid adesua ahorow a wɔadi kan akyerɛkyerɛ mu (te sɛ .col-4) anaa Sass mixins adi dwuma ama nkyerɛase agyiraehyɛde pii.

Hu anohyeto ne mfomso a ɛwɔ flexbox ho , te sɛ HTML nneɛma bi a wuntumi mfa nni dwuma sɛ flex containers .

Grid a wobetumi apaw

Bere a Bootstrap de ems anaa rems di dwuma de kyerɛkyerɛ akɛse dodow no ara mu no, pxwɔde s di dwuma ma grid breakpoints ne container widths. Eyi te saa efisɛ viewport no trɛw yɛ pixels na ɛnsakra ne font kɛse no .

Hwɛ sɛnea Bootstrap grid nhyehyɛe no afã horow yɛ adwuma wɔ mfiri ahorow pii a ɛwɔ pon a ɛyɛ mmerɛw so.

Auto-layout nkyerɛwde ahorow

Fa breakpoint-specific column classes di dwuma ma column sizing a ɛnyɛ den a enni class a wɔde nɔma a ɛda adi pefee te sɛ .col-sm-6.

Ntrɛwmu a ɛyɛ pɛ

Sɛ nhwɛso no, grid nhyehyɛe abien a ɛfa mfiri ne viewport biara ho ni, efi xskosi xl. Fa unit-less class dodow biara ka ho ma breakpoint biara a wuhia na column biara bɛyɛ ne tɛtrɛtɛ koro.

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

Wobetumi abubu nkorabata a ne tɛtrɛtɛ yɛ pɛ no ayɛ no nkyerɛwde ahorow pii, nanso na Safari flexbox bɔne bi wɔ hɔ a ɛmma eyi ntumi nyɛ adwuma a enni flex-basisanaa border. Workarounds wɔ hɔ ma browser version dedaw no, nanso ɛnsɛ sɛ ɛho hia sɛ wowɔ foforo a.

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

Setting column biako trɛw

Auto-layout for flexbox grid columns nso kyerɛ sɛ wobɛtumi ahyɛ column baako trɛw na woama anuanom columns no ayɛ ne kɛseɛ asesa ne kɛseɛ atwa ho ahyia. Wubetumi de grid adesua ahorow a wɔadi kan akyerɛkyerɛ mu (sɛnea wɔakyerɛ wɔ ase hɔ no), grid mixins, anaa inline ntrɛwmu adi dwuma. Hyɛ no nsow sɛ nkyerɛwde afoforo no bɛsesa ne kɛse ɛmfa ho sɛnea mfinimfini adum no trɛw te.

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

Nsɛm a ɛwɔ ntrɛwmu a ɛsakrasakra

Fa col-{breakpoint}-autoadesua ahorow di dwuma de ma nkyerɛwde ahorow no kɛse gyina wɔn mu nsɛm no abɔde mu trɛw so.

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

Nneɛma pii a ne tɛtrɛtɛ yɛ pɛ

Yɛ nkyerɛwde a ne tɛtrɛtɛ yɛ pɛ a ɛtrɛw row ahorow pii mu denam .w-100baabi a wopɛ sɛ nkyerɛwde no bubu kɔ nkyerɛwde foforo a wode bɛhyɛ mu no so. Ma ahomegye no nyɛ nea ɛyɛ adwuma denam afrafra a wode bɛfrafra nneɛma .w-100bi a ɛkyerɛ nneɛma a ɛyɛ adwuma no so .

<div class="container">
  <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>
</div>

Adesua ahorow a wɔde mmuae ma

Bootstrap no grid no ka tiers anum a wɔadi kan akyerɛkyerɛ mu adesua ahorow a wɔde besisi mmuae nhyehyɛe ahorow a ɛyɛ den. Yɛ wo columns no kɛse wɔ mfiri nketewa, nketewa, mfinimfini, akɛse, anaa akɛse a ɛboro so so sɛnea wuhu sɛ ɛfata.

Nneɛma a wɔde paapae mu nyinaa

Sɛ wopɛ grids a ɛyɛ pɛ fi mfiri nketewa so kosi kɛse so a, fa .colne .col-*adesua ahorow no di dwuma. Kyerɛ adesuakuw a wɔde nɔma ahyɛ mu bere a wuhia kɔla a ne kɛse titiriw; anyɛ saa a, ntwentwɛn wo nan ase sɛ wobɛbata .col.

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

Wɔaboaboa ano akɔ soro

Sɛ wode .col-sm-*adesua ahorow biako di dwuma a, wubetumi ayɛ grid nhyehyɛe titiriw a efi ase a wɔaboaboa ano na ɛbɛyɛ horizontal wɔ breakpoint ketewa ( 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>

Fa fra na fa fra mu

Wompɛ sɛ wo columns no bɛ stack kɛkɛ wɔ grid tiers binom mu? Fa adesua ahorow a wɔaka abom di dwuma ma tier biara sɛnea ɛho hia. Hwɛ nhwɛso a ɛwɔ ase ha no na woanya sɛnea ne nyinaa yɛ adwuma no ho adwene pa.

<div class="container">
  <!-- 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>
</div>

Nsu a ɛkɔ nsu mu

Gutters betumi mmuae asiesie denam breakpoint-specific padding ne negative margin utility adesuakuw ahorow so. Sɛ wopɛ sɛ wosakra gutters no wɔ row bi a wɔde ama mu a, pair a negative margin utility wɔ .rowne matching padding utilities wɔ .cols no so. Ebia ɛho behia sɛ wɔyɛ nsakrae wɔ .containeranaa ɔwofo no nso mu na wɔakwati sɛ ɛbɛboro so a wɔmpɛ, de adi dwuma bio matching padding utility..container-fluid

Nhwɛsoɔ a ɛfa sɛdeɛ wobɛsesa Bootstrap grid no wɔ ( lg) breakpoint kɛseɛ no ne nea ɛboro saa no nie. Yɛama .colpadding no akɔ soro ne .px-lg-5, counteracted that with .mx-lg-n5on the parent .rowna afei yɛasiesie .containerwrapper no ne .px-lg-5.

<div class="container px-lg-5">
  <div class="row mx-lg-n5">
    <div class="col py-3 px-lg-5 border bg-light">Custom column padding</div>
    <div class="col py-3 px-lg-5 border bg-light">Custom column padding</div>
  </div>
</div>

Nneɛma a Wɔde Di Dwuma

Fa flexbox alignment utilities di dwuma de hyɛ column ahorow no hyia wɔ vertical ne horizontally.

Nhyiam a ɛda hɔ gyina hɔ

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

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

Horizontal a wɔde hyɛ mu

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

Gutters biara nni hɔ

Wobetumi de .no-gutters. Eyi yi margins a enye no fi .rowne nea ɛwɔ soro no paddingfi mmofra adum a ɛwɔ hɔ ntɛm nyinaa nyinaa mu.

Here’s the source code for creating these styles. Note that column overrides are scoped to only the first children columns and are targeted via attribute selector. While this generates a more specific selector, column padding can still be further customized with spacing utilities.

Need an edge-to-edge design? Drop the parent .container or .container-fluid.

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

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

In practice, here’s how it looks. Note you can continue to use this with all other predefined grid classes (including column widths, responsive tiers, reorders, and more).

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

Column wrapping

If more than 12 columns are placed within a single row, each group of extra columns will, as one unit, wrap onto a new line.

<div class="container">
  <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>
</div>

Column breaks

Breaking columns to a new line in flexbox requires a small hack: add an element with width: 100% wherever you want to wrap your columns to a new line. Normally this is accomplished with multiple .rows, but not every implementation method can account for this.

<div class="container">
  <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>
</div>

You may also apply this break at specific breakpoints with our responsive display utilities.

<div class="container">
  <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>
</div>

Reordering

Order classes

Use .order- classes for controlling the visual order of your content. These classes are responsive, so you can set the order by breakpoint (e.g., .order-1.order-md-2). Includes support for 1 through 12 across all five grid tiers.

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

There are also responsive .order-first and .order-last classes that change the order of an element by applying order: -1 and order: 13 (order: $columns + 1), respectively. These classes can also be intermixed with the numbered .order-* classes as needed.

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

Offsetting columns

You can offset grid columns in two ways: our responsive .offset- grid classes and our margin utilities. Grid classes are sized to match columns while margins are more useful for quick layouts where the width of the offset is variable.

Offset classes

Move columns to the right using .offset-md-* classes. These classes increase the left margin of a column by * columns. For example, .offset-md-4 moves .col-md-4 over four columns.

<div class="container">
  <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>
</div>

In addition to column clearing at responsive breakpoints, you may need to reset offsets. See this in action in the grid example.

<div class="container">
  <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>
</div>

Margin utilities

With the move to flexbox in v4, you can use margin utilities like .mr-auto to force sibling columns away from one another.

<div class="container">
  <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>
</div>

Nesting

To nest your content with the default grid, add a new .row and set of .col-sm-* columns within an existing .col-sm-* column. Nested rows should include a set of columns that add up to 12 or fewer (it is not required that you use all 12 available columns).

<div class="container">
  <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>
</div>

Sass mixins

When using Bootstrap’s source Sass files, you have the option of using Sass variables and mixins to create custom, semantic, and responsive page layouts. Our predefined grid classes use these same variables and mixins to provide a whole suite of ready-to-use classes for fast responsive layouts.

Variables

Variables and maps determine the number of columns, the gutter width, and the media query point at which to begin floating columns. We use these to generate the predefined grid classes documented above, as well as for the custom mixins listed below.

$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
);

Mixins

Mixins are used in conjunction with the grid variables to generate semantic CSS for individual grid columns.

// 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);

Example usage

You can modify the variables to your own custom values, or just use the mixins with their default values. Here’s an example of using the default settings to create a two-column layout with a gap between.

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

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

Customizing the grid

Using our built-in grid Sass variables and maps, it’s possible to completely customize the predefined grid classes. Change the number of tiers, the media query dimensions, and the container widths—then recompile.

Columns and gutters

The number of grid columns can be modified via Sass variables. $grid-columns is used to generate the widths (in percent) of each individual column while $grid-gutter-width sets the width for the column gutters.

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

Grid tiers

Sɛ wokɔ akyiri sen columns no ankasa a, wubetumi nso ayɛ grid tiers dodow no ho nhyehyɛe. Sɛ wopɛ grid tiers anan pɛ a, anka wobɛma $grid-breakpointsne no ayɛ foforo $container-max-widthsakɔ biribi te sɛ eyi mu:

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

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

Sɛ woreyɛ nsakraeɛ biara wɔ Sass variables anaa maps no mu a, ɛho bɛhia sɛ wode wo nsakraeɛ no sie na wosan boaboa ano. Saa a wobɛyɛ no bɛma woanya grid adesua ahorow a wɔadi kan akyerɛkyerɛ mu ama column widths, offsets, ne ordering foforo koraa. Wɔbɛsan ayɛ mmuaeɛ visibility utilities no foforɔ de adi dwuma wɔ custom breakpoints no mu. Hwɛ sɛ wode grid values ​​bɛhyɛ px(ɛnyɛ rem, em, anaa %).