Siatka

Bardzo popularny układ w projektowaniu stron internetowych to nagłówek, pasek boczny, treść i stopka.

Nagłówek z logo i nawigacją oraz pasek boczny i obszar treści z artykułem

Z biegiem lat pojawiło się wiele metod na tworzenie tego układu, ale dzięki siatce CSS nie tylko jest on stosunkowo prosty, ale też masz do dyspozycji wiele opcji. Siatka jest wyjątkowo przydatna, ponieważ łączy kontrolę, jaką zapewnia rozmiar zewnętrzny, z elastycznością rozmiaru wewnętrznego, dzięki czemu jest idealna do tego rodzaju układu. Dzieje się tak, ponieważ siatka to metoda układu przeznaczona do treści dwuwymiarowych. Oznacza to, że elementy są rozmieszczane w wierszach i kolumnach jednocześnie.

Podczas tworzenia układu siatki definiujesz siatkę za pomocą wierszy i kolumn. Następnie umieszczasz elementy na siatce lub pozwalasz przeglądarce automatycznie umieszczać je w utworzonych przez Ciebie komórkach. Sieci to bardzo obszerny temat, ale dzięki przeglądowi dostępnych opcji w krótkim czasie zaczniesz tworzyć układy siatki.

Omówienie

Co można zrobić z siatką? Układy siatki mają te funkcje: W tym przewodniku znajdziesz informacje na ich temat.

  1. Siatkę można zdefiniować za pomocą wierszy i kolumn. Możesz wybrać rozmiar tych ścieżek wierszy i kolumn lub pozwolić, aby dostosowywały się do rozmiaru treści.
  2. Bezpośrednie elementy podrzędne kontenera siatki zostaną automatycznie umieszczone na tej siatce.
  3. Możesz też umieścić elementy w dokładnej lokalizacji.
  4. Linie i obszary siatki można nazywać, aby ułatwić ich umieszczanie.
  5. Wolne miejsce w kontenerze siatki można rozdzielić między ścieżki.
  6. Elementy siatki mogą być wyrównane w swoim obszarze.

Terminologia siatki

Wraz z gridem pojawia się wiele nowych terminów, ponieważ po raz pierwszy w CSS zastosowano prawdziwy system układu.

Linie siatki

Siatka składa się z linii, które biegną poziomo i pionowo. Jeśli siatka ma 4 kolumny, będzie mieć 5 wierszy kolumny, w tym jeden po ostatniej kolumnie.

Wiersze są numerowane, zaczynając od 1, przy czym numeracja jest zgodna z trybem pisania i kierunkiem zapisu komponentu. Oznacza to, że w językach pisanych od lewej do prawej, takich jak angielski, linia 1 będzie po lewej stronie, a w językach pisanych od prawej do lewej, takich jak arabski – po prawej stronie.

Schemat przedstawiający linie siatki

ścieżki siatki,

Ścieżka to przestrzeń między 2 liniami siatki. Ścieżka wiersza znajduje się między dwiema liniami wiersza, a ścieżka kolumny między dwiema liniami kolumny. Gdy tworzymy siatkę, tworzymy te ścieżki, przypisując im rozmiar.

Diagram przedstawiający ścieżkę siatki

Komórka tabeli

Komórka siatki to najmniejsza przestrzeń na siatce zdefiniowana przez przecięcie ścieżek wiersza i kolumny. Jest to tak samo jak komórka w tabeli lub arkuszu kalkulacyjnym. Jeśli zdefiniujesz siatkę i nie umieścisz w niej żadnych elementów, zostaną one automatycznie rozmieszczone po jednym w każdej komórce siatki.

Komórka siatki przedstawiona w postaci diagramu

Obszar siatki

Kilka komórek siatki razem. Obszary siatki są tworzone przez rozciągnięcie elementu na kilka ścieżek.

Diagram przedstawiający obszar siatki

Luki

Rowa pomiędzy szynami. Pod względem rozmiaru działają jak zwykłe ścieżki. Nie możesz umieszczać treści w przestrzeni między elementami siatki, ale możesz rozciągać elementy siatki na całą tę przestrzeń.

Diagram przedstawiający siatkę z lukami

Kontener siatki

