Grid ti CSS

Ti default a sistema ti grid ti Bootstrap ket mangibagi ti kulminasion ti nasurok a maysa a dekada a tekniko ti layout ti CSS, a pinadas ken sinubok babaen dagiti minilion a tattao. Ngem, naparsua met daytoy nga awan ti adu kadagiti moderno a tampok ken teknik ti CSS a makitkitatayo kadagiti browser a kas iti baro a CSS Grid.

No kasano ti panagandar dayta

Iti Bootstrap 5, innayonmi ti pagpilian tapno mapalubosan ti naisina a sistema ti grid a naibangon iti CSS Grid, ngem addaan iti Bootstrap twist. Makagun-odka pay laeng kadagiti klase a mabalinmo nga iyaplikar iti kapritso tapno mangbangon kadagiti makasungbat a layout, ngem addaan iti naiduma a pamay-an iti sirok ti hood.

• Ti CSS Grid ket ag-opt-in. Isardeng ti kasisigud a sistema ti grid babaen ti panangisaad $enable-grid-classes: falseken pagbalinen ti CSS Grid babaen ti panangisaad $enable-cssgrid: true. Kalpasanna, i-compile manen ti Sass-mo.

• Sukatan dagiti pagarigan ti .rowbabaen ti .grid. Ti .gridklase ket mangiset display: gridken mangpartuat ti grid-templatea nga ibangonmo babaen ti HTML-mo.

• Sukatan .col-*dagiti klase kadagiti .g-col-*klase. Daytoy ket gapu ta dagiti kolummi ti CSS Grid ket agus-usar ti grid-columntagikua imbes a ti width.

• Dagiti adigi ken dagiti kadakkel ti kanal ket naikeddeng babaen dagiti CSS a variable. Itakderan dagitoy iti nagannak .gridken ipasadaan no kasano ti kayatmo, inline wenno iti maysa nga stylesheet, nga addaan --bs-columnsken --bs-gap.

Iti masakbayan, ti Bootstrap ket nalabit nga agsubli iti mestiso a solusion a kas ti gapsanikua ket nakagun-od ti dandani naan-anay a suporta ti browser para iti flexbox.

Dagiti kangrunaan a nagdumaan

No idilig iti default a sistema ti grid:

• Dagiti utilidad ti Flex ket dida apektaran dagiti kolum ti CSS Grid iti isu met laeng a wagas.

• Dagiti giwang ti mangsukat kadagiti kanal. Ti gaptagikua ket mangsukat ti horisontal paddingmanipud iti default a sistematayo ti grid ken agtignay nga ad-adda a kas ti margin.

• Kas kasta, saan a kas .rowti s, .griddagiti s ket awan dagiti negatibo a margin ken dagiti utilidad ti margin ket saan a mabalin a mausar a mangbalbaliw kadagiti grid gutters. Dagiti giwang ti grid ket maipakat a horisontal ken bertikal babaen ti default. Kitaen ti benneg ti panagpasayaat para kadagiti ad-adu pay a detalye.

• Dagiti inline ken dagiti kostumbre nga estilo ket rumbeng a matmatan a kas dagiti kasukat para kadagiti klase ti mangbalbaliw (kas pagarigan, style="--bs-columns: 3;"vs class="row-cols-3").

• Ti panagumok ket agtrabaho a kapada, ngem mabalin a kasapulan nga i-resetmo dagiti bilang ti kolummo iti tunggal maysa a pagarigan ti maysa a panagumok .grid. Kitaen ti benneg ti panagumok para kadagiti detalye.

Dagiti pagarigan

Tallo a kolum

Tallo nga agpapada ti kalawana a kolum iti ballasiw dagiti amin a viewport ken dagiti alikamen ket mabalin a mapartuat babaen ti panagusar kadagiti .g-col-4klase. Manginayon kadagiti makasungbat a klase tapno baliwan ti layout babaen ti kadakkel ti viewport.

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

Nasungbatan

Usaren dagiti makasungbat a klase tapno maitunos ti layoutmo iti ballasiw dagiti viewport. Ditoy mangrugitayo babaen ti dua a kolum kadagiti kaakikidan a viewport, ken kalpasanna dumakkel iti tallo a kolum kadagiti kalalainganna a viewport ken iti ngato.

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

Idilig dayta iti daytoy dua a layout ti kolum kadagiti amin a viewport.

<div class="grid text-center">
  <div class="g-col-6">.g-col-6</div>
  <div class="g-col-6">.g-col-6</div>
</div>

Panagbalkot

Dagiti banag ti grid ket automatiko a mangbalkot iti sumaganad a linia no awanen ti kuarto a horizontal. Imutektekanyo a ti gapagaplikar kadagiti horizontal ken bertikal a giwang iti nagbaetan dagiti banag ti grid.

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

Mangrugi

