ꯁꯤ.ꯑꯦꯁ.ꯑꯦꯁ.ꯀꯤ ꯒ꯭ꯔꯤꯗ ꯂꯩ꯫

ꯕꯨꯠꯁ꯭ꯠꯔꯥꯄꯀꯤ ꯗꯤꯐꯣꯜꯇ ꯒ꯭ꯔꯤꯗ ꯁꯤꯁ꯭ꯇꯦꯝ ꯑꯁꯤꯅꯥ ꯃꯤꯑꯣꯏ ꯂꯥꯈ ꯀꯌꯥꯅꯥ ꯍꯣꯠꯅꯈꯤꯕꯥ ꯑꯃꯁꯨꯡ ꯇꯦꯁ꯭ꯠ ꯇꯧꯈꯤꯕꯥ ꯆꯍꯤ ꯇꯔꯥꯒꯤ ꯈꯨꯖꯤꯡ ꯑꯃꯥ ꯍꯦꯟꯅꯥ ꯁꯤ.ꯑꯦꯁ.ꯑꯦꯁ. ꯑꯗꯨꯕꯨ, ꯃꯁꯤ ꯑꯅꯧꯕꯥ ꯁꯤ.ꯑꯦꯁ.ꯑꯦꯁ.ꯀꯤ ꯒ꯭ꯔꯤꯗꯒꯨꯝꯕꯥ ꯕ꯭ꯔꯥꯎꯖꯔꯁꯤꯡꯗꯥ ꯑꯩꯈꯣꯌꯅꯥ ꯎꯕꯥ ꯐꯪꯂꯤꯕꯥ ꯃꯣꯗꯔꯟ ꯁꯤ.ꯑꯦꯁ.ꯑꯦꯁ.ꯀꯤ ꯐꯤꯆꯔ ꯑꯃꯁꯨꯡ ꯇꯦꯛꯅꯤꯛ ꯀꯌꯥ ꯌꯥꯑꯣꯗꯅꯥꯁꯨ ꯁꯦꯃꯈꯤꯕꯅꯤ꯫

ꯃꯁꯤ ꯀꯔꯝꯅꯥ ꯊꯕꯛ ꯇꯧꯕꯒꯦ꯫

ꯕꯨꯠꯁ꯭ꯠꯔꯥꯞ ꯵ꯒꯥ ꯂꯣꯌꯅꯅꯥ, ꯑꯩꯈꯣꯌꯅꯥ ꯁꯤ.ꯑꯦꯁ.ꯑꯦꯁ.ꯒ꯭ꯔꯤꯗꯇꯥ ꯁꯦꯃꯒꯠꯄꯥ ꯇꯣꯉꯥꯅꯕꯥ ꯒ꯭ꯔꯤꯗ ꯁꯤꯁ꯭ꯇꯦꯝ ꯑꯃꯥ ꯏꯅꯦꯕꯜ ꯇꯧꯕꯒꯤ ꯑꯣꯄꯁꯟ ꯍꯥꯄꯆꯤꯜꯂꯦ, ꯑꯗꯨꯕꯨ ꯕꯨꯠꯁ꯭ꯠꯔꯥꯞ ꯇ꯭ꯌꯨꯏꯁ꯭ꯠ ꯑꯃꯒꯥ ꯂꯣꯌꯅꯅꯥ꯫ ꯑꯗꯣꯝꯅꯥ ꯍꯧꯖꯤꯀꯁꯨ ꯔꯦꯁ꯭ꯄꯣꯟꯁꯤꯕꯜ ꯂꯦꯑꯥꯎꯇꯁꯤꯡ ꯁꯦꯃꯒꯠꯅꯕꯥ ꯑꯗꯣꯝꯅꯥ ꯋꯥꯈꯜ ꯈꯅꯕꯥ ꯌꯥꯕꯥ ꯀ꯭ꯂꯥꯁꯁꯤꯡ ꯐꯪꯏ, ꯑꯗꯨꯕꯨ ꯍꯨꯗꯀꯤ ꯃꯈꯥꯗꯥ ꯇꯣꯉꯥꯅꯕꯥ ꯑꯦꯞꯔꯣꯆ ꯑꯃꯒꯥ ꯂꯣꯌꯅꯅꯥ꯫

