CSS Grid

Bootstrap-ov podrazumevani grid sistem predstavlja kulminaciju više od decenije tehnika CSS rasporeda, koje su isprobali i testirali milioni ljudi. Ali, kreiran je i bez mnogih modernih CSS karakteristika i tehnika koje vidimo u pretraživačima kao što je novi CSS Grid.

Kako radi

Uz Bootstrap 5, dodali smo opciju da omogućimo odvojeni grid sistem koji je izgrađen na CSS Grid-u, ali sa Bootstrap-om. I dalje dobijate časove koje možete primeniti po volji da biste izgradili responzivne izglede, ali sa drugačijim pristupom ispod haube.

• CSS Grid je uključen. Onemogućite podrazumevani sistem mreže postavljanjem $enable-grid-classes: falsei omogućite CSS Grid podešavanjem $enable-cssgrid: true. Zatim ponovo kompajlirajte svoj Sass.

• Zamijenite instance .rowsa .grid. Klasa .gridpostavlja display: gridi kreira a na grid-templatekojem gradite svoj HTML.

• Zamijenite .col-*klase .g-col-*klasama. To je zato što naše CSS Grid kolone koriste grid-columnsvojstvo umjesto width.

• Kolone i veličine oluka se postavljaju preko CSS varijabli. Postavite ih na nadređeni .gridi prilagodite kako god želite, umetnuti ili u stilskoj tablici, pomoću --bs-columnsi --bs-gap.

U budućnosti, Bootstrap će se vjerovatno prebaciti na hibridno rješenje jer je gapsvojstvo postiglo skoro punu podršku pretraživača za flexbox.

Ključne razlike

U poređenju sa zadanim mrežnim sistemom:

• Flex uslužni programi ne utiču na CSS Grid kolone na isti način.

• Praznine zamjenjuju oluke. Svojstvo gapzamjenjuje horizontalu paddingiz našeg zadanog sistema mreže i funkcionira više kao margin.

• Kao takvi, za razliku od .rows, .grids nemaju negativne margine i margine se ne mogu koristiti za promjenu oluka mreže. Po zadanim postavkama praznine u mreži se primjenjuju horizontalno i vertikalno. Pogledajte odjeljak za prilagođavanje za više detalja.

• Inline i prilagođene stilove treba posmatrati kao zamjenu za klase modifikatora (npr. style="--bs-columns: 3;"vs class="row-cols-3").

• Ugniježđenje funkcionira slično, ali može zahtijevati da poništite broj kolona za svaku instancu ugniježđenog .grid. Za detalje pogledajte odjeljak o gniježđenju .

Primjeri

Tri kolone

Tri kolone jednake širine u svim okvirima za prikaz i uređajima mogu se kreirati korištenjem .g-col-4klasa. Dodajte responzivne klase da promijenite izgled prema veličini okvira za prikaz.

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

Responsive

Koristite responzivne klase da prilagodite svoj izgled u svim okvirima za prikaz. Ovdje počinjemo s dvije kolone na najužim okvirima za prikaz, a zatim rastemo do tri kolone na srednjim okvirima za prikaz i iznad.

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

Uporedite to sa ovim rasporedom u dva stupca na svim okvirima za prikaz.

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

Omotavanje

Stavke mreže se automatski prelamaju u sljedeći red kada horizontalno više nema mjesta. Imajte na umu da se ovo gapodnosi na horizontalne i vertikalne praznine između stavki mreže.

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

Počinje

Početne klase imaju za cilj zamijeniti klase offset naše zadane mreže, ali one nisu potpuno iste. CSS Grid kreira predložak mreže kroz stilove koji govore pretraživačima da “počnu od ove kolone” i “završe u ovoj koloni”. Ta svojstva su grid-column-starti grid-column-end. Početak nastave je skraćenica za prve. Uparite ih s klasama stupaca kako biste odredili veličinu i poravnajte svoje stupce kako god vam je potrebno. Početne klase počinju na 1as 0je nevažeća vrijednost za ova svojstva.

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

Auto kolone

Kada nema klasa na stavkama mreže (neposredna djeca a .grid), svaka stavka mreže će automatski biti veličine jedne kolone.

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

Ovo ponašanje se može miješati s klasama stupaca mreže.

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

Nesting

Slično našem zadanom grid sistemu, naš CSS Grid omogućava lako ugniježđenje .grids. Međutim, za razliku od zadane, ova mreža nasljeđuje promjene u redovima, stupcima i prazninama. Razmotrite primjer u nastavku:

• Zadati broj kolona poništavamo lokalnom CSS varijablom: --bs-columns: 3.
• U prvoj auto-koloni, broj kolona je naslijeđen i svaka kolona je jedna trećina dostupne širine.
• U drugoj auto-koloni, resetovali smo broj kolona na ugniježđenoj .gridna 12 (naš zadano).
• Treća auto-kolona nema ugniježđeni sadržaj.

U praksi ovo omogućava složenije i prilagođene rasporede u poređenju sa našim podrazumevanim mrežnim sistemom.

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

Prilagođavanje

Prilagodite broj kolona, ​​broj redova i širinu praznina pomoću lokalnih CSS varijabli.

Ove CSS varijable nemaju zadanu vrijednost; umjesto toga, primjenjuju rezervne vrijednosti koje se koriste dok se ne obezbijedi lokalna instanca. Na primjer, koristimo var(--bs-rows, 1)za naše CSS Grid redove, koji zanemaruju --bs-rowsjer to još nigdje nije postavljeno. Jednom kada bude, .gridinstanca će koristiti tu vrijednost umjesto zamjenske vrijednosti 1.

Nema mrežnih klasa

Neposredni podređeni elementi .gridsu stavke mreže, tako da će biti veličine bez eksplicitnog dodavanja .g-colklase.

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

Kolone i praznine

Podesite broj kolona i razmak.

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

Dodavanje redova

Dodavanje više redova i promjena položaja kolona:

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

Praznine

Promijenite vertikalne praznine samo modifikacijom row-gap. Imajte na umu da koristimo gapna .grids, ali row-gapi column-gapmože se mijenjati po potrebi.

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

Zbog toga možete imati različite vertikalne i horizontalne gaps, koje mogu uzeti jednu vrijednost (sve strane) ili par vrijednosti (vertikalne i horizontalne). Ovo se može primijeniti s ugrađenim stilom za gap, ili s našom --bs-gapCSS varijablom.

<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

Jedno ograničenje CSS Grid-a je to što se naše zadane klase još uvijek generiraju pomoću dvije Sass varijable $grid-columnsi $grid-gutter-width. Ovo efektivno unaprijed određuje broj klasa generiranih u našem kompajliranom CSS-u. Ovdje imate dvije opcije:

• Izmijenite te zadane Sass varijable i ponovo kompajlirajte svoj CSS.
• Koristite ugrađene ili prilagođene stilove da povećate date klase.

Na primjer, možete povećati broj stupaca i promijeniti veličinu praznina, a zatim dimenzionirati svoje "kolone" mješavinom inline stilova i unaprijed definiranih klasa stupaca CSS Grid (npr. .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>