Element HTML, do którego zastosowano display: grid, tworzy nowy kontekst formatowania siatki dla bezpośrednich elementów podrzędnych.

.container {
  display: grid;
}

Element siatki

Element siatki to element podrzędny kontenera siatki.

<div class="container">
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
</div>

Wiersze i kolumny

Aby utworzyć podstawową siatkę, możesz zdefiniować siatkę z 3 ścieżkami kolumny, 2 ścieżkami wiersza i odstępem 10 pikseli między ścieżkami, jak pokazano poniżej.

.container {
    display: grid;
    grid-template-columns: 5em 100px 30%;
    grid-template-rows: 200px auto;
    gap: 10px;
}

Ta siatka przedstawia wiele elementów opisanych w sekcji dotyczącej terminologii. Zawiera 3 kolumny. Każda ścieżka używa innej jednostki długości. Ma 2 ścieżki wiersza: jedna używa jednostki długości, a druga działa automatycznie. Gdy jest używany jako ścieżka, rozmiar może być dowolny. Domyślnie rozmiary ścieżek są automatycznie dopasowywane.

Jeśli element z klasą .container ma elementy podrzędne, zostaną one natychmiast rozmieszczone w tej siatce. Możesz to zobaczyć na poniższym filmie demonstracyjnym.

Nakładka siatki w narzędziach deweloperskich Chrome może pomóc Ci zrozumieć różne części siatki.

Otwórz demo w Chrome. Sprawdź element z szarym tłem o identyfikatorze container. Zaznacz siatkę, wybierając plakietkę siatki w DOM obok elementu .container. Na karcie Układ wybierz Wyświetlaj numery wierszy na liście, aby wyświetlić numery wierszy na siatce.

zgodnie z opisem i instrukcjami
Siatka wyróżniona w Narzędziach deweloperskich w Chrome, pokazująca numery wierszy, komórki i ścieżki.

Słowa kluczowe z wbudowanym rozmiarem

Oprócz wymiarów długości i procentu opisanych w sekcji jednostki rozmiaru ścieżki siatki mogą używać słów kluczowych z właściwymi rozmiarami. Te słowa kluczowe są zdefiniowane w specyfikacji rozmiarów pudełek i dodają dodatkowe metody ustawiania rozmiarów pudełek w CSS, a nie tylko ścieżek siatki.

  • min-content
  • max-content
  • fit-content()

Słowa kluczowe min-content spowodują, że utwór będzie tak mały, jak to możliwe, bez przepełnienia treści. Zmiana przykładowego układu siatki na taki, w którym trzy kolumny mają rozmiar min-content, spowoduje, że będą one tak wąskie jak najdłuższe słowo w kolumnie.

Słowo kluczowe max-content ma odwrotny skutek. Ścieżka stanie się wystarczająco szeroka, aby wyświetlić wszystkie treści w jednym długim ciągu. Może to spowodować przepełnienie, ponieważ ciąg znaków nie zostanie przewinięty.

Funkcja fit-content() działa na początku jak max-content. Gdy jednak ścieżka osiągnie rozmiar przekazany do funkcji, zawartość zaczyna się zawijać. Funkcja fit-content(10em) utworzy ścieżkę o długości mniejszej niż 10 em, jeśli rozmiar max-content jest mniejszy niż 10 em, ale nigdy nie większy niż 10 em.

W następnym pokazie wypróbuj różne słowa kluczowe dotyczące rozmiaru bezwzględnego, zmieniając rozmiar ścieżek siatki.

Jednostka fr

Mamy dotychczasowe wymiary długości, wartości procentowe, a także te nowe słowa kluczowe. Istnieje też specjalna metoda ustawiania rozmiaru, która działa tylko w układzie siatki. Jest to jednostka fr, zmienna długość, która określa udział dostępnej przestrzeni w kontenerze siatki.

Jednostka fr działa podobnie jak element flex: auto w flexboxie. Rozmieszcza elementy w dostępnej przestrzeni po ich rozplanowaniu. Aby więc mieć 3 kolumny, które mają taki sam udział w dostępnym miejscu:

.container {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
}