Panggep dagiti klase ti panangrugi a sukatan dagiti klase ti offset ti default a gridtayo, ngem saan nga interamente nga agpapada dagitoy. Mangaramid ti CSS Grid iti plantilia ti grid babaen kadagiti estilo a mangibaga kadagiti browser a “mangrugi iti daytoy a kolum” ken “agpatingga iti daytoy a kolum.” Dagita a sanikua ket grid-column-startken grid-column-end. Start classes ket shorthand para iti immuna. Iparis dagitoy kadagiti klase ti adigi tapno kadakkel ken maitunos dagiti kolummo nupay kasta kasapulam. Mangrugi dagiti klase ti panangrugi iti 1kas 0ti saan nga umiso a pateg para kadagitoy a tagikua.

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

Auto nga kolum

No awan dagiti klase kadagiti banag ti grid (dagiti dagus nga annak ti maysa a .grid), tunggal maysa a banag ti grid ket automatiko a ma-size iti maysa a kolum.

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

Daytoy a kababalin ket mabalin a malaokan kadagiti klase ti adigi ti grid.

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

Panag-umok

Kasla ti default a sistemami a grid, ti CSS Gridmi ket mangipalubos ti nalaka a panagumok ti .grids. Nupay kasta, saan a kas ti default, daytoy a grid ket agtawid kadagiti panagbalbaliw kadagiti hilera, adigi, ken dagiti giwang. Usigenyo ti pagarigan iti baba:

• I-overridemi ti default a bilang dagiti kolum babaen ti lokal a CSS a variable: --bs-columns: 3.
• Iti umuna nga auto-kolum, ti bilang ti adigi ket natawid ken tunggal maysa a kolum ket maysa a kakatlo ti magun-od a kalawa.
• Iti maikadua nga auto-column, in-reset tayo ti bilang ti kolum iti nested .griditi 12 (ti default tayo).
• Ti maikatlo nga auto-column ket awan ti naikabil a linaonna.

Iti praktis daytoy ket mangipalubos kadagiti ad-adu a komplikado ken kostumbre a layout no maidilig iti default a sistematayo ti 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>

Panag-customize

Ipasayaat ti bilang dagiti kolum, ti bilang dagiti hilera, ken ti kalawa dagiti giwang nga addaan kadagiti lokal a variable ti CSS.

Dagitoy a variable ti CSS ket awan ti default a pateg; imbes ketdi, iyaplikarda dagiti pateg ti fallback a maus-usar aginggana a maited ti lokal nga instansia. Kas pagarigan, usarenmi var(--bs-rows, 1)para kadagiti hilerami ti CSS Grid, a mangilaksid --bs-rowsgapu ta saan pay a naikeddeng dayta iti sadinoman. Apaman a kasta, ti .gridinstansia ket agusarto iti dayta a pateg imbes a ti fallback a pateg ti 1.

Awan dagiti klase ti grid

Dagiti dagus nga ubbing nga elemento ti .gridket dagiti banag ti grid, isu a dagitoy ket ma-size a saan a nalawag a manginayon ti maysa a .g-colklase.

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

Dagiti kolum ken giwang

Ibaga ti bilang dagiti kolum ken ti giwang.

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

Panagnayon kadagiti hilera

Panagnayon ti ad-adu pay a hilera ken panagbalbaliw ti pannakaikabil dagiti adigi:

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

Dagiti giwang

Baliwan laeng dagiti bertikal a giwang babaen ti panangbalbaliw iti row-gap. Paliiwenyo nga usarentayo gapiti .grids, ngem row-gapken column-gapmabalin a baliwan no kasapulan.

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

Gapu iti dayta, mabalinmo ti maaddaan kadagiti nadumaduma a bertikal ken horisontal gapnga s, a mabalin nga alaen ti maymaysa a pateg (amin a sikigan) wenno ti maysa a paris dagiti pateg (bertikal ken horisontal). Daytoy ket mabalin nga iyaplikar babaen ti estilo ti inline para iti gap, wenno babaen ti --bs-gapCSS a variabletayo.

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

Sass nga

Maysa a limitasion ti CSS Grid ket dagiti default a klasemi ket napataud pay laeng babaen ti dua a Sass a variable, $grid-columnsken $grid-gutter-width. Daytoy ket epektibo a mangikeddeng a nasaksakbay ti bilang dagiti klase a napataud iti naurnongtayo a CSS. Dua ti pagpiliam ditoy:

• Baliwan dagitoy a default a Sass a variable ken urnongen manen ti CSS-mo.
• Usaren dagiti inline wenno kostumbre nga estilo tapno mapaadu dagiti naited a klase.

Kas pagarigan, mabalinmo a paaduen ti bilang ti adigi ken baliwan ti kadakkel ti giwang, ken kalpasanna kadakkelan dagiti “adigim” babaen ti panaglalaok dagiti estilo ti inline ken dagiti nasakbay a naikeddeng a klase ti adigi ti CSS Grid (kas pagarigan, .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>