• ꯁꯤ.ꯑꯦꯁ.ꯑꯦꯁ.ꯀꯤ ꯒ꯭ꯔꯤꯗ ꯑꯁꯤ ꯑꯣꯄꯁꯟ-ꯏꯟ ꯑꯣꯏꯔꯤ꯫ ꯁꯦꯇꯤꯡ ꯇꯧꯗꯨꯅꯥ ꯗꯤꯐꯣꯜꯇ ꯒ꯭ꯔꯤꯗ ꯁꯤꯁ꯭ꯇꯦꯝ ꯑꯗꯨ ꯗꯤꯁꯦꯕꯜ ꯇꯧ $enable-grid-classes: falseꯑꯃꯁꯨꯡ ꯁꯦꯇꯤꯡ ꯇꯧꯗꯨꯅꯥ ꯁꯤ.ꯑꯦꯁ.ꯑꯦꯁ $enable-cssgrid: true. ꯑꯗꯨꯗꯒꯤ, ꯅꯍꯥꯛꯀꯤ ꯁꯥꯁ ꯑꯗꯨ ꯑꯃꯨꯛ ꯍꯟꯅꯥ ꯀꯝꯄꯥꯏꯜ ꯇꯧ꯫

• ꯒꯤ ꯏꯟꯁꯇꯦꯟꯁꯁꯤꯡ ꯑꯗꯨ ꯃꯍꯨꯠ .rowꯁꯤꯜꯂꯨ .grid. .gridꯀ꯭ꯂꯥꯁ ꯑꯗꯨꯅꯥ ꯅꯍꯥꯛꯀꯤ HTML ꯑꯗꯨꯒꯥ ꯂꯣꯌꯅꯅꯥ ꯅꯍꯥꯛꯅꯥ ꯁꯦꯃꯒꯠꯄꯥ ꯑꯃꯥ ꯁꯦꯠ ꯇꯧꯏ ꯑꯃꯁꯨꯡ display: gridꯁꯦꯝꯃꯤ꯫grid-template

• .col-*ꯀ꯭ꯂꯥꯁꯁꯤꯡ ꯑꯁꯤ .g-col-*ꯀ꯭ꯂꯥꯁꯁꯤꯡꯅꯥ ꯃꯍꯨꯠ ꯁꯤꯜꯂꯨ꯫ ꯃꯁꯤꯒꯤ ꯃꯔꯃꯗꯤ ꯑꯩꯈꯣꯌꯒꯤ ꯁꯤ.ꯑꯦꯁ.ꯑꯦꯁ.ꯀꯤ ꯒ꯭ꯔꯤꯗ ꯀꯣꯂꯃꯁꯤꯡꯅꯥ grid-columnꯄ꯭ꯔꯣꯄꯔꯇꯤ ꯑꯁꯤ width.

• ꯀꯣꯂꯝ ꯑꯃꯁꯨꯡ ꯒꯇꯔ ꯁꯥꯏꯖꯁꯤꯡ ꯑꯁꯤ ꯁꯤ.ꯑꯦꯁ.ꯑꯦꯁ.ꯀꯤ ꯚꯦꯔꯤꯑꯦꯕꯂꯁꯤꯡꯒꯤ ꯈꯨꯠꯊꯥꯡꯗꯥ ꯁꯦꯠ ꯇꯧꯏ꯫ ꯍꯥꯌꯔꯤꯕꯁꯤꯡ ꯑꯁꯤ ꯃꯃꯥ-ꯃꯄꯥꯗꯥ ꯁꯦꯠ ꯇꯧ .gridꯑꯃꯁꯨꯡ ꯅꯍꯥꯛꯅꯥ ꯄꯥꯝꯂꯤꯕꯃꯈꯩ, ꯏꯅꯂꯥꯏꯟ ꯅꯠꯠꯔꯒꯥ ꯁ꯭ꯇꯥꯏꯂꯁꯤꯠ ꯑꯃꯗꯥ, --bs-columnsꯑꯃꯁꯨꯡ --bs-gap.

ꯇꯨꯡꯗꯥ, gapꯄ꯭ꯔꯣꯄꯔꯇꯤ ꯑꯁꯤꯅꯥ ꯐ꯭ꯂꯦꯛꯁꯕꯣꯛꯁꯀꯤꯗꯃꯛꯇꯥ ꯆꯥꯎꯔꯥꯛꯅꯥ ꯃꯄꯨꯡ ꯐꯥꯕꯥ ꯕ꯭ꯔꯥꯎꯖꯔ ꯁꯄꯣꯔꯠ ꯐꯪꯕꯅꯥ ꯃꯔꯝ ꯑꯣꯏꯗꯨꯅꯥ ꯕꯨꯠꯁ꯭ꯠꯔꯥꯞ ꯑꯁꯤ ꯍꯥꯏꯕ꯭ꯔꯤꯗ ꯁꯣꯂꯨꯁꯟ ꯑꯃꯗꯥ ꯍꯣꯡꯗꯣꯀꯄꯥ ꯌꯥꯏ꯫

