CSS rács

A Bootstrap alapértelmezett rácsrendszere több mint egy évtizedes CSS-elrendezési technikák csúcspontja, amelyet emberek milliói próbáltak ki és teszteltek. De emellett számos modern CSS-funkció és -technika nélkül hozták létre, amelyeket a böngészőkben, például az új CSS-rácsban látunk.

Hogyan működik

A Bootstrap 5-ben hozzáadtuk a CSS Gridre épülő, de Bootstrap csavarral rendelkező külön grid rendszer engedélyezését. Továbbra is kaphat olyan kurzusokat, amelyekre tetszés szerint jelentkezhet reszponzív elrendezések létrehozására, de a motorháztető alatt más megközelítéssel.

• A CSS Grid feliratkozási lehetőség. Az alapértelmezett rácsrendszer letiltása beállítással $enable-grid-classes: false, a CSS Grid engedélyezése pedig a beállítással $enable-cssgrid: true. Ezután fordítsa újra a Sass-t.

• Cserélje le a példányokat erre .row: .grid. Az .gridosztály beállít display: gridés létrehoz egy olyan elemet grid-template, amelyre építhetsz a HTML-kóddal.

• Cserélje .col-*ki az osztályokat .g-col-*osztályokkal. Ennek az az oka, hogy CSS Grid oszlopaink a grid-columntulajdonságot használják a helyett width.

• Az oszlopok és ereszcsatornák méretét CSS-változók állítják be. Állítsa be ezeket a szülőn .grid, és tetszés szerint testreszabhatja, soron belül vagy stíluslapon a --bs-columnsés gombokkal --bs-gap.

A jövőben a Bootstrap valószínűleg hibrid megoldásra fog áttérni, mivel a gaptulajdon elérte a flexbox szinte teljes böngészőtámogatását.

Főbb különbségek

Az alapértelmezett rácsrendszerhez képest:

• A Flex segédprogramok nem hatnak ugyanúgy a CSS Grid oszlopaira.

• A rések helyettesítik az ereszcsatornákat. A tulajdonság az alapértelmezett rácsrendszerünkből gapa vízszintes helyébe lép , és inkább a .paddingmargin

• Mint ilyen, az s-től eltérően az .rows- .gridnek nincs negatív margója, és a margó segédprogramok nem használhatók a rács ereszcsatornáinak cseréjére. A rácsrések alapértelmezés szerint vízszintesen és függőlegesen kerülnek alkalmazásra. További részletekért lásd a testreszabási részt .

• A soron belüli és egyéni stílusokat a módosító osztályok helyettesítőjeként kell tekinteni (pl. style="--bs-columns: 3;"vs class="row-cols-3").

• A beágyazás hasonlóan működik, de előfordulhat, hogy a beágyazott példányok minden egyes példányánál vissza kell állítania az oszlopok számát .grid. A részletekért lásd a beágyazási részt .

Példák

Három oszlop

.g-col-4Az osztályok használatával három egyenlő szélességű oszlop hozható létre az összes nézetablakban és eszközön . Adjon hozzá adaptív osztályokat az elrendezés nézetablak mérete szerinti módosításához.

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

Fogékony

Használjon adaptív osztályokat az elrendezés módosításához a nézetablakok között. Itt két oszloppal kezdjük a legszűkebb nézetablakban, majd három oszlopra nőünk a közepes és magasabb nézetablakban.

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

Hasonlítsa össze ezt a két oszlopos elrendezéssel az összes nézetablakban.

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

Csomagolás

A rácselemek automatikusan a következő sorba kerülnek, amikor vízszintesen nincs több hely. Vegye figyelembe, hogy a gaprácselemek közötti vízszintes és függőleges résekre vonatkozik.

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

Indul