Ponieważ jednostka fr dzieli dostępne miejsce, można ją łączyć z luką o stałym rozmiarze lub ścieżkami o stałym rozmiarze. Aby utworzyć komponent z elementem o stałym rozmiarze i drugim utworem, który wypełnia pozostałą przestrzeń, możesz użyć listy utworów o wartości grid-template-columns: 200px 1fr.

Użycie różnych wartości dla jednostki fr spowoduje proporcjonalne rozdzielenie miejsca. Większe wartości oznaczają więcej wolnego miejsca. W demo poniżej zmień wartość trzeciego utworu.

Funkcja minmax()

Browser Support

  • Chrome: 57.
  • Edge: 16.
  • Firefox: 52.
  • Safari: 10.1.

Source

Dzięki tej funkcji możesz ustawić minimalny i maksymalny rozmiar ścieżki. Może to być bardzo przydatne. Jeśli weźmiemy pod uwagę jednostkę fr, która rozmieszcza pozostałą przestrzeń, można ją zapisać za pomocą minmax() jako minmax(auto, 1fr). Siatka sprawdza rozmiar treści, a następnie przydziela dostępne miejsce, pozostawiając dla nich wystarczającą ilość miejsca. Oznacza to, że możesz nie uzyskać ścieżek, które mają równy udział w całym dostępnym miejscu w kontenerze siatki.

Aby zmusić ścieżkę do zajmowania równej części przestrzeni w kontenerze siatki pomniejszonej o przerwy, użyj opcji minmax. Zastąp rozmiar ścieżki 1fr rozmiarem minmax(0, 1fr). W efekcie minimalny rozmiar ścieżki wynosi 0, a nie minimalny rozmiar treści. Następnie Grid weźmie cały dostępny rozmiar w kontenerze, odejmie rozmiar potrzebny na luki i podzieli resztę zgodnie z jednostkami fr.

repeat() notacja

Browser Support

  • Chrome: 57.
  • Edge: 16.
  • Firefox: 76.
  • Safari: 10.1.

Source

Jeśli chcesz utworzyć siatkę ścieżki z 12 kolumnami o równej szerokości, możesz użyć tego kodu CSS.

.container {
    display: grid;
    grid-template-columns:
      minmax(0,1fr),
      minmax(0,1fr),
      minmax(0,1fr),
      minmax(0,1fr),
      minmax(0,1fr),
      minmax(0,1fr),
      minmax(0,1fr),
      minmax(0,1fr),
      minmax(0,1fr),
      minmax(0,1fr),
      minmax(0,1fr),
      minmax(0,1fr);
}

Możesz też napisać to za pomocą repeat():

.container {
    display: grid;
    grid-template-columns: repeat(12, minmax(0,1fr));
}

Funkcji repeat() można używać do powtarzania dowolnej sekcji listy utworów. Możesz na przykład powtarzać wzór utworów. Możesz też użyć zwykłych ścieżek i sekcji powtarzającej się.

.container {
    display: grid;
    grid-template-columns: 200px repeat(2, 1fr 2fr) 200px; /*creates 6 tracks*/
}

auto-fillauto-fit

Możesz połączyć wszystko, czego się nauczyłeś/nauczyłaś o rozmiarach ścieżki, minmax()i powtórzyć, aby utworzyć przydatny wzór z układem siatki. Możesz nie chcieć określać liczby ścieżek kolumn, a zamiast tego chcesz utworzyć tyle, ile zmieści się w kontenerze.

Możesz to zrobić za pomocą repeat() i słów kluczowych auto-fill lub auto-fit. W tym demonstracyjnym przykładzie siatka utworzy tyle ścieżek o długości 200 pikseli, ile zmieści się w kontenerze. Otwórz wersję demonstracyjną w nowym oknie i zobacz, jak zmienia się siatka wraz ze zmianą rozmiaru widocznego obszaru.

W demo umieszczamy tyle ścieżek, ile się mieści. Ścieżki nie są jednak elastyczne. Na końcu będzie widoczna przerwa, aż do momentu, gdy pojawi się wystarczająco dużo miejsca na kolejną ścieżkę o długości 200 pikseli. Jeśli dodasz funkcję minmax(), możesz poprosić o tyle ścieżek, ile zmieści się w rozmiarze minimum 200 pikseli i maksymalnie 1 fr. Następnie siatka rozmieszcza ścieżki o długości 200 pikseli, a pozostałą przestrzeń rozdziela równo między nie.

