Siatka

Podcast o CSS – 011: siatka

Najczęściej spotykanym układem w witrynach internetowych jest nagłówek, pasek boczny, treść i stopka.

W ostatnich latach pojawiło się wiele metod rozwiązywania tego problemu, ale dzięki siatce CSS nie tylko jest to stosunkowo proste, ale daje też mnóstwo opcji. Siatka znakomicie sprawdza się w połączeniu elementów sterujących zapewniane przez zewnętrzne wymiary z elastycznością wewnętrznego dopasowania, dzięki czemu doskonale sprawdza się w przypadku tego typu układu. Dzieje się tak, ponieważ siatka jest metodą układu przeznaczoną dla treści dwuwymiarowych. Oznacza to jednoczesne układanie elementów w wierszach i kolumnach.

Podczas tworzenia układu siatki definiujesz siatkę z wierszami i kolumnami. Następnie umieszczasz elementy w siatce lub pozwalasz przeglądarce na ich automatyczne rozmieszczenie w utworzonych komórkach. Siatka jest bardzo duża, ale przegląd tego, co jest dostępne, pozwoli Ci szybko utworzyć układy siatki.

Opis

Co można zrobić z siatką? Układy siatki mają następujące funkcje. W tym przewodniku dowiesz się o każdym z tych sposobów.

1. Siatka może być definiowana za pomocą wierszy i kolumn. Możesz wybrać rozmiar tych ścieżek i kolumn lub dostosować ich rozmiar do rozmiaru treści.
2. Bezpośrednie elementy podrzędne kontenera siatki zostaną automatycznie umieszczone w tej siatce.
3. Możesz też umieścić elementy w wybranym przez siebie miejscu.
4. Linie i obszary na siatce można nadawać nazwy, aby ułatwić ich rozmieszczenie.
5. Wolne miejsce w kontenerze siatki można rozdzielać między ścieżki.
6. Elementy siatki można wyrównywać w obrębie danego obszaru.

Terminologia z użyciem siatki

W siatce pojawiło się dużo nowych terminologii, ponieważ CSS po raz pierwszy wprowadził prawdziwy system układu.

Linie siatki

Siatka składa się z linii, które biegają w poziomie i w pionie. Jeśli siatka ma 4 kolumny, będzie mieć pięć wierszy kolumn, w tym wiersz po ostatniej kolumnie.

Wiersze są numerowane od 1. Są one numerowane zgodnie z trybem pisania i kierunkiem skryptu komponentu. Oznacza to, że pierwsza linia będzie po lewej stronie w języku pisanym od lewej do prawej (np. angielski), a z prawej w języku pisanym od prawej do lewej, np. w języku arabskim.

Ścieżki siatki

Ścieżka to obszar między dwiema liniami siatki. Ścieżka w wierszu znajduje się między 2 wierszami a ścieżką kolumnową między 2 wierszami. Podczas tworzenia siatki tworzymy te ścieżki, przypisując im rozmiar.

Komórka tabeli

Komórka siatki to najmniejsza przestrzeń w siatce zdefiniowana przez przecięcie ścieżek wierszy i kolumn. który wygląda jak komórka tabeli lub komórka w arkuszu kalkulacyjnym. Jeśli zdefiniujesz siatkę i nie umieścisz żadnego elementu, zostanie on automatycznie rozmieszczony po jednym elemencie w każdej zdefiniowanej komórce siatki.

Obszar siatki

Kilka komórek siatki razem. Obszary siatki są tworzone przez rozpięcie elementu na wielu ścieżkach.

Luki

rynien lub alejka między torami. Na potrzeby określania rozmiarów działają one jak standardowa trasa. Nie można umieszczać treści w odstępach, ale można rozciągać między nimi elementy siatki.

Kontener siatki

Element HTML, do którego zastosowano element display: grid, dzięki czemu tworzy nowy kontekst formatowania siatki dla elementów podrzędnych.

.container {
  display: grid;
}

Element siatki

