CSS gözenegi

“Bootstrap” -yň deslapky gözenek ulgamy, millionlarça adam tarapyndan synag edilen we synagdan geçen CSS ýerleşdiriş usullarynyň onýyllygynyň iň ýokary derejesini görkezýär. Şeýle-de bolsa, täze CSS Grid ýaly brauzerlerde görýän häzirki zaman CSS aýratynlyklarymyz we usullarymyz bolmazdan döredildi.

Bu nähili işleýär

“Bootstrap 5” bilen, CSS Grid-de gurlan, ýöne “Bootstrap” öwrümi bilen aýratyn gözenek ulgamyny işletmek mümkinçiligini goşduk. Düşünjeli düzülişleri gurmak üçin islän wagtyňyz ulanyp bilersiňiz, ýöne kapotyň aşagyna başgaça çemeleşip bilersiňiz.

• CSS Grid açyk. Sazlamak arkaly deslapky gözenek ulgamyny öçüriň $enable-grid-classes: falsewe sazlamak arkaly CSS Grid-i işlediň $enable-cssgrid: true. Soň bolsa, Sassyňyzy täzeden düzüň.

• Mysallary çalyşyň .row. .gridSynp HTML bilen gurýan zatlaryňyzy .griddüzýär display: gridwe döredýär .grid-template

• .col-*Sapaklary synplar bilen çalyşyň .g-col-*. Munuň sebäbi, CSS Grid sütünlerimiziň grid-columnýerine emlägi ulanýarlar width.

• Sütünler we çukur ululyklary CSS üýtgeýjiler arkaly düzülýär. Bulary ene-atanyň üstünde goýuň .gridwe islän zadyňyzy düzüň, içerki ýa-da stil tablisasynda, --bs-columnswe --bs-gap.

Geljekde “Bootstrap” gibrid çözgüde geçer, sebäbi gapemläk flexbox üçin doly brauzer goldawyny gazandy.

Esasy tapawutlar

Adaty set ulgamy bilen deňeşdirilende:

• Flex hyzmatlary CSS Grid sütünlerine edil şonuň ýaly täsir etmeýär.

• Boşluklar çukurlaryň ýerini alýar. Gozgalmaýan emläk , gözenek ulgamymyzdan gapgorizontal çalyşýar we has köp işleýär .paddingmargin

• Şonuň üçin, s-den tapawutlylykda .row, .gridnegatiw aralyklar ýok we gözenegiň çukurlaryny üýtgetmek üçin margin enjamlary ulanylyp bilinmez. Grid boşluklary keseligine we dikligine ulanylýar. Has giňişleýin maglumat üçin özleşdirmek bölümine serediň.

• Içerki we adaty stilleri üýtgediji synplaryň çalşygy hökmünde görmeli (meselem, style="--bs-columns: 3;"vs class="row-cols-3").

• Höwürtge hem edil şonuň ýaly işleýär, ýöne höwürtgäniň her mysalynda sütün sanlaryňyzy täzeden düzmegiňizi talap edip biler .grid. Jikme-jiklikler üçin höwürtge bölümine serediň.

Mysallar

Üç sütün

.g-col-4Viewshli görnüşler we enjamlar boýunça deň giňlikdäki üç sütün sapaklary ulanyp döredilip bilner . Görkezişiň ululygy boýunça tertibi üýtgetmek üçin täsirli synplary goşuň .

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

Jogapkärçilikli

Görkeziş görnüşlerinde ýerleşişiňizi sazlamak üçin täsirli synplary ulanyň. Bu ýerde iň dar görnüşdäki iki sütünden başlaýarys, soňra orta görnüşdäki we ýokarda üç sütüne çenli ösýäris.

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

Viewhli görnüşdäki bu iki sütün düzülişi bilen deňeşdiriň.

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

Gaplamak

Gorizontal ýer ýok wagty gözenegiň elementleri awtomatiki usulda indiki setire örtülýär. Panel gapelementleriniň arasyndaky keseligine we dikligine boşluklara degişlidir.

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

Başlaýar

