CSS mreža

Bootstrapov zadani sustav rešetki predstavlja vrhunac više od desetljeća tehnika CSS rasporeda, koje su isprobali i testirali milijuni ljudi. No, također je stvoren bez mnogih modernih CSS značajki i tehnika koje vidimo u preglednicima kao što je novi CSS Grid.

Kako radi

Uz Bootstrap 5 dodali smo opciju za omogućavanje zasebnog grid sustava koji je izgrađen na CSS Gridu, ali s Bootstrap zaokretom. I dalje dobivate tečajeve koje možete primijeniti po želji za izradu responzivnih izgleda, ali s drugačijim pristupom ispod haube.

• CSS Grid je opt-in. Onemogućite zadani sustav rešetki postavkom $enable-grid-classes: falsei omogućite CSS rešetku postavkom $enable-cssgrid: true. Zatim ponovno kompajlirajte svoj Sass.

• Zamijenite primjerke .rows .grid. Klasa .gridpostavlja display: gridi stvara na temelju grid-templatekojeg nadograđujete svoj HTML.

• .col-*Klase zamijenite .g-col-*klasama. To je zato što naši stupci CSS mreže koriste grid-columnsvojstvo umjesto width.

• Veličine stupaca i oluka postavljaju se putem CSS varijabli. Postavite ih na nadređeni .gridi prilagodite kako god želite, u tekstu ili u listu stilova, s --bs-columnsi --bs-gap.

U budućnosti će se Bootstrap vjerojatno prebaciti na hibridno rješenje budući da je gapvlasništvo postiglo gotovo punu podršku preglednika za flexbox.

Ključne razlike

U usporedbi sa zadanim mrežnim sustavom:

• Flex pomoćni programi ne utječu na stupce CSS mreže na isti način.

• Gaps zamjenjuje oluke. Svojstvo gapzamjenjuje horizontalu paddingiz našeg zadanog sustava rešetki i funkcionira više poput margin.

• Kao takvi, za razliku od .rows, .grids nemaju negativne margine i pomoćni programi margina ne mogu se koristiti za promjenu oluka mreže. Razmaci mreže prema zadanim se postavkama primjenjuju vodoravno i okomito. Za više pojedinosti pogledajte odjeljak za prilagodbu .

• Umetnuti i prilagođeni stilovi trebaju se promatrati kao zamjena za klase modifikatora (npr. style="--bs-columns: 3;"vs class="row-cols-3").

• Ugniježđivanje funkcionira slično, ali može zahtijevati da poništite broj stupaca na svakoj instanci ugniježđenog .grid. Za detalje pogledajte odjeljak o gniježđenju .

Primjeri

Tri stupca

Tri stupca jednake širine na svim prozorima i uređajima mogu se stvoriti korištenjem .g-col-4klasa. Dodajte responzivne klase za promjenu izgleda prema veličini okvira za prikaz.

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

Uzvratni

Upotrijebite responzivne klase za prilagodbu izgleda na prozorima. Ovdje počinjemo s dva stupca na najužim okvirima za prikaz, a zatim prelazimo na tri stupca na srednjim okvirima za prikaz i iznad.

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

Usporedite to s ovim rasporedom u dva stupca na svim prozorima.

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

Zamatanje

Stavke mreže automatski se prelamaju u sljedeći redak kada nema više mjesta vodoravno. Imajte na umu da se gapodnosi na vodoravne i okomite razmake između stavki mreže.

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

Počinje

Početne klase imaju za cilj zamijeniti naše zadane klase pomaka mreže, ali nisu u potpunosti iste. CSS Grid stvara predložak rešetke kroz stilove koji govore preglednicima da "počinju u ovom stupcu" i "završavaju u ovom stupcu". Ta svojstva su grid-column-starti grid-column-end. Početak nastave je skraćenica za prvo. Uparite ih s klasama stupaca kako biste odredili veličinu i poravnali stupce kako god želite. Početak nastave počinje u 1as 0je nevažeća vrijednost za ova svojstva.

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

Kada nema klasa na mrežnim stavkama (neposredna djeca .grid), svaka će mrežna stavka automatski biti veličine jednog stupca.

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

Ovo se ponašanje može pomiješati s klasama stupaca rešetke.

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

Gniježđenje

Slično našem zadanom sustavu rešetki, naša CSS mreža omogućuje jednostavno ugniježđivanje .grids. Međutim, za razliku od zadane, ova rešetka nasljeđuje promjene u recima, stupcima i prazninama. Razmotrite primjer u nastavku:

• Zadani broj stupaca nadjačavamo lokalnom CSS varijablom: --bs-columns: 3.
• U prvom automatskom stupcu nasljeđuje se broj stupaca i svaki stupac ima jednu trećinu dostupne širine.
• U drugom automatskom stupcu poništili smo broj stupaca na ugniježđenom stupcu na .grid12 (naša zadana postavka).
• Treći automatski stupac nema ugniježđeni sadržaj.

U praksi to omogućuje složenije i prilagođenije izglede u usporedbi s našim zadanim sustavom rešetki.

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

Prilagodba

Prilagodite broj stupaca, broj redaka i širinu praznina s lokalnim CSS varijablama.

Ove CSS varijable nemaju zadanu vrijednost; umjesto toga, primjenjuju rezervne vrijednosti koje se koriste dok se ne pruži lokalna instanca. Na primjer, koristimo var(--bs-rows, 1)za naše retke CSS mreže, koji ignoriraju --bs-rowsjer to još nigdje nije postavljeno. Kada bude, .gridinstanca će koristiti tu vrijednost umjesto zamjenske vrijednosti 1.

Nema klasa rešetki

Neposredni podređeni elementi .gridsu mrežne stavke, tako da će im se odrediti veličina bez eksplicitnog dodavanja .g-colklase.

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

Stupci i praznine

Podesite broj stupaca i razmak.

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

Dodavanje redaka

Dodavanje više redaka i promjena položaja stupaca:

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

praznine

Promijenite okomite razmake samo modificiranjem row-gap. Imajte na umu da koristimo gapon .grids, ali row-gapi column-gapmože se mijenjati prema potrebi.

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

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

<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

Jedno ograničenje CSS Grida je da naše zadane klase još uvijek generiraju dvije Sass varijable $grid-columnsi $grid-gutter-width. To učinkovito unaprijed određuje broj klasa generiranih u našem kompiliranom CSS-u. Ovdje imate dvije mogućnosti:

• Izmijenite te zadane Sass varijable i ponovno kompajlirajte svoj CSS.
• Upotrijebite ugrađene ili prilagođene stilove za povećanje ponuđenih klasa.

Na primjer, možete povećati broj stupaca i promijeniti veličinu razmaka, a zatim dimenzionirati svoje "stupce" kombinacijom ugrađenih stilova i unaprijed definiranih klasa stupaca CSS mreže (npr. .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>