ꯃꯔꯨꯑꯣꯏꯕꯥ ꯈꯦꯠꯅꯕꯁꯤꯡ꯫

ꯗꯤꯐꯣꯜꯇ ꯒ꯭ꯔꯤꯗ ꯁꯤꯁ꯭ꯇꯦꯃꯒꯥ ꯆꯥꯡꯗꯝꯅꯕꯗꯥ:

• ꯐ꯭ꯂꯦꯛꯁ ꯌꯨꯇꯤꯂꯤꯇꯤꯁꯤꯡꯅꯥ ꯁꯤ.ꯑꯦꯁ.ꯑꯦꯁ.ꯀꯤ ꯒ꯭ꯔꯤꯗ ꯀꯣꯂꯃꯁꯤꯡꯗꯥ ꯆꯞ ꯃꯥꯟꯅꯕꯥ ꯃꯑꯣꯡꯗꯥ ꯑꯀꯥꯌꯕꯥ ꯄꯤꯗꯦ꯫

• ꯒꯦꯄꯁꯤꯡꯅꯥ ꯒꯇꯔꯁꯤꯡꯒꯤ ꯃꯍꯨꯠ ꯁꯤꯜꯂꯤ꯫ gapꯄ꯭ꯔꯣꯄꯔꯇꯤ ꯑꯁꯤꯅꯥ ꯑꯩꯈꯣꯌꯒꯤ ꯗꯤꯐꯣꯜꯇ ꯒ꯭ꯔꯤꯗ ꯁꯤꯁ꯭ꯇꯦꯃꯗꯒꯤ ꯍꯣꯔꯥꯏꯖꯣꯟꯇꯦꯜ ꯑꯗꯨ paddingꯃꯍꯨꯠ ꯁꯤꯜꯂꯤ ꯑꯃꯁꯨꯡ margin.

• ꯑꯁꯤꯒꯨꯝꯕꯥ ꯃꯑꯣꯡꯗꯥ, sꯒꯥ ꯃꯥꯟꯅꯗꯅꯥ .row, .grids ꯑꯁꯤ ꯅꯦꯒꯦꯇꯤꯕ ꯃꯥꯔꯖꯤꯟ ꯂꯩꯇꯦ ꯑꯃꯁꯨꯡ ꯃꯥꯔꯖꯤꯟ ꯌꯨꯇꯤꯂꯤꯇꯤꯁꯤꯡ ꯑꯁꯤ ꯒ꯭ꯔꯤꯗ ꯒꯇꯔꯁꯤꯡ ꯍꯣꯡꯗꯣꯛꯅꯕꯥ ꯁꯤꯖꯤꯟꯅꯕꯥ ꯌꯥꯗꯦ꯫ ꯒ꯭ꯔꯤꯗ ꯒꯦꯄꯁꯤꯡ ꯑꯁꯤ ꯗꯤꯐꯣꯜꯇ ꯑꯣꯏꯅꯥ ꯍꯣꯔꯥꯏꯖꯣꯟꯇꯦꯜ ꯑꯃꯁꯨꯡ ꯚꯔꯇꯤꯀꯦꯜ ꯑꯣꯏꯅꯥ ꯑꯦꯞꯂꯥꯏ ꯇꯧꯏ꯫ ꯑꯀꯨꯞꯄꯥ ꯃꯔꯣꯂꯒꯤꯗꯃꯛꯇꯥ ꯀꯁ꯭ꯇꯃꯔꯁꯤꯡꯒꯤ ꯁꯦꯛꯁꯟ ꯑꯗꯨ ꯌꯦꯡꯕꯤꯌꯨ꯫

• ꯏꯅꯂꯥꯏꯟ ꯑꯃꯁꯨꯡ ꯀꯁ꯭ꯇꯝ ꯁ꯭ꯇꯥꯏꯂꯁꯤꯡ ꯑꯁꯤ ꯃꯣꯗꯤꯐꯥꯏꯌꯔ ꯀ꯭ꯂꯥꯁꯁꯤꯡꯒꯤ ꯃꯍꯨꯠ ꯁꯤꯅꯕꯥ ꯑꯣꯏꯅꯥ ꯌꯦꯡꯒꯗꯕꯅꯤ (ꯈꯨꯗꯝ ꯑꯣꯏꯅꯥ, style="--bs-columns: 3;"vs class="row-cols-3").