Spowoduje to utworzenie dwuwymiarowego elastycznego układu bez potrzeby stosowania zapytań dotyczących mediów.

Istnieje subtelna różnica między auto-fillauto-fit. W następnym demonstracji użyj układu siatki ze składnią opisaną powyżej, ale z tylko 2 elementami siatki w kontenerze siatki. Korzystając ze słowa kluczowego auto-fill, możesz zobaczyć, że utworzono puste ścieżki. Zmień słowo kluczowe na auto-fit, a ścieżki zostaną zwinięte do rozmiaru 0. Oznacza to, że elastyczne ścieżki teraz rozszerzają się, aby wypełnić dostępne miejsce.

Słowa kluczowe auto-fillauto-fit działają w ten sam sposób. Po wypełnieniu pierwszego utworu nie ma między nimi różnicy.

Automatyczne umieszczanie

Automatyczne umieszczanie w siatce zostało już zaprezentowane w dotychczasowych prezentacjach. Elementy są umieszczane w siatce po jednym w każdej komórce w kolejności, w jakiej występują w źródle. W przypadku wielu układów może to być wszystko, czego potrzebujesz. Jeśli potrzebujesz większej kontroli, możesz wykonać kilka czynności. Po pierwsze, możesz dostosować układ automatycznego umieszczania.

Umieszczanie elementów w kolumnach

Domyślne zachowanie układu siatki polega na umieszczaniu elementów wzdłuż wierszy. Zamiast tego możesz użyć operatora grid-auto-flow: column, aby umieścić elementy w kolumnach. Musisz zdefiniować ścieżki wiersza, w przeciwnym razie elementy utworzą ścieżki kolumny, a układ zostanie wyświetlony w jednym długim wierszu.

Te wartości odnoszą się do trybu zapisu dokumentu. Wiersz zawsze biegnie w tym samym kierunku, w jakim sformułowane jest zdanie w trybie pisania dokumentu lub komponentu. W następnym pokazie możesz zmienić wartość właściwości grid-auto-flowwriting-mode.

Przeplatanie ścieżek

Możesz spowodować, aby niektóre lub wszystkie elementy automatycznie umieszczonego układu obejmowały więcej niż 1 ścieżkę. Jako wartość parametru grid-column-end lub grid-row-end użyj słowa kluczowego span oraz liczby wierszy, które mają być objęte.

.item {
    grid-column-end: span 2; /* will span two lines, therefore covering two tracks */
}

Ponieważ nie podano wartości grid-column-start, zostanie użyta wartość początkowa auto i umieszczona zgodnie z zasadami automatycznego umieszczania. To samo możesz też określić za pomocą skrótu grid-column:

.item {
    grid-column: auto / span 2;
}

Wypełnianie luk

Automatycznie umieszczony układ z niektórymi elementami rozmieszczonymi na kilku ścieżkach może spowodować, że siatka będzie miała niewypełnione komórki. Domyślne zachowanie układu siatki z pełną automatyczną lokalizacją polega na tym, że zawsze jest on przesuwany do przodu. Elementy zostaną umieszczone w kolejności, w jakiej występują w źródle, lub w przypadku modyfikacji – zgodnie z właściwością order. Jeśli nie ma wystarczająco dużo miejsca na element, grid pozostawi lukę i przejdzie do następnego utworu.

Następna prezentacja pokazuje to zachowanie. Zaznaczenie tego pola spowoduje zastosowanie trybu ciasnego pakowania. Aby to włączyć, nadaj parametrowi grid-auto-flow wartość dense. Dzięki tej wartości siatka będzie pobierać elementy z późniejszych części układu i wykorzystywać je do wypełniania luk. Może to oznaczać, że wyświetlacz jest odłączony od kolejności logicznej.

umieszczanie elementów,

Masz już wiele funkcji z CSS Grid. Zobaczmy teraz, jak pozycjonować elementy na utworzonej przez nas siatce.

Najpierw pamiętaj, że CSS Grid Layout opiera się na siatce ponumerowanych linii. Najprostszym sposobem umieszczania elementów na siatce jest przenoszenie ich z jednego wiersza do drugiego. W tym przewodniku znajdziesz inne sposoby umieszczania elementów, ale zawsze masz dostęp do tych ponumerowanych linii.

