Articles
Wprowadzenie do CSS
Właściwości CSS związane z układem siatki

Właściwości CSS związane z układem siatki

Ten artykuł wyjaśnia właściwości CSS związane z układem siatki.

Możesz nauczyć się, jak opisywać siatkę i siatkę w linii.

YouTube Video

HTML do podglądu

css-grid.html 
  1<!DOCTYPE html>
  2<html lang="en">
  3<head>
  4    <meta charset="UTF-8">
  5    <meta name="viewport" content="width=device-width, initial-scale=1.0">
  6    <title>CSS Properties Example</title>
  7    <link rel="stylesheet" href="css-base.css">
  8    <link rel="stylesheet" href="css-grid.css">
  9</head>
 10<body>
 11    <!-- Header -->
 12    <header>
 13        <h1>CSS Properties For Layout</h1>
 14    </header>
 15
 16    <!-- Main content -->
 17    <main>
 18        <header>
 19            <h2>Layout Related Properties</h2>
 20        </header>
 21        <article>
 22            <h3>grid</h3>
 23            <section style="width: 100%; height: 350px;">
 24                <header><h4>display: grid; grid-template-columns: 100px 200px auto; grid-template-rows: 100px auto 50px;</h4></header>
 25                <section class="sample-view">
 26                    <div class="grid-box">
 27                        <div class="grid-item">Item 1</div>
 28                        <div class="grid-item">Item 2</div>
 29                        <div class="grid-item">Item 3</div>
 30                        <div class="grid-item">Item 4</div>
 31                        <div class="grid-item">Item 5</div>
 32                        <div class="grid-item">Item 6</div>
 33                    </div>
 34                </section>
 35            </section>
 36            <section style="width: 100%; height: 550px;">
 37                <header><h4>display: grid; grid-template-columns: 120px 1fr 80px; grid-template-rows: 100px 1fr 100px;</h4></header>
 38                <section class="sample-view">
 39                    <div class="grid-container" style="color: #666;">
 40                        <header class="grid-header">Header</header>
 41                        <aside class="grid-sidebar">Sidebar</aside>
 42                        <article class="grid-content">
 43                            <p>Content</p>
 44                        </article>
 45                        <aside class="grid-ads">Ads</aside>
 46                        <footer class="grid-footer">Footer</footer>
 47                    </div>
 48                </section>
 49            </section>
 50        </article>
 51        <article>
 52            <h3>gap</h3>
 53            <section style="height: 300px;">
 54                <header><h4>display: grid; gap: 30px 10px;</h4></header>
 55                <section class="sample-view">
 56                    <div class="gap-grid-container">
 57                        <div>Item 1</div>
 58                        <div>Item 2</div>
 59                        <div>Item 3</div>
 60                        <div>Item 4</div>
 61                        <div>Item 5</div>
 62                        <div>Item 6</div>
 63                    </div>
 64                </section>
 65            </section>
 66            <section>
 67                <header><h4>display: flex; gap: 50px;</h4></header>
 68                <section class="sample-view">
 69                    <div class="gap-flex-container">
 70                        <div>Item 1</div>
 71                        <div>Item 2</div>
 72                        <div>Item 3</div>
 73                    </div>
 74                </section>
 75            </section>
 76        </article>
 77        <article>
 78            <h3>grid-template-areas</h3>
 79            <section style="height: 350px;">
 80                <header><h4>grid-template-areas: "header header" "sidebar content" "footer footer";</h4></header>
 81                <section class="sample-view">
 82                    <div class="grid-template-areas-container">
 83                        <div class="grid-template-areas-header">Header</div>
 84                        <div class="grid-template-areas-sidebar">Sidebar</div>
 85                        <div class="grid-template-areas-content">Content</div>
 86                        <div class="grid-template-areas-footer">Footer</div>
 87                    </div>
 88                </section>
 89            </section>
 90        </article>
 91        <article>
 92            <h3>inline-grid</h3>
 93            <section>
 94                <header><h4>display: inline-grid</h4></header>
 95                <section class="sample-view">
 96                  Here is an inline grid:
 97                  <span class="inline-grid-container">
 98                      <div class="inline-grid-item">1</div>
 99                      <div class="inline-grid-item">2</div>