Element siatki to element, który jest bezpośrednim elementem podrzędnym 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 kolumnowymi, 2 ścieżkami w wierszach i 10-pikselową przerwą między ścieżkami.

.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 terminologii. Zawiera 3 ścieżki kolumnowe. Każda ścieżka korzysta z innej jednostki długości. Ma dwie ścieżki w wierszach: jedną z jednostką długości, a drugą automatyczną. Wykorzystywany jako automatyczny rozmiar ścieżki może być traktowany jako tak duży jak treść. Domyślnie rozmiary ścieżek są ustawiane automatycznie.

Jeśli element o klasie .container zawiera elementy podrzędne, zostaną one natychmiast umieszczone w tej siatce. Możesz zobaczyć, jak to działa, w poniższej wersji demonstracyjnej.

Nakładka siatki w Narzędziach deweloperskich w Chrome ułatwia zrozumienie różnych części siatki.

Otwórz wersję demonstracyjną w Chrome. Sprawdź element z szarym tłem, który ma identyfikator container. Zaznacz siatkę, wybierając plakietkę siatki w modelu DOM obok elementu .container. Na karcie Układ wybierz Wyświetl numery wierszy z menu, aby zobaczyć numery wierszy w siatce.

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

Wewnętrzne słowa kluczowe ustalające rozmiar

Oprócz długości i wartości procentowych opisanych w sekcji na temat jednostek rozmiaru ścieżki siatki mogą używać słów kluczowych określających wewnętrzny rozmiar. Te słowa kluczowe są określone w specyfikacji rozmiaru pola i zawierają dodatkowe metody dodawania pól rozmiaru w CSS, a nie tylko ścieżki siatki.

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

Słowo kluczowe min-content sprawi, że ścieżka audio będzie jak najmniejsza. Zmiana przykładowego układu siatki na 3 kolumny o rozmiarze min-content spowoduje, że staną się one tak wąskie jak najdłuższe słowo na ścieżce.

Słowo kluczowe max-content ma odwrotny skutek. Ścieżka jest na tyle szerokia, że całą jej zawartość zmieści się w jednym długim nieprzerwanym ciągu znaków. Może to spowodować przepełnienie, ponieważ ciąg nie zostanie zawijany.

Funkcja fit-content() początkowo działa tak jak max-content. Jednak gdy ścieżka osiągnie rozmiar przekazywany do funkcji, zawartość zaczyna się zawijać. Wtedy fit-content(10em) utworzy ścieżkę audio krótszą niż 10 em, jeśli rozmiar max-content będzie mniejszy niż 10 em, ale nigdy nie większy niż 10 em.

W następnej prezentacji wypróbuj różne wewnętrzne słowa kluczowe określające rozmiar, zmieniając rozmiar ścieżek siatki.

Uwaga: w tej demonstracji można zauważyć, że gdy używana jest funkcja automatycznego, kolumny siatki rozciągają się do wypełnienia kontenera. Ścieżki o automatycznym rozmiarze są domyślnie rozciągane, jeśli w kontenerze siatki pojawi się więcej miejsca.

Jednostka fr

Mamy już wymiary i wartości procentowe, a także nowe słowa kluczowe. Dostępna jest też specjalna metoda określania rozmiaru, która działa tylko w układzie siatki. Jest to jednostka fr, która ma automatyczną długość opisującą udział dostępnego miejsca w kontenerze siatki.

Jednostka fr działa w taki sam sposób jak flex: auto we flexbox. Rozdziela ona przestrzeń po rozłożeniu elementów. Jeśli więc potrzebujesz 3 kolumn, wszystkie będą miały 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ć ze stałymi lukami lub ścieżkami o stałym rozmiarze. Jeśli chcesz mieć komponent ze stałym elementem, a druga ścieżka zajmuje całe wolne miejsce, możesz użyć listy ścieżek audio grid-template-columns: 200px 1fr.

Użycie różnych wartości dla jednostki fr spowoduje współdzielenie przestrzeni proporcjonalnie. Większe wartości pozwalają uzyskać więcej wolnego miejsca. W poniższym przykładzie zmień wartość trzeciej ścieżki.

