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

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

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

<div class="grid text-center">
  <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 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 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 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 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 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 ponašanje se može miješati s klasama stupaca mreže.

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

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

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 text-center" 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 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 redova

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

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

One limitation of the CSS Grid is that our default classes are still generated by two Sass variables, $grid-columns and $grid-gutter-width. This effectively predetermines the number of classes generated in our compiled CSS. You have two options here:

• Modify those default Sass variables and recompile your CSS.
• Use inline or custom styles to augment the provided classes.

For example, you can increase the column count and change the gap size, and then size your “columns” with a mix of inline styles and predefined CSS Grid column classes (e.g., .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>