100                      <div class="inline-grid-item">3</div>
101                      <div class="inline-grid-item">4</div>
102                  </span>
103                  This is contained within a paragraph.
104                </section>
105            </section>
106        </article>
107    </main>
108</body>
109</html>

Układ siatki

grid 

 1.grid-box {
 2    display: grid;
 3    grid-template-columns: 100px 200px auto;
 4    grid-template-rows: 100px auto 50px;
 5    gap: 10px;
 6    background-color: lightblue;
 7    border: none;
 8    height: 200px;
 9}
10
11.grid-item {
12    background-color: lightskyblue;
13    width: 100%;
14    padding: 0;
15    text-align: center;
16    border: 2px solid black;
17}

Siatka to system układu służący do wyrównywania elementów w dwuwymiarowych rzędach i kolumnach. Za pomocą siatki można łatwo i elastycznie tworzyć złożone układy, które były trudne do wykonania za pomocą tradycyjnych metod float lub position. Flexbox świetnie sprawdza się w układach jednowymiarowych, natomiast siatka nadaje się do układów dwuwymiarowych.

  • Klasa grid-box stosuje układ siatki, określając grid w właściwości display. Ten element nazywany jest pojemnikiem siatki.
  • Właściwość grid-template-columns określa szerokość kolumn siatki. W tym przykładzie pierwsza kolumna ma 100px, druga kolumna 200px, a trzecia zajmuje pozostałą przestrzeń (auto).
  • Właściwość grid-template-rows określa wysokość rzędów siatki. Pierwszy rząd ma 100px, drugi rząd jest automatyczny (auto), a trzeci rząd ma wysokość 50px.
  • Właściwość gap ustawia odstępy między elementami siatki. Dodanie 10px odstępu między kolumnami i rzędami.

Podstawowa terminologia

  1. Pojemnik siatki to element, którego właściwość display jest ustawiona na grid, a jego dzieci stają się elementami siatki.
  2. Elementy siatki to elementy potomne umieszczone bezpośrednio w pojemniku siatki.

Główne właściwości siatki

grid-template-columns & grid-template-rows 
1.container {
2    grid-template-columns: 1fr 2fr 1fr;
3}
  • Właściwości grid-template-columns i grid-template-rows definiują rozmiary poszczególnych kolumn i rzędów.
  • Można używać jednostek takich jak px i %, a także fr (część), aby określić proporcję pozostałej przestrzeni.
    • W tym przykładzie są trzy kolumny, a druga kolumna jest dwa razy szersza niż pozostałe.
grid-column & grid-row 
 1.container {
 2  display: grid;
 3  grid-template-columns: repeat(4, 1fr); /* 4 columns */
 4  grid-template-rows: repeat(3, 100px); /* 3 rows */
 5}
 6
 7.item {
 8  grid-column: 2 / 4;
 9  grid-row: 1 / 3;
10}
  • grid-column i grid-row określają, w której kolumnie lub wierszu zostanie umieszczony element siatki.
    • W tym przykładzie element rozciąga się od 2. kolumny do 4. kolumny oraz od 1. wiersza do 3. wiersza.
grid-auto-rows & grid-auto-columns 
 1.container {
 2  display: grid;
 3  grid-template-rows: 100px 200px; /* Explicitly define 2 rows */
 4  grid-template-columns: 1fr 2fr; /* Explicitly define 2 columns */
 5  grid-auto-rows: 150px; /* Automatically added rows will be 150px */
 6  grid-auto-columns: 100px; /* Automatically added columns will be 100px */
 7}
 8
 9.item {
10  grid-column: 3; /* Positioned in the 3rd column (auto-generated) */
11  grid-row: 3; /* Positioned in the 3rd row (auto-generated) */
12}
  • grid-auto-rows i grid-auto-columns to właściwości, które kontrolują rozmiar wierszy i kolumn generowanych automatycznie, gdy linie układu siatki lub kolumny nie są jawnie zdefiniowane.
    • W tym przykładzie jawnie zdefiniowano 2 wiersze i 2 kolumny, ale jeśli dodane zostaną kolejne elementy, nowe wiersze lub kolumny zostaną automatycznie wygenerowane zgodnie z grid-auto-rows i grid-auto-columns.