Funkcja minmax()

Obsługa przeglądarek

• 57
• 16
• 52
• 10.1

Źródło

Ta funkcja pozwala ustawić minimalny i maksymalny rozmiar ścieżki. To może być całkiem przydatne. W powyższym przykładzie jednostki fr, która rozkłada pozostałe miejsce, można zapisać ją za pomocą minmax() jako minmax(auto, 1fr). Siatka sprawdza wewnętrzny rozmiar treści, a następnie rozkłada dostępną przestrzeń. Oznacza to, że utwory mogą nie mieć równego udziału w całym dostępnym miejscu w kontenerze siatki.

Aby wymusić, aby ścieżka zajmowała taką samą część miejsca w kontenerze siatki pomniejszoną o liczby przerw, użyj wartości minmax. Zastąp 1fr jako rozmiar ścieżki minmax(0, 1fr). Wtedy minimalny rozmiar ścieżki ma wartość 0, a nie minimalny rozmiar treści. Następnie siatka pobierze wszystkie dostępne rozmiary w kontenerze, odbierze odpowiedni rozmiar we wszystkich lukach i udostępni resztę zgodnie z jednostkami fr.

Notacja repeat()

Obsługa przeglądarek

• 57
• 16
• 76
• 10.1

Źródło

Jeśli chcesz utworzyć 12-kolumnową siatkę śledzenia z równymi kolumnami, możesz użyć poniższego arkusza 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ć go za pomocą adresu repeat():

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

Za pomocą funkcji repeat() możesz powtórzyć dowolną sekcję listy utworów. Na przykład możesz powtórzyć schemat ścieżek. Możesz też mieć standardowe ścieżki audio i sekcję powtarzającą się.

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

auto-fill i auto-fit

Możesz połączyć wiedzę na temat określania rozmiarów ścieżek, minmax(), a następnie powtarzać, aby utworzyć użyteczny wzór z układem siatki. Być może nie chcesz określać liczby ścieżek kolumn, ale wolisz utworzyć ich tyle, ile zmieści się w kontenerze.

Możesz to osiągnąć, korzystając ze słów kluczowych repeat() oraz słów kluczowych auto-fill lub auto-fit. W prezentacji poniżej siatki utworzymy tyle ścieżek, ile zmieści się w kontenerze o długości 200 pikseli. Otwórz wersję demonstracyjną w nowym oknie i zobacz, jak zmienia się siatka przy zmianie rozmiaru widocznego obszaru.

W wersji demonstracyjnej znajdziemy tyle utworów, ile się zmieści. Ścieżki nie są jednak elastyczne. Na końcu pojawi się luka, aż będzie miejsce na kolejne 200 pikseli. Po dodaniu funkcji minmax() możesz zamówić dowolną liczbę ścieżek z minimalną liczbą 200 pikseli (maksymalnie 1 fr). Następnie na siatce nakłada się ścieżki obejmujące 200 pikseli i pozostałe miejsca są równo między nimi rozdzielane.

Spowoduje to utworzenie dwuwymiarowego układu elastycznego bez zapytań o media.

Jest nieznaczna różnica między auto-fill a auto-fit. W następnej prezentacji wypróbuj układ siatki zgodny ze składnią opisaną powyżej, ale w kontenerze siatki będą się znajdować tylko 2 elementy siatki. Za pomocą słowa kluczowego auto-fill możesz zobaczyć, że zostały utworzone puste ścieżki. Zmień słowo kluczowe na auto-fit, a ścieżki zwijają się do 0 rozmiaru. Oznacza to, że ścieżki elastyczne są teraz większe i zajmują miejsce.

W przeciwnym razie słowa kluczowe auto-fill i auto-fit działają dokładnie w ten sam sposób. Po wypełnieniu pierwszej ścieżki nie mają między nimi różnicy.

Automatyczne miejsca docelowe