Właściwości, których możesz używać do umieszczania elementów według numeru wiersza, to:

Zawierają one skróty, które umożliwiają jednoczesne ustawienie linii początkowej i końcowej:

Aby umieścić element, ustaw linie początkową i końcową obszaru siatki, w którym ma się on znajdować.

.container {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    grid-template-rows: repeat(2, 200px 100px);
}

.item {
    grid-column-start: 1; /* start at column line 1 */
    grid-column-end: 4; /* end at column line 4 */
    grid-row-start: 2; /*start at row line 2 */
    grid-row-end: 4; /* end at row line 4 */
}

Narzędzie deweloperskie w Chrome może wyświetlić wizualizację linii, aby sprawdzić, gdzie znajduje się element.

Numerowanie wierszy jest zgodne z trybem i kierunkiem pisania komponentu. W następnym pokazie zmień tryb pisania lub kierunek, aby zobaczyć, jak elementy są umieszczane w sposób spójny z przepływem tekstu.

Układanie elementów

Dzięki pozycjonowaniu na podstawie linii możesz umieszczać elementy w tej samej komórce siatki. Oznacza to, że możesz układać elementy jeden na drugim lub częściowo je na siebie nakładać. Elementy, które znajdują się później w źródle, będą wyświetlane nad elementami, które znajdują się wcześniej. Możesz zmienić kolejność elementów za pomocą z-index, tak jak w przypadku elementów z ustawioną pozycją.

Ujemne numery wierszy

Gdy tworzysz siatkę za pomocą funkcji grid-template-rows i grid-template-columns, tworzysz tak zwaną siatkę jawną. To jest siatka z określonymi przez Ciebie rozmiarami ścieżek.

Czasami elementy wyświetlają się poza tą siatką. Możesz na przykład zdefiniować ścieżki kolumn, a potem dodać kilka wierszy elementów siatki bez definiowania ścieżek wierszy. Ścieżki będą domyślnie automatycznie dostosowywane do rozmiaru. Możesz też umieścić element za pomocą narzędzia grid-column-end, które znajduje się poza zdefiniowaną siatką. W obu tych przypadkach siatka utworzy ścieżki, aby układ działał prawidłowo. Ścieżki te są nazywane implikowaną siatką.

Większość czasu nie ma znaczenia, czy pracujesz z siatką domyślną czy jawną. Jednak w przypadku umieszczania na podstawie linii może wystąpić główna różnica między tymi dwoma opcjami.

Za pomocą ujemnych numerów wierszy możesz umieszczać elementy w wierszu końcowym jawnej siatki. Może to być przydatne, jeśli chcesz, aby element obejmował zakres od pierwszej do ostatniej linii kolumny. W takim przypadku możesz użyć grid-column: 1 / -1. Element zostanie rozciągnięty na całą siatkę.

Działa to jednak tylko w przypadku jawnej siatki. Weźmy układ z 3 wierszami elementów automatycznie umieszczanych, w których przypadku chcesz, aby pierwszy element zajmował całą ostatnią linię siatki.

Pasek boczny z 8 elementami siatki

Możesz pomyśleć, że możesz grid-row: 1 / -1. W demonstracji poniżej widać, że to nie działa. Ścieżki są tworzone w ramach domyślnej siatki. Nie można dotrzeć do końca siatki za pomocą -1.

Rozmiarowanie ścieżek niejawnych

Ścieżki utworzone w implicytnym gridzie będą domyślnie automatycznie dostosowywane do rozmiaru. Jeśli jednak chcesz kontrolować rozmiary wierszy, użyj właściwości grid-auto-rows, a w przypadku kolumn – właściwości grid-auto-columns.

Aby utworzyć wszystkie domyślne wiersze o minimalnym rozmiarze 10em i maksymalnym rozmiarze auto:

.container {
    display: grid;
    grid-auto-rows: minmax(10em, auto);
}

Aby utworzyć kolumny domyślne z wzorcem ścieżek o szerokości 100 pikseli i 200 pikseli. W tym przypadku pierwsza kolumna będzie miała szerokość 100 pikseli, druga 200 pikseli, trzecia 100 pikseli itd.