• ꯅꯦꯁ꯭ꯇꯤꯡ ꯑꯁꯤꯅꯥ ꯃꯁꯤꯒꯥ ꯃꯥꯟꯅꯅꯥ ꯊꯕꯛ ꯇꯧꯏ, ꯑꯗꯨꯕꯨ ꯅꯦꯁ꯭ꯇꯦꯗ ꯑꯃꯒꯤ ꯏꯟꯁꯇꯦꯟꯁ ꯈꯨꯗꯤꯡꯃꯛꯇꯥ ꯅꯍꯥꯛꯀꯤ ꯀꯣꯂꯝ ꯀꯥꯎꯟꯇꯁꯤꯡ ꯔꯤꯁꯦꯠ ꯇꯧꯕꯥ ꯃꯊꯧ ꯇꯥꯕꯥ ꯌꯥꯏ .grid. ꯑꯀꯨꯞꯄꯥ ꯃꯔꯣꯂꯒꯤꯗꯃꯛꯇꯥ ꯅꯦꯁ꯭ꯇꯤꯡ ꯁꯦꯛꯁꯟ ꯑꯗꯨ ꯌꯦꯡꯕꯤꯌꯨ꯫

ꯈꯨꯗꯃꯁꯤꯡ꯫

ꯀꯣꯂꯝ ꯑꯍꯨꯝ ꯂꯩ꯫

.g-col-4ꯀ꯭ꯂꯥꯁꯁꯤꯡ ꯁꯤꯖꯤꯟꯅꯗꯨꯅꯥ ꯚꯤꯎꯄꯣꯔꯠ ꯑꯃꯁꯨꯡ ꯗꯤꯚꯥꯏꯁ ꯄꯨꯝꯅꯃꯛꯀꯤ ꯃꯔꯛꯇꯥ ꯆꯞ ꯃꯥꯟꯅꯕꯥ ꯄꯥꯛ ꯆꯥꯎꯕꯥ ꯀꯣꯂꯝ ꯑꯍꯨꯝ ꯁꯦꯝꯕꯥ ꯌꯥꯏ꯫ ꯚꯤꯎꯄꯣꯔꯠ ꯁꯥꯏꯖꯒꯤ ꯃꯇꯨꯡ ꯏꯟꯅꯥ ꯂꯦꯑꯥꯎꯠ ꯍꯣꯡꯗꯣꯛꯅꯕꯥ ꯔꯦꯁ꯭ꯄꯣꯟꯁꯤꯕꯜ ꯀ꯭ꯂꯥꯁꯁꯤꯡ ꯍꯥꯄꯆꯤꯜꯂꯨ꯫

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

ꯔꯦꯁ꯭ꯄꯣꯟꯁꯤꯕꯜ ꯑꯣꯏꯕꯥ꯫

ꯚꯤꯎꯄꯣꯔꯇꯁꯤꯡꯒꯤ ꯃꯔꯛꯇꯥ ꯅꯍꯥꯛꯀꯤ ꯂꯦꯑꯥꯎꯠ ꯑꯗꯨ ꯑꯦꯗꯖꯁ꯭ꯠ ꯇꯧꯅꯕꯥ ꯔꯦꯁ꯭ꯄꯣꯟꯁꯤꯕꯜ ꯀ꯭ꯂꯥꯁꯁꯤꯡ ꯁꯤꯖꯤꯟꯅꯧ꯫ ꯃꯐꯝ ꯑꯁꯤꯗꯥ ꯑꯩꯈꯣꯌꯅꯥ ꯈ꯭ꯕꯥꯏꯗꯒꯤ ꯑꯄꯤꯀꯄꯥ ꯚꯤꯎꯄꯣꯔꯇꯁꯤꯡꯗꯥ ꯀꯣꯂꯝ ꯑꯅꯤꯗꯒꯤ ꯍꯧꯏ, ꯑꯃꯁꯨꯡ ꯃꯗꯨꯒꯤ ꯃꯇꯨꯡꯗꯥ ꯃꯤꯗꯤꯌꯝ ꯚꯤꯎꯄꯣꯔꯇꯁꯤꯡꯗꯥ ꯑꯃꯁꯨꯡ ꯃꯊꯛꯇꯥ ꯀꯣꯂꯝ ꯑꯍꯨꯃꯗꯥ ꯍꯦꯅꯒꯠꯂꯀꯏ꯫

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