Widzieliśmy już działanie automatycznego umieszczania w siatce w różnych wersjach demonstracyjnych. Elementy są umieszczane w siatce po jednym na komórkę w kolejności, w jakiej występują w źródle. W przypadku wielu układów może to wystarczyć. Jeśli potrzebujesz większej kontroli, możesz zrobić kilka rzeczy. Pierwszym z nich jest dopracowanie układu automatycznego miejsc docelowych.

Umieszczanie elementów w kolumnach

Domyślnym działaniem układu siatki jest umieszczanie elementów wzdłuż wierszy. Zamiast tego możesz spowodować, że elementy zostaną umieszczone w kolumnach za pomocą funkcji grid-auto-flow: column. Musisz zdefiniować ścieżki wierszy. W przeciwnym razie elementy tworzą wewnętrzne ścieżki kolumn i układają je w jednym długim wierszu.

Wartości te mają związek z trybem pisania w dokumencie. Wiersz zawsze znajduje się w kierunku, w którym przebiega zdanie w trybie pisania dokumentu lub komponentu. W następnej prezentacji możesz zmienić tryb wartości grid-auto-flow i właściwości writing-mode.

Rozpięte ścieżki

Możesz sprawić, że niektóre lub wszystkie elementy w układzie automatycznie umieszczonym będą obejmowały więcej niż jedną ścieżkę. Użyj słowa kluczowego span i liczby wierszy, aby rozciągnąć go jako wartość parametru grid-column-end lub grid-row-end.

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

Ponieważ nie określono grid-column-start, używana jest wartość początkowa auto i jest umieszczane zgodnie z regułami automatycznego miejsc docelowych. To samo możesz też określić, używając skrótu grid-column:

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

Wypełnianie luk

W przypadku automatycznie rozmieszczonego układu, w którym niektóre elementy obejmują wiele ścieżek, może pojawić się siatka z niewypełnionymi komórkami. W przypadku układu siatki z układem w pełni umieszczonym automatycznie przebiega zawsze do przodu. Elementy zostaną umieszczone w kolejności, w jakiej znajdują się w źródle, lub według dowolnej modyfikacji za pomocą właściwości order. Jeśli nie ma wystarczająco dużo miejsca, aby zmieścić element, siatka pozostawi lukę i przejdzie do następnej ścieżki.

To działanie pokazuje w następnej prezentacji. Pole wyboru włączy tryb gęstego pakowania. W tym celu musisz nadać usłudze grid-auto-flow wartość dense. Jeśli użyjesz tej wartości, siatka będzie przejmować kolejne elementy układu i wykorzystywać je do wypełniania luk. Może to oznaczać, że wyświetlacz został odłączony od logicznej kolejności.

Umieszczanie elementów

Masz już mnóstwo funkcji w siatce CSS. Przyjrzyjmy się teraz rozmieszczaniu elementów w utworzonej przez nas siatce.

Przede wszystkim należy pamiętać, że układ siatki CSS opiera się na siatce numerowanych wierszy. Najprostszym sposobem umieszczenia elementów w siatce jest umieszczenie ich między wierszami. W tym przewodniku znajdziesz inne sposoby umieszczania elementów, ale zawsze będziesz mieć dostęp do ponumerowanych wierszy.

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

• grid-column-start
• grid-column-end
• grid-row-start
• grid-row-end

Mają one skróty, które umożliwiają ustawienie zarówno linii początkowej, jak i końcowej jednocześnie:

• grid-column
• grid-row

Aby umieścić element, ustaw wiersze początkowy i końcowy obszaru siatki, w którym chcesz go umieścić.

.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 */
}

W Narzędziach deweloperskich w Chrome możesz zobaczyć ilustracje po wierszach, które pozwolą Ci sprawdzić, gdzie znajduje się dany element.

Numerowanie wierszy jest zgodne z trybem i kierunkiem pisania komponentu. W kolejnej prezentacji zmień tryb pisania lub kierunek pisania, aby sprawdzić, jak elementy pozostają umiejscowione w spójnej przestrzeni tekstu.

