Siatka CSS
Dowiedz się, jak włączyć, używać i dostosowywać nasz alternatywny system układu oparty na CSS Grid z przykładami i fragmentami kodu.
Domyślny system grid Bootstrap stanowi kulminację ponad dekady technik układu CSS, wypróbowanych i przetestowanych przez miliony ludzi. Ale został również stworzony bez wielu nowoczesnych funkcji i technik CSS, które widzimy w przeglądarkach, takich jak nowa siatka CSS.
Jak to działa
W Bootstrap 5 dodaliśmy opcję włączenia oddzielnego systemu siatki, który jest zbudowany na CSS Grid, ale z dodatkiem Bootstrap. Nadal otrzymujesz zajęcia, na które możesz aplikować, aby budować responsywne układy, ale z innym podejściem pod maską.
-
Siatka CSS jest dostępna. Wyłącz domyślny system siatki, ustawiając
$enable-grid-classes: false
i włącz siatkę CSS, ustawiając$enable-cssgrid: true
. Następnie przekompiluj Sassa. -
.row
Zastąp wystąpienia.grid
. Klasa.grid
ustawiadisplay: grid
i tworzy klasę, nagrid-template
której budujesz swój kod HTML. -
Zamień
.col-*
zajęcia na.g-col-*
zajęcia. Dzieje się tak, ponieważ nasze kolumny CSS Grid używajągrid-column
właściwości zamiastwidth
. -
Rozmiary kolumn i rynien są ustawiane za pomocą zmiennych CSS. Ustaw je na stronie nadrzędnej
.grid
i dostosuj, jak chcesz, w wierszu lub w arkuszu stylów, za pomocą--bs-columns
i--bs-gap
.
W przyszłości Bootstrap prawdopodobnie przejdzie na rozwiązanie hybrydowe, ponieważ gap
usługa osiągnęła prawie pełne wsparcie przeglądarki dla flexbox.
Kluczowe różnice
W porównaniu z domyślnym systemem siatki:
-
Narzędzia Flex nie wpływają w ten sam sposób na kolumny CSS Grid.
-
Luki zastępują rynny. Właściwość
gap
zastępuje poziomypadding
z naszego domyślnego systemu siatki i działa bardziej jakmargin
. -
W związku z tym, w przeciwieństwie do
.row
s,.grid
s nie mają ujemnych marginesów, a narzędzia do tworzenia marginesów nie mogą być używane do zmiany rynien siatki. Odstępy siatki są domyślnie stosowane poziomo i pionowo. Zobacz sekcję dostosowywania, aby uzyskać więcej informacji. -
Style wbudowane i niestandardowe powinny być postrzegane jako zamienniki klas modyfikatorów (np.
style="--bs-columns: 3;"
vsclass="row-cols-3"
). -
Zagnieżdżanie działa podobnie, ale może wymagać zresetowania liczników kolumn dla każdego wystąpienia zagnieżdżonego
.grid
. Zobacz sekcję zagnieżdżanie, aby uzyskać szczegółowe informacje.
Przykłady
Trzy kolumny
.g-col-4
Za pomocą klas można utworzyć trzy kolumny o równej szerokości we wszystkich rzutniach i urządzeniach . Dodaj klasy responsywne, aby zmienić układ według rozmiaru widocznego obszaru.
<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>
Czuły
Użyj klas responsywnych, aby dostosować układ w rzutniach. Tutaj zaczynamy od dwóch kolumn w najwęższych rzutniach, a następnie rozwijamy się do trzech kolumn w średnich rzutniach i powyżej.
<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>
Porównaj to z układem dwóch kolumn we wszystkich rzutniach.
<div class="grid">
<div class="g-col-6">.g-col-6</div>
<div class="g-col-6">.g-col-6</div>
</div>
Zawijanie
Elementy siatki automatycznie zawijają się do następnego wiersza, gdy nie ma już miejsca w poziomie. Zwróć uwagę, że gap
dotyczy to poziomych i pionowych przerw między elementami siatki.
<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>
Rozpoczyna się
Klasy startowe mają na celu zastąpienie klas offsetowych naszej domyślnej siatki, ale nie są one do końca takie same. CSS Grid tworzy szablon siatki za pomocą stylów, które informują przeglądarki, aby „rozpocząć w tej kolumnie” i „zakończyć w tej kolumnie”. Te właściwości to grid-column-start
i grid-column-end
. Klasy startowe są skrótem dla tych pierwszych. Połącz je z klasami kolumn, aby dopasować rozmiar i wyrównać kolumny w dowolny sposób. Klasy początkowe zaczynają się od 1
, ponieważ 0
jest to nieprawidłowa wartość dla tych właściwości.
<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>
Kolumny automatyczne
Gdy nie ma klas w elementach siatki (bezpośrednie dzieci a .grid
), każdy element siatki zostanie automatycznie dopasowany do jednej kolumny.
<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>
To zachowanie można mieszać z klasami kolumn siatki.
<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>
Zagnieżdżanie
Podobnie do naszego domyślnego systemu siatki, nasz CSS Grid pozwala na łatwe zagnieżdżanie .grid
s. Jednak w przeciwieństwie do domyślnej, ta siatka dziedziczy zmiany w wierszach, kolumnach i odstępach. Rozważ poniższy przykład:
- Zastępujemy domyślną liczbę kolumn lokalną zmienną CSS:
--bs-columns: 3
. - W pierwszej kolumnie automatycznej liczba kolumn jest dziedziczona, a każda kolumna ma jedną trzecią dostępnej szerokości.
- W drugiej kolumnie automatycznej zresetowaliśmy liczbę kolumn na zagnieżdżonych
.grid
do 12 (nasza wartość domyślna). - Trzecia kolumna automatyczna nie zawiera treści zagnieżdżonych.
W praktyce pozwala to na bardziej złożone i niestandardowe układy w porównaniu z naszym domyślnym systemem siatki.
<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>
Dostosowywanie
Dostosuj liczbę kolumn, liczbę wierszy i szerokość przerw za pomocą lokalnych zmiennych CSS.
Zmienny | Wartość awaryjna | Opis |
---|---|---|
--bs-rows |
1 |
Liczba wierszy w szablonie siatki |
--bs-columns |
12 |
Liczba kolumn w szablonie siatki |
--bs-gap |
1.5rem |
Wielkość szczeliny między kolumnami (w pionie i poziomie) |
Te zmienne CSS nie mają wartości domyślnej; zamiast tego stosują wartości rezerwowe, które są używane do momentu dostarczenia wystąpienia lokalnego. Na przykład używamy var(--bs-rows, 1)
dla naszych wierszy CSS Grid, które ignorują --bs-rows
, ponieważ nie zostały jeszcze nigdzie ustawione. Gdy to nastąpi, .grid
instancja użyje tej wartości zamiast wartości zastępczej 1
.
Brak klas siatki
Bezpośrednie elementy potomne .grid
są elementami siatki, więc będą miały rozmiar bez jawnego dodawania .g-col
klasy.
<div class="grid" style="--bs-columns: 3;">
<div>Auto-column</div>
<div>Auto-column</div>
<div>Auto-column</div>
</div>
Kolumny i luki
Dostosuj liczbę kolumn i odstęp.
<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>
Dodawanie wierszy
Dodawanie kolejnych wierszy i zmiana rozmieszczenia kolumn:
<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>
Luki
Zmień odstępy pionowe tylko przez modyfikację row-gap
. Zauważ, że używamy gap
na .grid
s, ale row-gap
i column-gap
można je modyfikować w razie potrzeby.
<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>
Z tego powodu możesz mieć różne wartości pionowe i poziome gap
, które mogą przyjmować pojedynczą wartość (wszystkie strony) lub parę wartości (pionową i poziomą). Można to zastosować za pomocą wbudowanego stylu gap
lub naszej --bs-gap
zmiennej CSS.
<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
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" 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>