A Start osztályok célja az alapértelmezett rácsunk eltolási osztályainak lecserélése, de nem teljesen egyformák. A CSS Grid egy rácssablont hoz létre olyan stílusok segítségével, amelyek azt mondják a böngészőknek, hogy „ebben az oszlopban kezdődik” és „vége ennél az oszlopnál”. Ezek a tulajdonságok grid-column-startés grid-column-end. A start osztályok az előbbiek rövidítése. Párosítsa őket az oszloposztályokkal a kívánt méret és igazítás érdekében. 1Az osztályok kezdőpontja 0érvénytelen érték ezeknél a tulajdonságoknál.

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

Automatikus oszlopok

Ha nincsenek osztályok a rácselemeken (a közvetlen gyermekei .grid), minden rácselem automatikusan egy oszlopra méreteződik.

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

Ez a viselkedés keverhető rácsoszlop osztályokkal.

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

Fészekrakás

Az alapértelmezett grid rendszerünkhöz hasonlóan a CSS Grid lehetővé teszi az .grids egyszerű egymásba ágyazását. Az alapértelmezetttől eltérően azonban ez a rács örökli a sorok, oszlopok és hézagok változásait. Tekintsük az alábbi példát:

• Az oszlopok alapértelmezett számát felülírjuk egy helyi CSS-változóval: --bs-columns: 3.
• Az első automatikus oszlopban az oszlopok száma öröklődik, és minden oszlop a rendelkezésre álló szélesség egyharmada.
• A második automatikus oszlopban visszaállítottuk a beágyazott oszlopok számát .grid12-re (alapértelmezett).
• A harmadik automatikus oszlopban nincs beágyazott tartalom.

A gyakorlatban ez összetettebb és egyedibb elrendezéseket tesz lehetővé az alapértelmezett rácsrendszerünkhöz képest.

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

Testreszabás

Helyi CSS-változókkal testreszabhatja az oszlopok számát, a sorok számát és a rések szélességét.

Ezeknek a CSS-változóknak nincs alapértelmezett értéke; ehelyett tartalék értékeket alkalmaznak, amelyeket addig használnak, amíg egy helyi példányt nem biztosítanak. Például var(--bs-rows, 1)a CSS Grid soraihoz használjuk, ami figyelmen kívül hagyja, --bs-rowsmert még sehol nincs beállítva. Ha ez megtörtént, a .gridpéldány ezt az értéket fogja használni a tartalék értéke helyett 1.

Nincsenek rácsosztályok

Az azonnali leszármazott elemei .gridrácselemek, így a méretük anélkül történik, hogy kifejezetten .g-colosztályt kellene hozzáadni.

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

Oszlopok és rések

Állítsa be az oszlopok számát és a hézagot.

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

Sorok hozzáadása

További sorok hozzáadása és az oszlopok elhelyezésének módosítása:

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

Hézagok

A függőleges hézagokat csak a row-gap. Vegye figyelembe, hogy gapaz .grids-en használjuk, de a row-gapés column-gapszükség szerint módosítható.

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

Emiatt különböző függőleges és vízszintes gaps-ek lehetnek, amelyek egy értéket vehetnek fel (minden oldalon) vagy egy értékpárt (függőleges és vízszintes). Ezt a beépített stílussal gapvagy a --bs-gapCSS-változónkkal lehet alkalmazni.

<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

A CSS Grid egyik korlátja, hogy az alapértelmezett osztályainkat továbbra is két Sass-változó $grid-columnsés $grid-gutter-width. Ez hatékonyan előre meghatározza az összeállított CSS-ben generált osztályok számát. Itt két lehetőséged van:

• Módosítsa ezeket az alapértelmezett Sass-változókat, és fordítsa újra a CSS-t.
• Használjon soron belüli vagy egyéni stílusokat a biztosított osztályok bővítéséhez.

Például növelheti az oszlopok számát és módosíthatja a hézag méretét, majd méretezheti az „oszlopokat” soron belüli stílusok és előre meghatározott CSS-rács oszloposztályok (pl. .g-col-4) keverékével.

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