Układanie elementów w stos

Przy użyciu pozycjonowania opartego na wierszach możesz umieszczać elementy w tej samej komórce siatki. Oznacza to, że mogą one łączyć się w stosy lub pokrywać się częściowo z innym. Elementy, które pojawią się później w źródle, będą wyświetlane nad elementami, które pojawiły się wcześniej. Możesz zmienić tę kolejność, korzystając z pola z-index, tak samo jak w przypadku elementów umieszczonych na liście.

Ujemne numery wierszy

Gdy tworzysz siatkę za pomocą elementów grid-template-rows i grid-template-columns, tworzysz tzw. siatkę dla pełnoletnich. Jest to siatka zdefiniowana i przypisana do ścieżek.

Czasami elementy są wyświetlane poza tą siatką. Możesz na przykład zdefiniować ścieżki kolumn, a następnie dodać kilka wierszy siatki bez definiowania ścieżek wierszy. Domyślnie ścieżki będą automatycznie dopasowywane. Element grid-column-end może też zostać umieszczony poza zdefiniowanej siatką. W obu tych przypadkach siatka utworzy ścieżki, dzięki czemu układ będzie działać. Są one nazywane siatką niejawną.

W większości przypadków nie ma to sensu, jeśli pracujesz z siatką niejawną lub jawną. Jednak w przypadku miejsc docelowych liniowych może wystąpić główna różnica między nimi.

Za pomocą ujemnych numerów możesz umieszczać elementy z końcowej linii siatki. Jest to przydatne, gdy chcesz, aby element rozciągał się od pierwszego do ostatniego wiersza kolumny. W takim przypadku możesz użyć grid-column: 1 / -1. Element zostanie rozciągnięty w prawo na siatkę.

Działa to tylko w przypadku siatki jednoznacznej. Przyjmijmy układ 3 wierszy automatycznie umieszczonych elementów, w których pierwszy element ma się rozciągać do linii końcowej siatki.

Możesz przyznać temu produktowi grid-row: 1 / -1. W poniższym przykładzie widać, że to nie działa. Ścieżki są tworzone w siatce niejawnej. Za pomocą funkcji -1 nie można dotrzeć do końca siatki.

Określanie rozmiaru ścieżek niejawnych

Domyślnie ścieżki utworzone w siatce niejawnej będą automatycznie dopasowywane automatycznie. Jeśli jednak chcesz kontrolować rozmiar wierszy, skorzystaj z właściwości grid-auto-rows oraz kolumn grid-auto-columns.

Aby utworzyć wszystkie wiersze niejawne o minimalnym rozmiarze 10em i maksymalnym rozmiarze auto:

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

Aby utworzyć kolumny niejawne o ścieżkach o szerokości 100 i 200 pikseli. W tym przypadku pierwsza domyślna kolumna będzie mieć rozmiar 100 pikseli, druga 200 pikseli, trzecia 100 pikseli itd.

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

Nazwane linie siatki

Może ułatwić umieszczanie elementów w układzie, jeśli wiersze mają nazwę, a nie liczbę. Dowolną linię w siatce można nazwać, dodając dowolną nazwę w nawiasach kwadratowych. Możesz dodać wiele nazw rozdzielonych spacją w tych samych nawiasach. Po napisaniu nazw wierszy można ich używać zamiast liczb.

.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ć na nich elementy. To piękna technika, bo pozwala zobaczyć, jak dany komponent wygląda w kodzie CSS.

Najpierw nadaj nazwę bezpośrednim elementom podrzędnym kontenera siatki, korzystając z 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 auto i span. Po nazwaniu wszystkich elementów użyj właściwości grid-template-areas, aby określić, które komórki siatki mają obejmować poszczególne elementy. 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 grid-template-areas należy przestrzegać kilku zasad.

• Wartość musi być pełną siatką bez pustych komórek.
• Aby rozciągnąć ścieżki, powtórz nazwę.
• Obszary utworzone przez powtarzanie nazwy muszą być prostokątne i nie można ich rozłączyć.

