Ekisenge kya CSS

Enkola ya Bootstrap eya default grid ekiikirira entikko y’obukodyo bw’okuteekawo CSS obusukka mu myaka kkumi, obugezeseddwa era ne bugezesebwa obukadde n’obukadde bw’abantu. Naye, era yatondebwa nga tewali bingi ku bikozesebwa bya CSS eby’omulembe n’obukodyo bwe tulaba mu browser nga CSS Grid empya.

Engeri gye kikola

Nga tulina Bootstrap 5, twongeddeko eky’okusobozesa enkola ya grid ey’enjawulo ezimbiddwa ku CSS Grid, naye nga erina Bootstrap twist. Okyafuna kiraasi z’osobola okusaba ku whim okuzimba layouts eziddamu, naye ng’olina enkola ey’enjawulo wansi wa hood.

• CSS Grid ye kwesalirawo okuyingira. Lemesa enkola ya grid eya bulijjo ng'oteekawo $enable-grid-classes: falseera osobozesa CSS Grid ng'oteekawo $enable-cssgrid: true. Olwo, ddamu okukuŋŋaanya Sass yo.

• Kikyuse ebikozesebwa bya .rowne .grid. Ekibiina .gridkiteeka display: gridera ne kikola a grid-templateky’ozimbako ne HTML yo.

• Kikyuseemu .col-*kiraasi ziteekemu .g-col-*kiraasi. Kino kiri bwe kityo kubanga ennyiriri zaffe eza CSS Grid zikozesa grid-columnekintu mu kifo kya width.

• Ennyiriri ne sayizi za gutter ziteekebwawo nga ziyita mu nkyukakyuka za CSS. Bino biteeke ku muzadde .gridera osengeke nga bw’oyagala, mu layini oba mu sitayiro, ne --bs-columnsne --bs-gap.

Mu biseera eby’omu maaso, Bootstrap ejja kukyuka okudda ku nkola ya hybrid nga ekintu gapkino kituuse kumpi obuwagizi bwa browser obujjuvu eri flexbox.

Enjawulo enkulu

Bw’ogeraageranya n’enkola ya grid eya bulijjo:

• Flex utilities tezikwata ku mpagi za CSS Grid mu ngeri y'emu.

• Ebituli bikyusa emidumu. Eky'obugagga gapkikyusa horizontal paddingokuva mu nkola yaffe eya grid eya bulijjo era kikola okusinga nga margin.

• Nga bwekiri, obutafaananako .rows, .grids tezirina margins negativu era margin utilities teziyinza kukozesebwa kukyusa grid gutters. Ebituli bya giridi bikozesebwa mu bbanga ne mu bbanga nga bwe kibadde. Laba ekitundu ky’okulongoosa okumanya ebisingawo.

• Emisono egy’omu layini n’egya custom girina okutunuulirwa ng’ebikyusa kiraasi z’abakyusa (okugeza, style="--bs-columns: 3;"vs class="row-cols-3").

• Okuteeka ebisu kukola mu ngeri y'emu, naye kuyinza okukwetaagisa okuddamu okuteekawo okubala kw'ennyiriri zo ku buli kifaananyi kya nested .grid. Laba ekitundu ky’okuzimba ebisu okumanya ebisingawo.

Eby’okulabirako

Empagi ssatu

Ennyiriri ssatu ez’obugazi obwenkanankana mu bifo byonna eby’okulaba n’ebyuma zisobola okutondebwa nga tukozesa .g-col-4kiraasi. Okwongerako kiraasi eziddamu okukyusa ensengeka okusinziira ku sayizi y'ekifo eky'okulaba.

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

Okuddamu

Kozesa kiraasi eziddamu okutereeza ensengeka yo okuyita mu bifo eby’okulaba. Wano tutandika n’ennyiriri bbiri ku bifo ebisinga obufunda, n’oluvannyuma ne tukula okutuuka ku mpagi ssatu ku bifo eby’okulaba eby’omu makkati n’okudda waggulu.

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

Geraageranya ekyo ku nteekateeka eno ey’ennyiriri ebbiri ku bifo byonna eby’okulaba.

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

Okuzinga

Ebintu bya grid bizinga otomatiki okutuuka ku layini eddako nga tewakyali kifo mu bbanga. Weetegereze nti the gapekola ku bbanga erya horizontal ne vertical wakati w’ebintu bya grid.

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

Atandika