.container {
    display: grid;
    grid-auto-columns: 100px 200px;
}

Nazwane linie siatki

Umieszczanie elementów w układzie może być łatwiejsze, jeśli linie mają nazwy, a nie numery. Możesz nazwać dowolną linię w siatce, dodając wybraną nazwę w nawiasach kwadratowych. Możesz dodać wiele nazw, rozdzielając je spacjami w ramach tych samych nawiasów. Gdy nazwiesz linie, możesz ich używać zamiast numerów.

.container {
    display: grid;
    grid-template-columns:
      [main-start aside-start] 1fr
      [aside-end content-start] 2fr
      [content-end main-end]; /* a two column layout */
}

.sidebar {
    grid-column: aside-start / aside-end;
    /* placed between line 1 and 2*/
}

footer {
    grid-column: main-start / main-end;
    /* right across the layout from line 1 to line 3*/
}

Obszary szablonu siatki

Możesz też nadawać nazwy obszarom siatki i umieszczać w nich elementy. To świetna technika, ponieważ pozwala zobaczyć, jak komponent wygląda w kodzie CSS.

Na początek nadaj bezpośrednim podrzędnym kontenera siatki nazwy za pomocą właściwości grid-area:

header {
    grid-area: header;
}

.sidebar {
    grid-area: sidebar;
}

.content {
    grid-area: content;
}

footer {
    grid-area: footer;
}

Nazwa może być dowolna, oprócz słów kluczowych autospan. Gdy wszystkie elementy mają nazwy, użyj właściwości grid-template-areas, aby określić, na które komórki siatki ma się rozciągać każdy element. Każdy wiersz jest zdefiniowany w cudzysłowach.

.container {
    display: grid;
    grid-template-columns: repeat(4,1fr);
    grid-template-areas:
        "header header header header"
        "sidebar content content content"
        "sidebar footer footer footer";
}

Podczas korzystania z elementu grid-template-areas należy przestrzegać kilku zasad.

  • Wartość musi być pełną siatką bez pustych komórek.
  • Aby rozciągnąć ścieżkę, powtórz nazwę.
  • Obszary utworzone przez powtarzanie nazwy muszą być prostokątne i nie mogą być od siebie odłączone.

Jeśli nie będziesz przestrzegać któregoś z tych reguł, wartość zostanie uznana za nieprawidłową i odrzucona.

Aby pozostawić odstępy w siatce, użyj . lub wielokrotności bez żadnych odstępów. Aby na przykład pozostawić pierwszą komórkę w siatce pustą, mogę dodać ciąg znaków .:

.container {
    display: grid;
    grid-template-columns: repeat(4,1fr);
    grid-template-areas:
        "....... header header header"
        "sidebar content content content"
        "sidebar footer footer footer";
}

Cały układ jest zdefiniowany w jednym miejscu, dzięki czemu można łatwo zmienić jego definicję za pomocą zapytań dotyczących multimediów. W następnym przykładzie utworzyłem układ z 2 kolumnami, który przekształca się w układ z 3 kolumnami przez zdefiniowanie na nowo wartości grid-template-columnsgrid-template-areas. Otwórz przykład w nowym oknie, aby zmienić rozmiar widocznego obszaru i obserwować zmiany w układzie.

Możesz też zobaczyć, jak właściwość grid-template-areas odnosi się do writing-mode i kierunku, podobnie jak w przypadku innych metod siatki.

Właściwości skrótów

Istnieją 2 właściwości skrótu, które umożliwiają ustawienie wielu właściwości siatki za jednym razem. Mogą one wydawać się nieco mylące, dopóki nie poznasz dokładnie ich wzajemnych zależności. To, czy chcesz ich używać, czy wolisz pisać długimi palcami, zależy tylko od Ciebie.

grid-template

Browser Support

  • Chrome: 57.
  • Edge: 16.
  • Firefox: 52.
  • Safari: 10.1.

Source

Właściwość grid-template jest skrótem dla właściwości grid-template-rows, grid-template-columns i grid-template-areas. Najpierw definiuje się wiersze, a potem wartość grid-template-areas. Rozmiar kolumny jest dodawany po /.