ꯃꯗꯨ ꯚꯤꯎꯄꯣꯔꯠ ꯄꯨꯝꯅꯃꯛꯇꯥ ꯀꯣꯂꯝ ꯑꯅꯤꯒꯤ ꯂꯦꯑꯥꯎꯠ ꯑꯁꯤꯒꯥ ꯆꯥꯡꯗꯝꯅꯕꯤꯌꯨ꯫

<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ꯒ꯭ꯔꯤꯗ ꯑꯥꯏꯇꯦꯃꯁꯤꯡꯒꯤ ꯃꯔꯛꯇꯥ ꯂꯩꯕꯥ ꯍꯣꯔꯥꯏꯖꯣꯟꯇꯦꯜ ꯑꯃꯁꯨꯡ ꯚꯔꯇꯤꯀꯦꯜ ꯒꯦꯄꯁꯤꯡꯗꯥ ꯆꯠꯅꯩ ꯍꯥꯌꯕꯥ ꯈꯉꯕꯤꯌꯨ꯫

<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

<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), ꯒ꯭ꯔꯤꯗ ꯑꯥꯏꯇꯦꯝ ꯈꯨꯗꯤꯡꯃꯛ ꯃꯁꯥ ꯃꯊꯟꯇꯥ ꯀꯣꯂꯝ ꯑꯃꯗꯥ ꯁꯥꯏꯖ ꯇꯧꯒꯅꯤ꯫

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

ꯃꯁꯤꯒꯤ ꯂꯃꯆꯠ ꯑꯁꯤ ꯒ꯭ꯔꯤꯗ ꯀꯣꯂꯝ ꯀ꯭ꯂꯥꯁꯁꯤꯡꯒꯥ ꯂꯣꯌꯅꯅꯥ ꯃꯤꯛꯁ ꯇꯧꯕꯥ ꯌꯥꯏ꯫

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

ꯅꯦꯁ꯭ꯇꯤꯡ ꯇꯧꯕꯥ꯫

ꯑꯩꯈꯣꯌꯒꯤ ꯗꯤꯐꯣꯜꯇ ꯒ꯭ꯔꯤꯗ ꯁꯤꯁ꯭ꯇꯦꯃꯒꯥ ꯃꯥꯟꯅꯅꯥ, ꯑꯩꯈꯣꯌꯒꯤ ꯁꯤ.ꯑꯦꯁ.ꯑꯦꯁ.ꯀꯤ ꯒ꯭ꯔꯤꯗꯅꯥ .gridꯑꯦꯁ. ꯑꯗꯨꯝ ꯑꯣꯏꯅꯃꯛ, ꯗꯤꯐꯣꯜꯇꯀꯥ ꯃꯥꯟꯅꯗꯅꯥ, ꯒ꯭ꯔꯤꯗ ꯑꯁꯤꯅꯥ ꯔꯣꯁꯤꯡ, ꯀꯣꯂꯃꯁꯤꯡ, ꯑꯃꯁꯨꯡ ꯒꯦꯄꯁꯤꯡꯗꯥ ꯑꯍꯣꯡꯕꯥ ꯂꯥꯀꯄꯥ ꯑꯁꯤ ꯏꯅꯍꯦꯔꯤ ꯇꯧꯏ꯫ ꯃꯈꯥꯗꯥ ꯄꯤꯔꯤꯕꯥ ꯈꯨꯗꯝ ꯑꯁꯤ ꯌꯦꯡꯕꯤꯌꯨ:

• ꯑꯩꯈꯣꯌꯅꯥ ꯂꯣꯀꯦꯜ ꯁꯤ.ꯑꯦꯁ.ꯑꯦꯁ.ꯀꯤ ꯚꯦꯔꯤꯑꯦꯕꯜ ꯑꯃꯒꯥ ꯂꯣꯌꯅꯅꯥ ꯀꯣꯂꯃꯁꯤꯡꯒꯤ ꯗꯤꯐꯣꯜꯇ ꯃꯁꯤꯡ ꯑꯗꯨ ꯑꯣꯚꯔꯔꯥꯏꯗ ꯇꯧꯏ: --bs-columns: 3.
• ꯑꯍꯥꯅꯕꯥ ꯑꯣꯇꯣ-ꯀꯣꯂꯃꯗꯥ, ꯀꯣꯂꯝ ꯀꯥꯎꯟꯇ ꯑꯁꯤ ꯏꯅꯍꯦꯔꯤ ꯇꯧꯏ ꯑꯃꯁꯨꯡ ꯀꯣꯂꯝ ꯈꯨꯗꯤꯡꯃꯛ ꯐꯪꯂꯤꯕꯥ ꯄꯥꯛ ꯆꯥꯎꯕꯥ ꯑꯗꯨꯒꯤ ꯁꯔꯨꯛ ꯑꯍꯨꯝ ꯊꯣꯀꯄꯒꯤ ꯑꯃꯥ ꯑꯣꯏ꯫
• ꯑꯅꯤꯁꯨꯕꯥ ꯑꯣꯇꯣ-ꯀꯣꯂꯃꯗꯥ, ꯑꯩꯈꯣꯌꯅꯥ ꯅꯦꯁ꯭ꯠ ꯇꯧꯔꯕꯥ ꯀꯣꯂꯝ ꯀꯥꯎꯟꯇ .gridꯑꯗꯨ ꯱꯲ꯗꯥ (ꯑꯩꯈꯣꯌꯒꯤ ꯗꯤꯐꯣꯜꯇ) ꯔꯤꯁꯦꯠ ꯇꯧꯈ꯭ꯔꯦ꯫
• ꯑꯍꯨꯃꯁꯨꯕꯥ ꯑꯣꯇꯣ-ꯀꯣꯂꯝ ꯑꯗꯨꯗꯥ ꯅꯦꯁ꯭ꯇꯦꯗ ꯀꯟꯇꯦꯟꯇ ꯑꯃꯠꯇꯥ ꯂꯩꯇꯦ꯫

ꯊꯧꯑꯣꯡꯗꯥ ꯃꯁꯤꯅꯥ ꯑꯩꯈꯣꯌꯒꯤ ꯗꯤꯐꯣꯜꯇ ꯒ꯭ꯔꯤꯗ ꯁꯤꯁ꯭ꯇꯦꯃꯒꯥ ꯆꯥꯡꯗꯝꯅꯕꯗꯥ ꯍꯦꯟꯅꯥ ꯀꯝꯞꯂꯦꯛꯁ ꯑꯃꯁꯨꯡ ꯀꯁ꯭ꯇꯝ ꯂꯦꯑꯥꯎꯇꯁꯤꯡ ꯄꯤꯕꯥ ꯌꯥꯍꯜꯂꯤ꯫

<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 ꯚꯦꯔꯤꯑꯦꯕꯂꯁꯤꯡꯒꯥ ꯂꯣꯌꯅꯅꯥ ꯀꯣꯂꯃꯁꯤꯡꯒꯤ ꯃꯁꯤꯡ, ꯔꯣꯁꯤꯡꯒꯤ ꯃꯁꯤꯡ, ꯑꯃꯁꯨꯡ ꯒꯦꯄꯁꯤꯡꯒꯤ ꯄꯥꯛ ꯆꯥꯎꯕꯥ ꯑꯗꯨ ꯀꯁ꯭ꯇꯃꯁ ꯇꯧꯕꯤꯌꯨ꯫

ꯍꯥꯌꯔꯤꯕꯥ ꯁꯤ.ꯑꯦꯁ.ꯑꯦꯁ.ꯀꯤ ꯚꯦꯔꯤꯑꯦꯕꯂꯁꯤꯡ ꯑꯁꯤꯒꯤ ꯗꯤꯐꯣꯜꯇ ꯚꯦꯜꯌꯨ ꯂꯩꯇꯦ; ꯃꯗꯨꯒꯤ ꯃꯍꯨꯠꯇꯥ, ꯃꯈꯣꯌꯅꯥ ꯂꯣꯀꯦꯜ ꯏꯟꯁꯇꯦꯟꯁ ꯑꯃꯥ ꯄꯤꯗ꯭ꯔꯤꯐꯥꯑꯣꯕꯥ ꯁꯤꯖꯤꯟꯅꯔꯤꯕꯥ ꯐꯣꯜꯕꯦꯛ ꯚꯦꯜꯌꯨꯁꯤꯡ ꯑꯦꯞꯂꯥꯏ ꯇꯧꯏ꯫ ꯈꯨꯗꯝ ꯑꯣꯏꯅꯥ, ꯑꯩꯈꯣꯌꯅꯥ var(--bs-rows, 1)ꯑꯩꯈꯣꯌꯒꯤ CSS ꯒ꯭ꯔꯤꯗ ꯔꯣꯁꯤꯡꯒꯤꯗꯃꯛ ꯁꯤꯖꯤꯟꯅꯩ, ꯃꯁꯤꯅꯥ ꯏꯒꯅꯣꯔ ꯇꯧꯏ --bs-rowsꯃꯔꯃꯗꯤ ꯃꯗꯨ ꯍꯧꯖꯤꯛ ꯐꯥꯑꯣꯕꯥ ꯃꯐꯝ ꯑꯃꯠꯇꯗꯥ ꯁꯦꯠ ꯇꯧꯗ꯭ꯔꯤ꯫ ꯃꯁꯤ ꯑꯣꯏꯔꯕꯥ ꯃꯇꯨꯡꯗꯥ, .gridꯏꯟꯁꯇꯦꯟꯁ ꯑꯗꯨꯅꯥ ꯚꯦꯜꯌꯨ ꯑꯗꯨ 1.