justify-items & align-items 
1.container {
2    justify-items: center; /* Center items horizontally */
3    align-items: center;   /* Center items vertically */
4}
  • Wyrównaj elementy siatki poziomo (justify-items) i pionowo (align-items).
grid-area 
1/* grid-area syntax
2grid-area: <row-start> / <column-start> / <row-end> / <column-end>;
3*/
4.item {
5    grid-area: 1 / 2 / 3 / 4;
6}
  • grid-area określa jednocześnie, w której części kontenera siatki powinien zostać umieszczony element siatki.
    • W tym przykładzie oznacza to zajmowanie miejsca od 1. do 3. wiersza oraz od 2. do 4. kolumny.
gap 
1.container {
2    gap: 10px 20px; /* 10px space between rows, 20px space between columns */
3}
  • gap dodaje odstępy między kolumnami i wierszami. Możesz również określić odstępy między kolumnami i wierszami, używając column-gap i row-gap.
grid-auto-flow 
1.container {
2    grid-auto-flow: column; /* Add items in the column direction */
3}
  • grid-auto-flow to właściwość, która określa kierunek umieszczania elementów, albo w rzędach, albo w kolumnach.

Przykład złożonych układów. 

 1.grid-container {
 2    display: grid;
 3    grid-template-columns: 120px 1fr 80px;
 4    grid-template-rows: 50px 1fr 50px;
 5    gap: 10px;
 6    background-color: transparent;
 7    border: none;
 8    height: 400px;
 9}
10
11.grid-header {
12    grid-column: 1 / 4;
13    background-color: lightblue;
14}
15
16.grid-sidebar {
17    grid-column: 1 / 2;
18    grid-row: 2 / 3;
19    height: 100%;
20    background-color: lightslategray;
21    color: white;
22}
23
24.grid-content {
25    grid-column: 2 / 3;
26    grid-row: 2 / 3;
27    background-color: lightskyblue;
28}
29
30.grid-content p {
31    margin: 0;
32    padding: 0;
33    height: 260px;
34}
35
36.grid-ads {
37    grid-column: 3 / 4;
38    grid-row: 2 / 3;
39    height: 100%;
40    background-color: lightsteelblue;
41}
42
43.grid-footer {
44    grid-column: 1 / 4;
45    background-color: lightgray;
46}

W ten sposób siatka pozwala na tworzenie całego układu strony internetowej za pomocą prostego kodu.

  • W tym przykładzie znajdują się trzy kolumny (pasek boczny, główna treść i reklama) oraz trzy wiersze (nagłówek, treść i stopka).
  • Nagłówek i stopka zajmują pełną szerokość strony, z treścią w środku, a paskiem bocznym i reklamą po obu stronach.

Zalety siatek (grid).

Zalety siatek (grid) obejmują następujące punkty:.

  • Łatwy układ dwuwymiarowy: Zarządzanie układem w wierszach i kolumnach umożliwia tworzenie nawet złożonych układów przy użyciu mniejszej ilości kodu.
  • Zgodność z responsywnym designem: System siatek ułatwia tworzenie projektów responsywnych dostosowujących się do różnych rozmiarów ekranów.

Właściwość gap. 

 1.gap-grid-container {
 2    display: grid;
 3    grid-template-columns: repeat(3, 1fr);
 4    gap: 30px 10px;
 5    background-color: transparent;
 6    border: none;
 7    height: 200px;
 8}
 9
10.gap-grid-container div {
11    width: 100px;
12    background-color: lightskyblue;
13}
14
15.gap-flex-container {
16    display: flex;
17    gap: 50px;
18}
19
20.gap-flex-container div {
21    width: 80px;
22    background-color: lightgreen;
23}

