Siatka CSS

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: falsei włącz siatkę CSS, ustawiając $enable-cssgrid: true. Następnie przekompiluj Sassa.

• .rowZastąp wystąpienia .grid. Klasa .gridustawia display: gridi tworzy klasę, na grid-templatektó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-columnwłaściwości zamiast width.

• Rozmiary kolumn i rynien są ustawiane za pomocą zmiennych CSS. Ustaw je na stronie nadrzędnej .gridi dostosuj, jak chcesz, w wierszu lub w arkuszu stylów, za pomocą --bs-columnsi --bs-gap.

W przyszłości Bootstrap prawdopodobnie przejdzie na rozwiązanie hybrydowe, ponieważ gapusł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ść gapzastępuje poziomy paddingz naszego domyślnego systemu siatki i działa bardziej jak margin.

• W związku z tym, w przeciwieństwie do .rows, .grids 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;"vs class="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-4Za 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 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>

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

Porównaj to z układem dwóch kolumn we wszystkich rzutniach.

<div class="grid text-center">
  <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 gapdotyczy to poziomych i pionowych przerw między elementami siatki.

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

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-starti 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ż 0jest to nieprawidłowa wartość dla tych właściwości.

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

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

To zachowanie można mieszać z klasami kolumn siatki.

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

Zagnieżdżanie

Podobnie do naszego domyślnego systemu siatki, nasz CSS Grid pozwala na łatwe zagnieżdżanie .grids. 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 .griddo 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 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>

Dostosowywanie

Dostosuj liczbę kolumn, liczbę wierszy i szerokość przerw za pomocą lokalnych zmiennych CSS.

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, .gridinstancja użyje tej wartości zamiast wartości zastępczej 1.

Brak klas siatki

Bezpośrednie elementy potomne .gridsą elementami siatki, więc będą miały rozmiar bez jawnego dodawania .g-colklasy.

<div class="grid text-center" 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 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>

Dodawanie wierszy

Dodawanie kolejnych wierszy i zmiana rozmieszczenia kolumn:

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

Luki

Zmień odstępy pionowe tylko przez modyfikację row-gap. Zauważ, że używamy gapna .grids, ale row-gapi column-gapmożna je modyfikować w razie potrzeby.

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

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 gaplub naszej --bs-gapzmiennej CSS.

<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

Jednym z ograniczeń CSS Grid jest to, że nasze domyślne klasy są nadal generowane przez dwie zmienne Sass $grid-columnsi $grid-gutter-width. To skutecznie określa liczbę klas generowanych w naszym skompilowanym CSS. Masz tutaj dwie opcje:

• Zmodyfikuj te domyślne zmienne Sass i ponownie skompiluj swój CSS.
• Użyj wbudowanych lub niestandardowych stylów, aby rozszerzyć dostarczone klasy.

Na przykład możesz zwiększyć liczbę kolumn i zmienić rozmiar przerwy, a następnie zmienić rozmiar „kolumn” za pomocą kombinacji stylów wbudowanych i predefiniowanych klas kolumn CSS Grid (np .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>