Başlangyç synplar, deslapky setiň ofset synplaryny çalyşmagy maksat edinýär, ýöne olar düýbünden birmeňzeş däl. CSS Grid brauzerlere “şu sütünden başlamaly” we “şu sütünde gutarmaly” diýýän stilleriň üsti bilen gözenek şablonyny döredýär. Şol häsiýetler grid-column-startwe grid-column-end. Başlangyç sapaklary öňki sözleriň stenografiýasydyr. Sütünleriň ölçegleri we zerur bolmagy üçin sütün synplary bilen jübütläň. Başlangyç sapaklary bu 1häsiýetler 0üçin nädogry bahadan başlaýar.

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

Awtoulag sütünleri

Panel elementlerinde (a-nyň ýakyn çagalary) sapaklar ýok bolanda .grid, her gözenegiň elementi awtomatiki usulda bir sütüne öwrüler.

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

Bu özüni alyp barşyň gözenek sütünleri bilen garylyp bilner.

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

Höwürtge

Adaty gözenek ulgamymyz ýaly, CSS Grid-lerimiz aňsat höwürtge döretmäge mümkinçilik berýär .grid. Şeýle-de bolsa, deslapkydan tapawutlylykda, bu set setirlerde, sütünlerde we boşluklarda üýtgeşmeleri miras alýar. Aşakdaky mysala serediň:

• CSerli CSS üýtgeýjisi bilen sütünleriň deslapky sanyny ýok edýäris : --bs-columns: 3.
• Ilkinji awto-sütünde sütün sanlary miras galyp, her sütün elýeterli giňligiň üçden bir bölegidir.
• .gridIkinji awto-sütünde, höwürtgedäki sütün sanyny 12-e (deslapky) täzeden düzdük .
• Üçünji awtomatik sütüniň içinde mazmun ýok.

Iş ýüzünde, adaty set ulgamymyz bilen deňeşdirilende has çylşyrymly we adaty düzülişlere mümkinçilik berýär.

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

Düzeltmek

Sütünleriň sanyny, hatarlaryň sanyny we boşluklaryň giňligini ýerli CSS üýtgeýjileri bilen sazlaň.

Bu CSS üýtgeýjileriň asyl bahasy ýok; munuň ýerine, ýerli mysal berilýänçä ulanylýan yza gaýdyş bahalaryny ulanýarlar . Mysal üçin, var(--bs-rows, 1)CSS Grid hatarlarymyz üçin ulanýarys, bu --bs-rowsentek hiç ýerde kesgitlenmedi. Bir gezek bolansoň, .gridmysal yzyna gaýtarylýan bahanyň ýerine şol bahany ulanar 1.

Tor synplary ýok

Çagalaryň derrew elementleri gözenegiň elementleri, şonuň üçin synpy .gridaç-açan goşmazdan ululykda bolar ..g-col

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

Sütünler we boşluklar

Sütünleriň sanyny we boşlugy sazlaň.

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

Setir goşmak

Has köp hatar goşmak we sütünleriň ýerleşişini üýtgetmek:

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

Boşluklar

Dik boşluklary diňe üýtgetmek arkaly üýtgediň row-gap. gapS - de ulanýandygymyzy unutmaň , .gridýöne zerur bolanda üýtgedilip bilner.row-gapcolumn-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>

Şol sebäpli gapbir bahany (ähli taraplary) ýa-da jübüt bahalary (dik we keseligine) alyp bilýän dürli dik we keseligine eýe bolup bilersiňiz. gapBu, içerki stil ýa-da --bs-gapCSS üýtgeýjimiz bilen ulanylyp bilner .

<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

CSS Grid-iň bir çäklendirmesi, başlangyç synplarymyzyň henizem iki Sass üýtgeýjisi tarapyndan döredilmegi $grid-columnswe $grid-gutter-width. Bu, düzülen CSS-de döredilen synplaryň sanyny netijeli kesgitleýär. Bu ýerde iki wariant bar:

• Şol adaty Sass üýtgeýjilerini üýtgediň we CSS-i täzeden düzüň.
• Berlen synplary köpeltmek üçin içerki ýa-da adaty stilleri ulanyň.

Mysal üçin, sütün sanyny köpeldip, boşlugyň ululygyny üýtgedip bilersiňiz, soňra “sütünleriňizi” içerki stilleriň we öňünden kesgitlenen CSS Grid sütün synplarynyň garyndysy bilen ulaldyp bilersiňiz (mysal üçin .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>