Start classes zigenderera okudda mu kifo kyaffe default grid's offset classes, naye tezifaanagana ddala. CSS Grid ekola ekifaananyi kya grid okuyita mu sitayiro ezigamba ba browser “okutandika ku nnyiriri eno” ne “okukoma ku nnyiriri eno.” Ebintu ebyo bye bino grid-column-startne grid-column-end. Emisomo egy’okutandika giba gya shorthand eri egy’olubereberye. Zigatta ne kiraasi z’ennyiriri okusinziira ku sayizi n’okulaganya ennyiriri zo nga bwe weetaaga. Start classes zitandika ku 1nga bwe 0kiri omuwendo ogutali mutuufu ku by'obugagga bino.

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

Empagi z’emmotoka

Bwe waba tewali kiraasi ku bintu bya giridi (abaana ab’amangu aba a .grid), buli kintu kya giridi kijja kuba kya sayizi ya otomatiki okutuuka ku mpagi emu.

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

Enneeyisa eno esobola okutabulwa ne kiraasi z’ennyiriri za giridi.

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

Okuzimba ebisu

Okufaananako n’enkola yaffe eya grid eya bulijjo, CSS Grid yaffe ekkiriza okuteeka ebisu ebyangu ebya .grids. Naye, obutafaananako na kisookerwako, giridi eno esikira enkyukakyuka mu nnyiriri, empagi, n’ebituli. Lowooza ku kyokulabirako kino wammanga:

• Tukyusa omuwendo gw'ennyiriri ogusookerwako n'enkyukakyuka ya CSS ey'ekitundu: --bs-columns: 3.
• Mu auto-column esooka, omuwendo gw’ennyiriri gusikira era buli mpagi eba kimu kya kusatu eky’obugazi obuliwo.
• Mu auto-column eyokubiri, tuzzeemu okuteekawo okubala kw'ennyiriri ku nested .gridku 12 (ekisookerwako kyaffe).
• Auto-column eyokusatu terina birimu biteekeddwa mu kisenge.

Mu nkola kino kisobozesa ensengeka ezisingako obuzibu era ez’enjawulo bw’ogeraageranya n’enkola yaffe eya grid eya bulijjo.

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

Okulongoosa

Customize omuwendo gw'ennyiriri, omuwendo gw'ennyiriri, n'obugazi bw'ebituli n'enkyukakyuka za CSS ez'omu kitundu.

Enkyukakyuka zino eza CSS tezirina muwendo gwa bulijjo; mu kifo ky'ekyo, bakozesa emiwendo egy'okudda emabega egikozesebwa okutuusa ng'ekyokulabirako ky'ekitundu kiweereddwa. Okugeza, tukozesa var(--bs-rows, 1)ku nnyiriri zaffe eza CSS Grid, ezibuusa amaaso --bs-rowskubanga ekyo tekinnateekebwawo wonna. Bwe kimala okubaawo, ekifaananyi .gridkijja kukozesa omuwendo ogwo mu kifo ky'omuwendo ogw'okugwa emabega ogwa 1.

Tewali kiraasi za grid

Immediate children elements of .gridare grid items, kale bajja kuba sized awatali kwongerako .g-colkiraasi mu bulambulukufu.

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

Empagi n’ebituli

Teekateeka omuwendo gw’ennyiriri n’ekituli.

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

Okwongerako ennyiriri

Okwongerako ennyiriri endala n'okukyusa ensengeka y'ennyiriri:

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

Ebituli

Kyusa ebituli ebyesimbye nga okyusakyusa mu row-gap. Weetegereze nti tukozesa gapku .grids, naye row-gapera column-gapesobola okukyusibwa nga bwe kyetaagisa.

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

Olw’ekyo, osobola okuba ne s ez’enjawulo ez’okwesimbye n’ez’okwesimbye gap, eziyinza okutwala omuwendo gumu (enjuyi zonna) oba emiwendo ebiri (eyesimbye n’egy’okwesimbye). Kino kiyinza okukozesebwa n'omusono ogw'omu layini ogwa gap, oba n'enkyukakyuka yaffe eya --bs-gapCSS.

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

Sass nga bwe kiri

Ekimu ku bikoma ku CSS Grid kwe kuba nti kiraasi zaffe ezisookerwako zikyakolebwa enkyukakyuka za Sass bbiri, $grid-columnsne $grid-gutter-width. Kino kisalawo bulungi omuwendo gwa kiraasi ezikolebwa mu CSS yaffe ekung’aanyiziddwa. Olina engeri bbiri wano:

• Kyuusa enkyukakyuka ezo eza Sass ezisookerwako era oddemu okukuŋŋaanya CSS yo.
• Kozesa emisono egy’omu layini oba egy’enjawulo okwongera ku kiraasi eziweereddwa.

Okugeza, osobola okwongera ku muwendo gw’ennyiriri n’okyusa obunene bw’ekituli, n’oluvannyuma okupima “ennyiriri” zo n’okutabula emisono egy’omu layini n’ebika by’ennyiriri ebya CSS Grid ebyategekebwa edda (okugeza, .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>