Właściwość gap jest używana w układach siatki (grid) i flexbox do ustawiania odstępów (luk) między elementami. Za pomocą tej właściwości możesz łatwo dodać odstępy między elementami podrzędnymi.

  • W klasie gap-grid-container ustawiono odstęp o wartości 30px w pionie i 10px w poziomie między każdym elementem. Ponieważ siatka o 3 kolumnach została utworzona za pomocą grid-template-columns, odstępy są stosowane pionowo i poziomo między każdym elementem. W klasie gap-flex-container zastosowano odstęp o wartości 50px między trzema elementami w flexbox.

Podstawowa składnia 

1.container {
2  display: grid; /* or flex */
3  gap: <row-gap> <column-gap>;
4}
  • row-gap określa odstęp między wierszami. Jest to odstęp pionowy w układach siatki lub flex.
  • column-gap określa odstęp między kolumnami. Jest to odstęp poziomy.

Jeśli nie określono dwóch wartości, jedna wartość jest stosowana zarówno do row-gap, jak i column-gap.

Zalety właściwości gap

Korzyści z użycia właściwości gap obejmują następujące elementy:.

  • Proste ustawianie odstępów: Kod ustawiający odstępy między elementami potomnymi staje się prostszy, eliminując konieczność ustawiania dodatkowych marginesów lub wypełnień.
  • Elastyczne dostosowanie: Łatwo wspiera projektowanie responsywne, umożliwiając elastyczne dostosowanie projektu.

Właściwość grid-template-areas 

 1.grid-template-areas-container {
 2    display: grid;
 3    grid-template-columns: 1fr 2fr; /* 2 columns */
 4    grid-template-rows: auto auto;  /* 2 rows */
 5    grid-template-areas:
 6      "header header"
 7      "sidebar content"
 8      "footer footer"; /* In the 3rd row, the footer spans across */
 9    gap: 10px;
10    height: 250px;
11}
12
13.grid-template-areas-container div {
14    width: 100%;
15    height: 100%;
16}
17
18.grid-template-areas-header {
19    grid-area: header; /* Placed in the "header" area */
20    background-color: lightblue;
21}
22
23.grid-template-areas-sidebar {
24    grid-area: sidebar; /* Placed in the "sidebar" area */
25    background-color: lightslategray;
26}
27
28.grid-template-areas-content {
29    grid-area: content; /* Placed in the "content" area */
30    background-color: lightskyblue;
31}
32
33.grid-template-areas-footer {
34    grid-area: footer; /* Placed in the "footer" area */
35    background-color: lightsteelblue;
36}

Właściwość grid-template-areas umożliwia nadawanie nazw obszarom w kontenerze siatki i używanie tych nazw do łatwego pozycjonowania elementów siatki. Użycie tej właściwości umożliwia wizualnie intuicyjne definiowanie układów.

Elementy umieszczone w nazwanych obszarach określonych właściwością grid-template-areas powinny mieć przypisaną tę samą nazwę za pomocą właściwości grid-area. Nawet jeśli elementy zajmują wiele komórek, są automatycznie poprawnie pozycjonowane.

W tym przykładzie siatka jest tworzona w następujący sposób:.

  • W pierwszym wierszu "header" jest umieszczony na dwóch kolumnach.
  • "Sidebar" jest umieszczony po lewej, a "content" po prawej stronie w drugim wierszu.
  • "Footer" jest umieszczony na dwóch kolumnach w trzecim wierszu.

Podstawowe użycie 

1grid-template-areas:
2    "area1 area2 area3"
3    "area1 area4 area5";

We właściwości grid-template-areas nazwa obszaru jest określana dla każdego wiersza. Umieszczając elementy w regionach z przypisanymi nazwami, można łatwo tworzyć układy. - W tym przykładzie tworzona jest siatka z 2 wierszami i 3 kolumnami, a każda komórka jest nazwana jako area1, area2, itd.

Definiowanie pustych komórek za pomocą . 

1grid-template-areas:
2  "header header header"
3  "sidebar . content"
4  "footer footer footer";

Jeśli chcesz mieć puste komórki w swoim układzie, możesz je przedstawić za pomocą kropki (.). - Jak w tym przykładzie, określając kropkę (.) pomiędzy sidebar a content, druga kolumna staje się pusta.