ꯒ꯭ꯔꯤꯗ ꯀ꯭ꯂꯥꯁꯁꯤꯡ ꯂꯩꯇꯦ꯫

ꯈꯨꯗꯛꯀꯤ ꯑꯣꯏꯕꯥ ꯑꯉꯥꯡꯁꯤꯡꯒꯤ ꯑꯦꯂꯤꯃꯦꯟꯇꯁꯤꯡ ꯑꯁꯤ ꯒ꯭ꯔꯤꯗ ꯑꯥꯏꯇꯦꯃꯁꯤꯡꯅꯤ, ꯃꯔꯝ ꯑꯗꯨꯅꯥ ꯃꯈꯣꯌ ꯑꯁꯤ ꯃꯌꯦꯛ ꯁꯦꯡꯅꯥ ꯀ꯭ꯂꯥꯁ .gridꯑꯃꯥ ꯍꯥꯄꯆꯤꯟꯗꯅꯥ ꯁꯥꯏꯖ ꯇꯧꯒꯅꯤ꯫.g-col

<div class="grid text-center" style="--bs-columns: 3;">
  <div>Auto-column</div>
  <div>Auto-column</div>
  <div>Auto-column</div>
</div>

ꯀꯣꯂꯝ ꯑꯃꯁꯨꯡ ꯒꯦꯄꯁꯤꯡ꯫

ꯀꯣꯂꯃꯁꯤꯡꯒꯤ ꯃꯁꯤꯡ ꯑꯃꯁꯨꯡ ꯒꯦꯞ ꯑꯗꯨ ꯑꯦꯗꯖꯁ꯭ꯠ ꯇꯧ꯫

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

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

ꯔꯣꯁꯤꯡ ꯍꯥꯄꯆꯤꯅꯕꯥ꯫

ꯔꯣ ꯍꯦꯟꯅꯥ ꯍꯥꯄꯆꯤꯅꯕꯥ ꯑꯃꯁꯨꯡ ꯀꯣꯂꯃꯁꯤꯡꯒꯤ ꯄ꯭ꯂꯦꯁꯃꯦꯟꯇ ꯍꯣꯡꯗꯣꯀꯄꯥ:

<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. gapꯑꯩꯈꯣꯌꯅꯥ s ꯗꯥ ꯁꯤꯖꯤꯟꯅꯩ ꯍꯥꯌꯕꯥ ꯈꯉꯕꯤꯌꯨ .grid, ꯑꯗꯨꯕꯨ row-gapꯑꯃꯁꯨꯡ column-gapꯃꯊꯧ ꯇꯥꯕꯒꯤ ꯃꯇꯨꯡ ꯏꯟꯅꯥ ꯃꯣꯗꯤꯐꯥꯏ ꯇꯧꯕꯥ ꯌꯥꯏ꯫

<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-gapꯁꯤ.ꯑꯦꯁ.ꯑꯦꯁ.ꯀꯤ ꯚꯦꯔꯤꯑꯦꯕꯂꯒꯥ ꯂꯣꯌꯅꯅꯥ ꯏꯅꯂꯥꯏꯟ ꯁ꯭ꯇꯥꯏꯜ ꯑꯃꯒꯥ ꯂꯣꯌꯅꯅꯥ ꯑꯦꯞꯂꯥꯏ ꯇꯧꯕꯥ ꯌꯥꯏ꯫

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

ꯁꯥꯁꯁ ꯇꯧꯕꯥ꯫