Jeśli naruszysz którąkolwiek z tych reguł, wartość będzie traktowana jako nieprawidłowa i odrzucana.

Aby zostawić puste miejsce w siatce, użyj . lub wielokrotności bez odstępu między nimi. Na przykład aby zostawić pierwszą komórkę w siatce pustą, mogę dodać do niej serię . 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";
}

Ponieważ cały układ jest zdefiniowany w jednym miejscu, możesz łatwo zmienić go za pomocą zapytań o media. W następnym przykładzie utworzyliśmy układ z dwiema kolumnami, który przenosi się do trzech kolumn po zmianie definicji wartości grid-template-columns i grid-template-areas. Otwórz przykład w nowym oknie, aby sprawdzić rozmiar widocznego obszaru i zobaczyć, jak zmieni się układ.

Możesz też zobaczyć, jak właściwość grid-template-areas jest powiązana z elementem writing-mode i kierunkiem, podobnie jak w przypadku innych metod siatki.

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

Dostępne są 2 skróty pozwalające ustawić wiele właściwości siatki za jednym razem. Dopóki nie poznacie ich dokładnie, mogą się one wydawać nieco skomplikowane. To, czy chcesz z nich korzystać, czy wolisz korzystać z długich rąk, zależy tylko od Ciebie.

grid-template

Obsługa przeglądarek

• 57
• 16
• 52
• 10.1

Źródło

Właściwość grid-template to skrót myślowy nazw grid-template-rows, grid-template-columns i grid-template-areas. Wiersze są definiowane jako pierwsze, wraz z wartością grid-template-areas. Rozmiar kolumn jest dodawany po kolumnie /.

.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

Obsługa przeglądarek

• 57
• 16
• 52
• 10.1

Źródło

Skrótu grid można używać dokładnie tak samo jak skrótu grid-template. Użycie tej metody spowoduje zresetowanie innych akceptowanych właściwości siatki do ich wartości początkowych. Elementy składowe to:

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

Możesz także użyć tego skrótu, aby określić sposób działania siatki niejawnej, na przykład:

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

Wyrównanie

Układ siatki korzysta z tych samych właściwości wyrównywania, które znasz z przewodnika po flexbox. W siatce właściwości zaczynające się od justify- są zawsze używane na osi wbudowanej, czyli w kierunku, w jakim zdania są wykonywane w trybie pisania.

Właściwości zaczynające się od align- są używane na osi brył, czyli kierunku, w jakim bryły są układane w trybie pisania.

• justify-content i align-content: rozłóż dodatkowe miejsce w kontenerze siatki wokół ścieżek lub między nimi.
• justify-self i align-self: są stosowane do elementu siatki i umożliwiają jego przesuwanie w obrębie obszaru siatki, w którym jest umieszczony.
• justify-items i align-items: są stosowane do kontenera siatki, aby ustawić wszystkie właściwości justify-self elementu.

Dystrybucja dodatkowej przestrzeni

W tej wersji siatka jest większa niż ilość miejsca potrzebnego do rozłożenia ścieżek o stałej szerokości. Oznacza to, że w siatce jest miejsce zarówno w wymiarze w tekście, jak i w bloku. Wypróbuj różne wartości align-content i justify-content, aby zobaczyć, jak zachowują się ścieżki.

Zwróć uwagę, że przerwy zwiększają się podczas korzystania z wartości takich jak space-between, a dowolny element siatki obejmujący 2 ścieżki również rośnie, pochłaniając dodatkową przestrzeń dodaną do przerwy.

Uwaga: podobnie jak w przypadku Flexbox, te właściwości działają tylko wtedy, gdy jest więcej miejsca do rozłożenia. Jeśli ścieżki siatki dobrze wypełnią kontener, nie będzie już miejsca, żeby się nim podzielić.

Przenoszenie treści

Elementy z kolorem tła wydają się całkowicie wypełniać obszar siatki, w którym są umieszczone, ponieważ wartość początkowa w polach justify-self i align-self wynosi stretch.