Zalety właściwości grid-template-areas

Zalety właściwości grid-template-areas obejmują następujące aspekty.

  • Układ wizualny: Pozwala wizualnie przedstawić układ, co ułatwia zrozumienie projektu.
  • Łatwa zmiana położenia elementów: Możesz łatwo dostosować układ elementów, zmieniając definicje obszarów w CSS bez konieczności modyfikowania HTML.

Notatki

Podczas używania właściwości grid-template-areas ważne jest zwrócenie uwagi na następujące kwestie.

  • Liczba nazw w każdym wierszu musi odpowiadać liczbie zdefiniowanych kolumn.
  • Przypisanie tej samej nazwy do wielu komórek połączy te komórki, ale jeśli będą przypisane do różnych wierszy lub kolumn, obszar musi być kwadratowy.

inline-grid 

 1.inline-grid-container {
 2    display: inline-grid;
 3    grid-template-columns: 1fr 1fr;
 4    gap: 5px;
 5    background-color: lightblue;
 6}
 7.inline-grid-item {
 8    background-color: lightskyblue;
 9    width: 50px;
10    padding: 0;
11    margin: 0;
12}

inline-grid jest jedną z wartości właściwości display w CSS. Zastosowanie tej właściwości sprawia, że element zachowuje się jak inline-level container, tworząc wewnętrznie kontekst formatowania siatki. W przeciwieństwie do display: grid, działa jako element inline w przepływie dokumentu.

Przypadki użycia inline-grid

inline-grid nie jest tak powszechny jak grid, ale może być skutecznie wykorzystywany w określonych scenariuszach.

  • Siatka w kontekście inline: Przydatna, gdy chcesz umieścić siatkę obok treści tekstowych lub innych elementów inline. Na przykład, jest to przydatne, gdy potrzebujesz struktury siatki dla przycisków, odznak, etykiet itp., ale chcesz je wyświetlać inline, nie zakłócając przepływu tekstu.

  • Kontrola układu w elementach inline: Nawet gdy wymagane są złożone układy wewnątrz elementów inline, takich jak linki, przyciski czy spany, inline-grid może zarządzać wewnętrzną strukturą układu siatki, unikając wyświetlania blokowego.

1<button class="inline-grid">
2    <span>Icon</span>
3    <span>Text</span>
4</button>

W tym przypadku przycisk wyświetla ikony i tekst w układzie siatki, przy czym pozostaje inline w przepływie dokumentu.

  • Responsywne komponenty inline: inline-grid można stosować do małych komponentów będących częścią treści inline, które wymagają układu siatki. Na przykład jest odpowiedni dla formularzy inline, odznak, etykiet produktów itp., gdzie chcesz dostosować układ za pomocą siatki, zachowując go jako inline.

Wyrównanie i rozmiarowanie inline-grid 

1.inline-grid {
2    display: inline-grid;
3    vertical-align: middle;
4}
  • Podobnie jak inne elementy inline, inline-grid uwzględnia wyrównanie pionowe względem otaczającej treści. Możesz kontrolować wyrównanie siatki za pomocą właściwości vertical-align.
1.inline-grid {
2    display: inline-grid;
3    width: 200px;
4    height: 100px;
5}
  • Jeśli chodzi o rozmiar, element inline-grid zajmuje jedynie taką szerokość, jaka jest wymagana przez zawartość jego siatki. W razie potrzeby możesz jawnie ustawić szerokość, wysokość oraz minimalne/maksymalne wymiary.
1.inline-grid {
2    display: inline-grid;
3    grid-template-columns: auto 1fr;
4}

Możliwe jest również, aby układ samej siatki określał rozmiar kontenera inline-grid, a ta tendencja jest silniejsza przy użyciu elastycznych jednostek, takich jak fr, auto i procenty.

Możesz śledzić ten artykuł, korzystając z Visual Studio Code na naszym kanale YouTube. Proszę również sprawdzić nasz kanał YouTube.

YouTube Video

Właściwości CSS związane z flexboxemWłaściwości CSS związane z układem kolumn