ꯁꯤ.ꯑꯦꯁ.ꯑꯦꯁ.ꯀꯤ ꯒ꯭ꯔꯤꯗ ꯂꯩ꯫
ꯈꯨꯗꯃꯁꯤꯡ ꯑꯃꯁꯨꯡ ꯀꯣꯗ ꯁ꯭ꯅꯤꯄꯦꯇꯁꯤꯡꯒꯥ ꯂꯣꯌꯅꯅꯥ CSS ꯒ꯭ꯔꯤꯗꯇꯥ ꯁꯦꯝꯕꯥ ꯑꯩꯈꯣꯌꯒꯤ ꯑꯂꯇꯔꯅꯦꯇꯤꯕ ꯂꯦꯑꯥꯎꯠ ꯁꯤꯁ꯭ꯇꯦꯝ ꯑꯁꯤ ꯀꯔꯝꯅꯥ ꯏꯅꯦꯕꯜ ꯇꯧꯒꯅꯤ, ꯁꯤꯖꯤꯟꯅꯒꯅꯤ ꯑꯃꯁꯨꯡ ꯀꯁ꯭ꯇꯃꯁ ꯇꯧꯒꯅꯤ ꯍꯥꯌꯕꯗꯨ ꯇꯃꯁꯤꯜꯂꯨ꯫
ꯕꯨꯠꯁ꯭ꯠꯔꯥꯄꯀꯤ ꯗꯤꯐꯣꯜꯇ ꯒ꯭ꯔꯤꯗ ꯁꯤꯁ꯭ꯇꯦꯝ ꯑꯁꯤꯅꯥ ꯃꯤꯑꯣꯏ ꯂꯥꯈ ꯀꯌꯥꯅꯥ ꯍꯣꯠꯅꯈꯤꯕꯥ ꯑꯃꯁꯨꯡ ꯇꯦꯁ꯭ꯠ ꯇꯧꯈꯤꯕꯥ ꯆꯍꯤ ꯇꯔꯥꯒꯤ ꯈꯨꯖꯤꯡ ꯑꯃꯥ ꯍꯦꯟꯅꯥ ꯁꯤ.ꯑꯦꯁ.ꯑꯦꯁ. ꯑꯗꯨꯕꯨ, ꯃꯁꯤ ꯑꯅꯧꯕꯥ ꯁꯤ.ꯑꯦꯁ.ꯑꯦꯁ.ꯀꯤ ꯒ꯭ꯔꯤꯗꯒꯨꯝꯕꯥ ꯕ꯭ꯔꯥꯎꯖꯔꯁꯤꯡꯗꯥ ꯑꯩꯈꯣꯌꯅꯥ ꯎꯕꯥ ꯐꯪꯂꯤꯕꯥ ꯃꯣꯗꯔꯟ ꯁꯤ.ꯑꯦꯁ.ꯑꯦꯁ.ꯀꯤ ꯐꯤꯆꯔ ꯑꯃꯁꯨꯡ ꯇꯦꯛꯅꯤꯛ ꯀꯌꯥ ꯌꯥꯑꯣꯗꯅꯥꯁꯨ ꯁꯦꯃꯈꯤꯕꯅꯤ꯫
ꯃꯁꯤ ꯀꯔꯝꯅꯥ ꯊꯕꯛ ꯇꯧꯕꯒꯦ꯫
ꯕꯨꯠꯁ꯭ꯠꯔꯥꯞ ꯵ꯒꯥ ꯂꯣꯌꯅꯅꯥ, ꯑꯩꯈꯣꯌꯅꯥ ꯁꯤ.ꯑꯦꯁ.ꯑꯦꯁ.ꯒ꯭ꯔꯤꯗꯇꯥ ꯁꯦꯃꯒꯠꯄꯥ ꯇꯣꯉꯥꯅꯕꯥ ꯒ꯭ꯔꯤꯗ ꯁꯤꯁ꯭ꯇꯦꯝ ꯑꯃꯥ ꯏꯅꯦꯕꯜ ꯇꯧꯕꯒꯤ ꯑꯣꯄꯁꯟ ꯍꯥꯄꯆꯤꯜꯂꯦ, ꯑꯗꯨꯕꯨ ꯕꯨꯠꯁ꯭ꯠꯔꯥꯞ ꯇ꯭ꯌꯨꯏꯁ꯭ꯠ ꯑꯃꯒꯥ ꯂꯣꯌꯅꯅꯥ꯫ ꯑꯗꯣꯝꯅꯥ ꯍꯧꯖꯤꯀꯁꯨ ꯔꯦꯁ꯭ꯄꯣꯟꯁꯤꯕꯜ ꯂꯦꯑꯥꯎꯇꯁꯤꯡ ꯁꯦꯃꯒꯠꯅꯕꯥ ꯑꯗꯣꯝꯅꯥ ꯋꯥꯈꯜ ꯈꯅꯕꯥ ꯌꯥꯕꯥ ꯀ꯭ꯂꯥꯁꯁꯤꯡ ꯐꯪꯏ, ꯑꯗꯨꯕꯨ ꯍꯨꯗꯀꯤ ꯃꯈꯥꯗꯥ ꯇꯣꯉꯥꯅꯕꯥ ꯑꯦꯞꯔꯣꯆ ꯑꯃꯒꯥ ꯂꯣꯌꯅꯅꯥ꯫
-
ꯁꯤ.ꯑꯦꯁ.ꯑꯦꯁ.ꯀꯤ ꯒ꯭ꯔꯤꯗ ꯑꯁꯤ ꯑꯣꯄꯁꯟ-ꯏꯟ ꯑꯣꯏꯔꯤ꯫ ꯁꯦꯇꯤꯡ ꯇꯧꯗꯨꯅꯥ ꯗꯤꯐꯣꯜꯇ ꯒ꯭ꯔꯤꯗ ꯁꯤꯁ꯭ꯇꯦꯝ ꯑꯗꯨ ꯗꯤꯁꯦꯕꯜ ꯇꯧ
$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
,.grid
s ꯑꯁꯤ ꯅꯦꯒꯦꯇꯤꯕ ꯃꯥꯔꯖꯤꯟ ꯂꯩꯇꯦ ꯑꯃꯁꯨꯡ ꯃꯥꯔꯖꯤꯟ ꯌꯨꯇꯤꯂꯤꯇꯤꯁꯤꯡ ꯑꯁꯤ ꯒ꯭ꯔꯤꯗ ꯒꯇꯔꯁꯤꯡ ꯍꯣꯡꯗꯣꯛꯅꯕꯥ ꯁꯤꯖꯤꯟꯅꯕꯥ ꯌꯥꯗꯦ꯫ ꯒ꯭ꯔꯤꯗ ꯒꯦꯄꯁꯤꯡ ꯑꯁꯤ ꯗꯤꯐꯣꯜꯇ ꯑꯣꯏꯅꯥ ꯍꯣꯔꯥꯏꯖꯣꯟꯇꯦꯜ ꯑꯃꯁꯨꯡ ꯚꯔꯇꯤꯀꯦꯜ ꯑꯣꯏꯅꯥ ꯑꯦꯞꯂꯥꯏ ꯇꯧꯏ꯫ ꯑꯀꯨꯞꯄꯥ ꯃꯔꯣꯂꯒꯤꯗꯃꯛꯇꯥ ꯀꯁ꯭ꯇꯃꯔꯁꯤꯡꯒꯤ ꯁꯦꯛꯁꯟ ꯑꯗꯨ ꯌꯦꯡꯕꯤꯌꯨ꯫ -
ꯏꯅꯂꯥꯏꯟ ꯑꯃꯁꯨꯡ ꯀꯁ꯭ꯇꯝ ꯁ꯭ꯇꯥꯏꯂꯁꯤꯡ ꯑꯁꯤ ꯃꯣꯗꯤꯐꯥꯏꯌꯔ ꯀ꯭ꯂꯥꯁꯁꯤꯡꯒꯤ ꯃꯍꯨꯠ ꯁꯤꯅꯕꯥ ꯑꯣꯏꯅꯥ ꯌꯦꯡꯒꯗꯕꯅꯤ (ꯈꯨꯗꯝ ꯑꯣꯏꯅꯥ,
style="--bs-columns: 3;"
vsclass="row-cols-3"
). -
ꯅꯦꯁ꯭ꯇꯤꯡ ꯑꯁꯤꯅꯥ ꯃꯁꯤꯒꯥ ꯃꯥꯟꯅꯅꯥ ꯊꯕꯛ ꯇꯧꯏ, ꯑꯗꯨꯕꯨ ꯅꯦꯁ꯭ꯇꯦꯗ ꯑꯃꯒꯤ ꯏꯟꯁꯇꯦꯟꯁ ꯈꯨꯗꯤꯡꯃꯛꯇꯥ ꯅꯍꯥꯛꯀꯤ ꯀꯣꯂꯝ ꯀꯥꯎꯟꯇꯁꯤꯡ ꯔꯤꯁꯦꯠ ꯇꯧꯕꯥ ꯃꯊꯧ ꯇꯥꯕꯥ ꯌꯥꯏ
.grid
. ꯑꯀꯨꯞꯄꯥ ꯃꯔꯣꯂꯒꯤꯗꯃꯛꯇꯥ ꯅꯦꯁ꯭ꯇꯤꯡ ꯁꯦꯛꯁꯟ ꯑꯗꯨ ꯌꯦꯡꯕꯤꯌꯨ꯫
ꯈꯨꯗꯃꯁꯤꯡ꯫
ꯀꯣꯂꯝ ꯑꯍꯨꯝ ꯂꯩ꯫
.g-col-4
ꯀ꯭ꯂꯥꯁꯁꯤꯡ ꯁꯤꯖꯤꯟꯅꯗꯨꯅꯥ ꯚꯤꯎꯄꯣꯔꯠ ꯑꯃꯁꯨꯡ ꯗꯤꯚꯥꯏꯁ ꯄꯨꯝꯅꯃꯛꯀꯤ ꯃꯔꯛꯇꯥ ꯆꯞ ꯃꯥꯟꯅꯕꯥ ꯄꯥꯛ ꯆꯥꯎꯕꯥ ꯀꯣꯂꯝ ꯑꯍꯨꯝ ꯁꯦꯝꯕꯥ ꯌꯥꯏ꯫ ꯚꯤꯎꯄꯣꯔꯠ ꯁꯥꯏꯖꯒꯤ ꯃꯇꯨꯡ ꯏꯟꯅꯥ ꯂꯦꯑꯥꯎꯠ ꯍꯣꯡꯗꯣꯛꯅꯕꯥ ꯔꯦꯁ꯭ꯄꯣꯟꯁꯤꯕꯜ ꯀ꯭ꯂꯥꯁꯁꯤꯡ ꯍꯥꯄꯆꯤꯜꯂꯨ꯫
<div class="grid">
<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">
<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">
<div class="g-col-6">.g-col-6</div>
<div class="g-col-6">.g-col-6</div>
</div>
ꯔꯦꯄꯤꯡ ꯇꯧꯕꯥ꯫
ꯒ꯭ꯔꯤꯗ ꯑꯥꯏꯇꯦꯃꯁꯤꯡ ꯑꯁꯤ ꯍꯣꯔꯥꯏꯖꯣꯟꯇꯦꯜ ꯑꯣꯏꯅꯥ ꯍꯦꯟꯅꯥ ꯔꯨꯝ ꯂꯩꯇꯕꯥ ꯃꯇꯃꯗꯥ ꯃꯊꯪꯒꯤ ꯂꯥꯏꯟꯗꯥ ꯑꯣꯇꯣꯃꯦꯇꯤꯛ ꯑꯣꯏꯅꯥ ꯔꯦꯞ ꯇꯧꯏ꯫ gap
ꯒ꯭ꯔꯤꯗ ꯑꯥꯏꯇꯦꯃꯁꯤꯡꯒꯤ ꯃꯔꯛꯇꯥ ꯂꯩꯕꯥ ꯍꯣꯔꯥꯏꯖꯣꯟꯇꯦꯜ ꯑꯃꯁꯨꯡ ꯚꯔꯇꯤꯀꯦꯜ ꯒꯦꯄꯁꯤꯡꯗꯥ ꯆꯠꯅꯩ ꯍꯥꯌꯕꯥ ꯈꯉꯕꯤꯌꯨ꯫
<div class="grid">
<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">
<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">
<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">
<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" 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>
ꯀꯁ꯭ꯇꯃꯁ ꯇꯧꯕꯥ꯫
ꯂꯣꯀꯦꯜ ꯁꯤ.ꯑꯦꯁ.ꯑꯦꯁ.ꯀꯤ ꯚꯦꯔꯤꯑꯦꯕꯂꯁꯤꯡꯒꯥ ꯂꯣꯌꯅꯅꯥ ꯀꯣꯂꯃꯁꯤꯡꯒꯤ ꯃꯁꯤꯡ, ꯔꯣꯁꯤꯡꯒꯤ ꯃꯁꯤꯡ, ꯑꯃꯁꯨꯡ ꯒꯦꯄꯁꯤꯡꯒꯤ ꯄꯥꯛ ꯆꯥꯎꯕꯥ ꯑꯗꯨ ꯀꯁ꯭ꯇꯃꯁ ꯇꯧꯕꯥ꯫
ꯚꯦꯔꯤꯑꯦꯕꯜ ꯑꯣꯏꯕꯥ꯫ | ꯐꯣꯂꯕꯦꯛ ꯚꯦꯜꯌꯨ ꯂꯩ꯫ | ꯋꯥꯔꯣꯜ |
---|---|---|
--bs-rows |
1 |
ꯅꯍꯥꯛꯀꯤ ꯒ꯭ꯔꯤꯗ ꯇꯦꯃꯞꯂꯦꯠꯇꯥ ꯂꯩꯕꯥ ꯔꯣꯁꯤꯡꯒꯤ ꯃꯁꯤꯡ꯫ |
--bs-columns |
12 |
ꯅꯍꯥꯛꯀꯤ ꯒ꯭ꯔꯤꯗ ꯇꯦꯃꯞꯂꯦꯠꯇꯥ ꯂꯩꯕꯥ ꯀꯣꯂꯃꯁꯤꯡꯒꯤ ꯃꯁꯤꯡ꯫ |
--bs-gap |
1.5rem |
ꯀꯣꯂꯃꯁꯤꯡꯒꯤ ꯃꯔꯛꯇꯥ ꯂꯩꯕꯥ ꯑꯔꯥꯞꯄꯒꯤ ꯆꯥꯡ (ꯚꯔꯇꯤꯀꯦꯜ ꯑꯃꯁꯨꯡ ꯍꯣꯔꯥꯏꯖꯣꯟꯇꯦꯜ) |
ꯍꯥꯌꯔꯤꯕꯥ ꯁꯤ.ꯑꯦꯁ.ꯑꯦꯁ.ꯀꯤ ꯚꯦꯔꯤꯑꯦꯕꯂꯁꯤꯡ ꯑꯁꯤꯒꯤ ꯗꯤꯐꯣꯜꯇ ꯚꯦꯜꯌꯨ ꯂꯩꯇꯦ; ꯃꯗꯨꯒꯤ ꯃꯍꯨꯠꯇꯥ, ꯃꯈꯣꯌꯅꯥ ꯂꯣꯀꯦꯜ ꯏꯟꯁꯇꯦꯟꯁ ꯑꯃꯥ ꯄꯤꯗ꯭ꯔꯤꯐꯥꯑꯣꯕꯥ ꯁꯤꯖꯤꯟꯅꯔꯤꯕꯥ ꯐꯣꯜꯕꯦꯛ ꯚꯦꯜꯌꯨꯁꯤꯡ ꯑꯦꯞꯂꯥꯏ ꯇꯧꯏ꯫ ꯈꯨꯗꯝ ꯑꯣꯏꯅꯥ, ꯑꯩꯈꯣꯌꯅꯥ var(--bs-rows, 1)
ꯑꯩꯈꯣꯌꯒꯤ CSS ꯒ꯭ꯔꯤꯗ ꯔꯣꯁꯤꯡꯒꯤꯗꯃꯛ ꯁꯤꯖꯤꯟꯅꯩ, ꯃꯁꯤꯅꯥ ꯏꯒꯅꯣꯔ ꯇꯧꯏ --bs-rows
ꯃꯔꯃꯗꯤ ꯃꯗꯨ ꯍꯧꯖꯤꯛ ꯐꯥꯑꯣꯕꯥ ꯃꯐꯝ ꯑꯃꯠꯇꯗꯥ ꯁꯦꯠ ꯇꯧꯗ꯭ꯔꯤ꯫ ꯃꯁꯤ ꯑꯣꯏꯔꯕꯥ ꯃꯇꯨꯡꯗꯥ, .grid
ꯏꯟꯁꯇꯦꯟꯁ ꯑꯗꯨꯅꯥ ꯚꯦꯜꯌꯨ ꯑꯗꯨ 1
.
ꯒ꯭ꯔꯤꯗ ꯀ꯭ꯂꯥꯁꯁꯤꯡ ꯂꯩꯇꯦ꯫
ꯈꯨꯗꯛꯀꯤ ꯑꯣꯏꯕꯥ ꯑꯉꯥꯡꯁꯤꯡꯒꯤ ꯑꯦꯂꯤꯃꯦꯟꯇꯁꯤꯡ ꯑꯁꯤ ꯒ꯭ꯔꯤꯗ ꯑꯥꯏꯇꯦꯃꯁꯤꯡꯅꯤ, ꯃꯔꯝ ꯑꯗꯨꯅꯥ ꯃꯈꯣꯌ ꯑꯁꯤ ꯃꯌꯦꯛ ꯁꯦꯡꯅꯥ ꯀ꯭ꯂꯥꯁ .grid
ꯑꯃꯥ ꯍꯥꯄꯆꯤꯟꯗꯅꯥ ꯁꯥꯏꯖ ꯇꯧꯒꯅꯤ꯫.g-col
<div class="grid" style="--bs-columns: 3;">
<div>Auto-column</div>
<div>Auto-column</div>
<div>Auto-column</div>
</div>
ꯀꯣꯂꯝ ꯑꯃꯁꯨꯡ ꯒꯦꯄꯁꯤꯡ꯫
ꯀꯣꯂꯃꯁꯤꯡꯒꯤ ꯃꯁꯤꯡ ꯑꯃꯁꯨꯡ ꯒꯦꯞ ꯑꯗꯨ ꯑꯦꯗꯖꯁ꯭ꯠ ꯇꯧ꯫
<div class="grid" 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" 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" 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" 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>
ꯃꯔꯝ ꯑꯗꯨꯅꯥ, ꯅꯍꯥꯛꯅꯥ ꯇꯣꯉꯥꯟ-ꯇꯣꯉꯥꯅꯕꯥ ꯚꯔꯇꯤꯀꯦꯜ ꯑꯃꯁꯨꯡ ꯍꯣꯔꯥꯏꯖꯣꯟꯇꯦꯜ gap
s ꯂꯩꯕꯥ ꯌꯥꯏ, ꯃꯈꯣꯌꯅꯥ ꯚꯦꯜꯌꯨ ꯑꯃꯈꯛꯇꯃꯛ (ꯃꯥꯏꯀꯩ ꯄꯨꯝꯅꯃꯛ) ꯅꯠꯠꯔꯒꯥ ꯚꯦꯜꯌꯨ ꯄꯦꯔꯥ ꯑꯃꯥ (ꯚꯔꯇꯤꯀꯦꯜ ꯑꯃꯁꯨꯡ ꯍꯣꯔꯥꯏꯖꯣꯟꯇꯦꯜ) ꯂꯧꯕꯥ ꯌꯥꯏ꯫ ꯃꯁꯤꯒꯤꯗꯃꯛ ꯏꯅꯂꯥꯏꯟ ꯁ꯭ꯇꯥꯏꯜ ꯑꯃꯒꯥ ꯂꯣꯌꯅꯅꯥ ꯑꯦꯞꯂꯥꯏ ꯇꯧꯕꯥ ꯌꯥꯏ gap
, ꯅꯠꯔꯒꯥ ꯑꯩꯈꯣꯌꯒꯤ --bs-gap
ꯁꯤ.ꯑꯦꯁ.ꯑꯦꯁ.
<div class="grid" 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" 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>