Uwaga: jeśli Twój produkt jest obrazem lub innym elementem o naturalnym współczynniku proporcji, wartość początkowa będzie wynosić start, a nie stretch. Pozwoli to uniknąć rozciągnięcia elementów.

W wersji demonstracyjnej zmień wartości atrybutów justify-items i align-items, aby zobaczyć, jak zmienia to układ. Rozmiar obszaru siatki nie zmienia się, tylko elementy są przenoszone w obrębie zdefiniowanego obszaru.

Sprawdź swoją wiedzę

Sprawdź swoją wiedzę o siatce

Które z tych haseł to siatka CSS?

wiersze

Siatka jest dzielona przez separatory biegnące w poziomie i w pionie.

Kręgi

Brak pojęcia okręgów w siatce CSS.

komórki

Pojedyncze przecięcie wiersza i kolumny powoduje utworzenie komórki siatki.

obszary

Wiele komórek razem.

pociągi

Brak koncepcji pociągów w siatce CSS.

luki

Odstęp między komórkami.

trasy

Pojedynczy wiersz lub kolumna jest ścieżką w siatce.

main {
  display: grid;
}

Jaki jest domyślny kierunek układu siatki?

Wiersze

Bez zdefiniowanych kolumn siatka podrzędna jest układana w kierunku bloków w zwykły sposób.

Kolumny

Jeśli istnieje element grid-auto-flow: column, siatka miałaby układ kolumn.

Jaka jest różnica między auto-fit a auto-fill?

Funkcja auto-fit rozciągnie komórki, aby zmieścić się w kontenerze. Natomiast auto-fill nie rozciągnie komórek.

auto-fill umieszcza w szablonie jak najwięcej elementów bez rozciągania. Dopasowanie zapewnia dopasowanie.

auto-fit rozciągnie kontener tak, aby mieścił się w nim, a auto-fill przeniesie do niego elementy podrzędne.

Te właściwości nie zachowują się w ten sposób.

Co to jest min-content?

Tak samo jak 0%

0% to względna wartość pola nadrzędnego, a min-content – względem słów i obrazów w polu.

Najmniejsza litera

Litera jest małą literą, jednak to nie jest to, do czego odnosi się min-content.

Najdłuższe słowo lub obraz.

W wyrażeniu „CSS jest super” słowem „niesamowity” będzie min-content.

Co to jest max-content?

Najdłuższe zdanie lub największy obraz.

To jest maksymalny rozmiar, o który prosisz lub która została określona w polu. Jest to najszersze zdanie lub obraz.

Najdłuższa litera.

Litery są dłuższe niż najdłuższa litera, ale to nie jest to, do czego odnosi się max-content.

Najdłuższe słowo.

Najdłuższe słowo to min-content.

Co to jest automatyczne miejsca docelowe?

Kiedy siatka korzysta z elementów podrzędnych i umieszcza je w najlepszej kolejności na podstawie danych heurystycznych przeglądarki.

Żadna przeglądarka nie zmienia kolejności treści. Służą do tego wyłącznie Twoje własne style.

Kiedy elementy podrzędne siatki mają przypisaną właściwość grid-area i są w niej umieszczone.

To jest jednoznaczne miejsce docelowe, a nie automatyczne miejsce docelowe.

Gdy nieprzypisane elementy siatki są umieszczane obok szablonu układu.

Elementy siatki, które nie mają określonego obszaru, zostaną umieszczone w następnej dostępnej komórce siatki

Zasoby

Ten przewodnik zawiera omówienie różnych części specyfikacji układu siatki. Aby dowiedzieć się więcej, zapoznaj się z tymi materiałami.

• Układ siatki CSS w MDN
• Kompletny przewodnik po siatce
• Tworzenie kontenera siatki
• Sprawdzanie siatki CSS w Narzędziach deweloperskich w Chrome
• Kompleksowy zbiór materiałów do nauki w formie siatki