.container {
    display: grid;
    grid-template:
      "head head head" minmax(150px, auto)
      "sidebar content content" auto
      "sidebar footer footer" auto / 1fr 1fr 1fr;
}

grid miejsce zakwaterowania

Browser Support

  • Chrome: 57.
  • Edge: 16.
  • Firefox: 52.
  • Safari: 10.1.

Source

Skrót grid można używać w taki sam sposób jak grid-template. W ten sposób zresetujesz inne właściwości siatki, które są akceptowane, do ich wartości początkowych. Pełny zestaw to:

  • grid-template-rows
  • grid-template-columns
  • grid-template-areas
  • grid-auto-rows
  • grid-auto-columns
  • grid-auto-flow

Możesz też użyć tego skrótu, aby określić zachowanie siatki domyślnej, na przykład:

.container {
    display: grid;
    grid: repeat(2, 80px) / auto-flow  120px;
}

Wyrównanie

Układ siatki używa tych samych właściwości wyrównania, które zostały omówione w przewodniku po flexbox. W siatce właściwości, które zaczynają się od justify-, są zawsze używane na osi wbudowanej, czyli w kierunku, w jakim zdania są zapisane w Twoim języku.

Właściwości zaczynające się od align- są używane na osi bloku, czyli w kierunku, w jakim bloki są rozmieszczone w Twoim trybie pisania.

  • justify-content i align-content: rozprowadź dodatkowe miejsce w kontenerze siatki wokół ścieżek lub między nimi.
  • justify-self i align-self: są stosowane do elementu siatki, aby można było go przenosić w obszarze siatki, w której się znajduje.
  • justify-items i align-items: są stosowane do kontenera siatki, aby ustawić wszystkie właściwości justify-self elementów.

Rozdzielanie dodatkowego miejsca

W tym pokazie siatka jest większa niż przestrzeń potrzebna do rozmieszczenia ścieżek o stałej szerokości. Oznacza to, że mamy miejsce zarówno w wymiarach wbudowanych, jak i blokowych siatki. Wypróbuj różne wartości align-contentjustify-content, aby sprawdzić, jak zachowują się ścieżki.

Zwróć uwagę, że przy użyciu wartości takich jak space-between odstępy stają się większe, a dowolny element siatki obejmujący 2 ścieżki również się powiększa, aby wypełnić dodatkową przestrzeń.

Przenoszenie treści

Elementy z kolorem tła wypełniają całkowicie obszar siatki, w której się znajdują, ponieważ początkowa wartość atrybutów justify-selfalign-self to stretch.

W przykładowej wersji zmień wartości justify-itemsalign-items, aby zobaczyć, jak to wpływa na układ. Obszar siatki nie zmienia rozmiaru, a elementy są przenoszone w określonym obszarze.

Sprawdź swoją wiedzę

Sprawdź swoją wiedzę o siatce

Które z tych terminów dotyczą siatki CSS?

utwory
komórki
luki
Kręgi
obszarach
wiersze
pociągi
main {
  display: grid;
}

Jaki jest domyślny kierunek układu siatki?

Kolumny
Wiersze

Czym różni się wersja auto-fit od auto-fill?

auto-fit rozciąga komórki, aby dopasować je do kontenera, podczas gdy auto-fill tego nie robi.
auto-fit rozciągnie kontener, aby pasował do elementów, podczas gdy auto-fill spowoduje, że elementy dopasują się do kontenera.

Co to jest min-content?

Najmniejsza litera
Najdłuższe słowo lub obraz.
Równe 0%

Co to jest max-content?

Najdłuższe słowo.
najdłuższe zdanie lub największy obraz.
Najdłuższa litera.

Czym jest automatyczne umieszczanie?

Gdy elementy podrzędne siatki mają przypisany element grid-area i są umieszczone w tej komórce.
Gdy siatka wybiera elementy podrzędne i umieszcza je w najlepszym porządku na podstawie heurystyki przeglądarki.
gdy nieprzypisane elementy siatki są umieszczane obok siebie w szablonie układu.

Zasoby

Z tego przewodnika dowiesz się więcej o różnych częściach specyfikacji układu siatki. Aby dowiedzieć się więcej, zapoznaj się z materiałami poniżej.