CSS mreža
Naučite kako omogućiti, koristiti i prilagoditi naš alternativni sustav izgleda izgrađen na CSS Grid s primjerima i isječcima koda.
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: false
i omogućite CSS rešetku postavkom$enable-cssgrid: true
. Zatim ponovno kompajlirajte svoj Sass. -
Zamijenite primjerke
.row
s.grid
. Klasa.grid
postavljadisplay: grid
i stvara na temeljugrid-template
kojeg nadograđujete svoj HTML. -
.col-*
Klase zamijenite.g-col-*
klasama. To je zato što naši stupci CSS mreže koristegrid-column
svojstvo umjestowidth
. -
Veličine stupaca i oluka postavljaju se putem CSS varijabli. Postavite ih na nadređeni
.grid
i prilagodite kako god želite, u tekstu ili u listu stilova, s--bs-columns
i--bs-gap
.
U budućnosti će se Bootstrap vjerojatno prebaciti na hibridno rješenje budući da je gap
vlasniš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
gap
zamjenjuje horizontalupadding
iz našeg zadanog sustava rešetki i funkcionira više poputmargin
. -
Kao takvi, za razliku od
.row
s,.grid
s 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;"
vsclass="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-4
klasa. Dodajte responzivne klase za promjenu izgleda 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>
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">
<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">
<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 gap
odnosi na vodoravne i okomite razmake 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 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-start
i 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 1
as 0
je 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 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">
<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">
<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 .grid
s. 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
.grid
12 (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" 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.
Varijabilna | Rezervna vrijednost | Opis |
---|---|---|
--bs-rows |
1 |
Broj redaka u vašem predlošku rešetke |
--bs-columns |
12 |
Broj stupaca u vašem predlošku rešetke |
--bs-gap |
1.5rem |
Veličina razmaka između stupaca (vertikalno i vodoravno) |
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-rows
jer to još nigdje nije postavljeno. Kada bude, .grid
instanca će koristiti tu vrijednost umjesto zamjenske vrijednosti 1
.
Nema klasa rešetki
Neposredni podređeni elementi .grid
su mrežne stavke, tako da će im se odrediti veličina bez eksplicitnog dodavanja .g-col
klase.
<div class="grid" 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" 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 redaka
Dodavanje više redaka i promjena položaja stupaca:
<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 okomite razmake samo modificiranjem row-gap
. Imajte na umu da koristimo gap
on .grid
s, ali row-gap
i column-gap
može se mijenjati prema 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 okomite i vodoravne gap
s, koji mogu imati jednu vrijednost (sve strane) ili par vrijednosti (okomite i vodoravne). Ovo se može primijeniti s ugrađenim stilom za gap
ili s našom --bs-gap
CSS 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 Grida je da naše zadane klase još uvijek generiraju dvije Sass varijable $grid-columns
i $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" 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>