ꯁꯤ.ꯑꯦꯁ.ꯑꯦꯁ.ꯒ꯭ꯔꯤꯗꯀꯤ ꯂꯤꯃꯤꯇꯦꯁꯟ ꯑꯃꯗꯤ ꯑꯩꯈꯣꯌꯒꯤ ꯗꯤꯐꯣꯜꯇ ꯀ꯭ꯂꯥꯁꯁꯤꯡ ꯑꯁꯤ ꯍꯧꯖꯤꯀꯁꯨ ꯁꯥꯁ ꯚꯦꯔꯤꯑꯦꯕꯜ ꯑꯅꯤꯅꯥ ꯁꯦꯃꯒꯠꯂꯤ, $grid-columnsꯑꯃꯁꯨꯡ $grid-gutter-width. ꯃꯁꯤꯅꯥ ꯑꯩꯈꯣꯌꯒꯤ ꯀꯝꯄꯥꯏꯜ ꯇꯧꯔꯕꯥ ꯁꯤ.ꯑꯦꯁ.ꯑꯦꯁ.ꯇꯥ ꯁꯦꯃꯒꯠꯄꯥ ꯀ꯭ꯂꯥꯁꯁꯤꯡꯒꯤ ꯃꯁꯤꯡ ꯑꯗꯨ ꯏꯐꯦꯛꯇꯤꯕ ꯑꯣꯏꯅꯥ ꯃꯃꯥꯡꯗꯥ ꯂꯦꯄꯊꯣꯀꯏ꯫ ꯃꯐꯝ ꯑꯁꯤꯗꯥ ꯑꯗꯣꯃꯒꯤ ꯑꯣꯄꯁꯟ ꯑꯅꯤ ꯂꯩꯔꯤ:

• ꯑꯗꯨꯒꯨꯝꯕꯥ ꯗꯤꯐꯣꯜꯇ ꯁꯥꯁ ꯚꯦꯔꯤꯑꯦꯕꯂꯁꯤꯡ ꯑꯗꯨ ꯃꯣꯗꯤꯐꯥꯏ ꯇꯧ ꯑꯃꯁꯨꯡ ꯅꯍꯥꯛꯀꯤ CSS ꯑꯗꯨ ꯑꯃꯨꯛ ꯍꯟꯅꯥ ꯀꯝꯄꯥꯏꯜ ꯇꯧ꯫
• ꯄꯤꯔꯤꯕꯥ ꯀ꯭ꯂꯥꯁꯁꯤꯡ ꯑꯁꯤ ꯍꯦꯅꯒꯠꯍꯟꯅꯕꯥ ꯏꯅꯂꯥꯏꯟ ꯅꯠꯠꯔꯒꯥ ꯀꯁ꯭ꯇꯝ ꯁ꯭ꯇꯥꯏꯂꯁꯤꯡ ꯁꯤꯖꯤꯟꯅꯧ꯫

ꯈꯨꯗꯝ ꯑꯣꯏꯅꯥ, ꯅꯍꯥꯛꯅꯥ ꯀꯣꯂꯝ ꯀꯥꯎꯟꯇ ꯍꯦꯅꯒꯠꯍꯅꯕꯥ ꯌꯥꯏ ꯑꯃꯁꯨꯡ ꯒꯦꯞ ꯁꯥꯏꯖ ꯍꯣꯡꯗꯣꯀꯄꯥ ꯌꯥꯏ, ꯑꯃꯁꯨꯡ ꯃꯗꯨꯒꯤ ꯃꯇꯨꯡꯗꯥ ꯅꯍꯥꯛꯀꯤ “ꯀꯣꯂꯃꯁꯤꯡ” ꯑꯗꯨ ꯏꯅꯂꯥꯏꯟ ꯁ꯭ꯇꯥꯏꯂꯁꯤꯡ ꯑꯃꯁꯨꯡ ꯄ꯭ꯔꯤꯗꯤꯐꯥꯏꯗ ꯇꯧꯔꯕꯥ CSS ꯒ꯭ꯔꯤꯗ ꯀꯣꯂꯝ ꯀ꯭ꯂꯥꯁꯁꯤꯡ (ꯈꯨꯗꯝ ꯑꯣꯏꯅꯥ, .g-col-4)ꯒꯤ ꯃꯤꯛꯁ ꯑꯃꯒꯥ ꯂꯣꯌꯅꯅꯥ ꯁꯥꯏꯖ ꯇꯧꯕꯥ ꯌꯥꯏ꯫

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