Hartanah CSS yang berkaitan dengan susun atur grid

Articles

Artikel ini menerangkan hartanah CSS yang berkaitan dengan susun atur grid.

Anda boleh mempelajari cara untuk menerangkan grid dan grid sebaris.

YouTube Video

HTML untuk Pratonton

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>

Susun Atur Grid

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

Grid ialah sistem susun atur untuk menyelaras elemen dalam baris dan lajur dua dimensi. Dengan menggunakan grid, anda boleh membina susun atur kompleks dengan mudah dan fleksibel yang sebelum ini sukar dengan kaedah tradisional seperti float atau position. Walaupun flexbox cemerlang dalam susun atur satu dimensi, grid lebih sesuai untuk susun atur dua dimensi.

Kelas grid-box menerapkan susun atur grid dengan menyatakan grid di dalam hartanah display. Elemen ini dipanggil bekas grid.
Hartanah grid-template-columns menentukan lebar lajur grid. Dalam contoh ini, lajur pertama adalah 100px, lajur kedua 200px, dan lajur ketiga menggunakan ruang yang tinggal (auto).
Hartanah grid-template-rows menentukan ketinggian baris grid. Baris pertama adalah 100px, baris kedua adalah automatik (auto), dan baris ketiga adalah setinggi 50px.
Hartanah gap menetapkan jarak antara item grid. Menambah ruang sebanyak 10px antara lajur dan baris.

Istilah Asas

Bekas grid ialah elemen dengan hartanah display yang ditetapkan kepada grid, dan anak-anaknya menjadi item grid.
Item grid ialah elemen anak yang diletakkan secara langsung di bawah bekas grid.

Hartanah grid utama

`grid-template-columns` & `grid-template-rows`

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

Hartanah grid-template-columns dan grid-template-rows menentukan saiz setiap lajur dan baris.
Unit seperti px dan %, serta fr (pecahan) untuk menentukan bahagian ruang yang tinggal, boleh digunakan.
- Dalam contoh ini, terdapat tiga lajur, dan lajur kedua adalah dua kali ganda lebar daripada yang lain.

`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 dan grid-row menentukan lajur atau baris di mana item grid akan diletakkan.
- Dalam contoh ini, item lebar dari lajur ke-2 hingga lajur ke-4 dan dari baris ke-1 hingga baris ke-3.

`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 dan grid-auto-columns ialah sifat yang mengawal saiz baris dan lajur yang dijana secara automatik apabila garis atau lajur susun atur grid tidak ditakrifkan secara eksplisit.
- Dalam contoh ini, 2 baris dan 2 lajur ditakrifkan secara eksplisit, tetapi jika lebih banyak elemen ditambah, baris atau lajur baharu akan dijana secara automatik mengikut grid-auto-rows dan grid-auto-columns.

`justify-items` & `align-items`

1.container {
2    justify-items: center; /* Center items horizontally */
3    align-items: center;   /* Center items vertically */
4}

Selaraskan item grid secara mendatar (justify-items) dan menegak (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 menentukan terus di kawasan mana dalam grid container item grid harus ditempatkan.
- Dalam contoh ini, ia bermaksud menempati dari baris ke-1 hingga baris ke-3 dan dari lajur ke-2 hingga lajur ke-4.

`gap`

1.container {
2    gap: 10px 20px; /* 10px space between rows, 20px space between columns */
3}

gap menambah ruang di antara lajur dan baris. Anda juga boleh menentukan jarak di antara lajur dan baris secara individu menggunakan column-gap dan row-gap.

`grid-auto-flow`

1.container {
2    grid-auto-flow: column; /* Add items in the column direction */
3}

grid-auto-flow ialah sifat yang menetapkan arah di mana item diletakkan, sama ada melalui baris atau lajur.

Contoh susun atur yang kompleks

 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}

Dengan cara ini, grid membolehkan anda mencipta susun atur laman web yang lengkap dengan kod ringkas.

Dalam contoh ini, terdapat tiga lajur (sidebar, kandungan utama, dan iklan) dan tiga baris (header, kandungan, dan footer).
Pembuka dan kaki halaman memenuhi keseluruhan lebar halaman, dengan kandungan di tengah, serta bar sisi dan iklan di kedua-dua belah.

Kelebihan Grid

Kelebihan grid termasuk perkara-perkara berikut:.

Susun atur dua dimensi yang mudah: Menguruskan susun atur dalam kedua-dua baris dan lajur membolehkan susun atur yang kompleks dicapai dengan kod yang lebih ringkas.
Serasi dengan reka bentuk responsif: Sistem grid menjadikannya mudah untuk membuat reka bentuk responsif yang menyesuaikan diri dengan saiz skrin yang berbeza.

Sifat `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}

Sifat gap digunakan dalam susun atur grid dan flexbox untuk menetapkan ruang (jurang) antara elemen. Dengan menggunakan sifat ini, anda boleh dengan mudah menambah ruang di antara elemen kanak-kanak.

Dalam kelas gap-grid-container, jurang 30px secara menegak dan 10px secara mendatar ditetapkan di antara setiap elemen. Oleh kerana grid 3 lajur dibuat dengan grid-template-columns, jurang digunakan secara menegak dan mendatar di antara setiap elemen. Dalam kelas gap-flex-container, jurang 50px digunakan di antara tiga item di dalam flexbox.

Sintaks Asas

1.container {
2  display: grid; /* or flex */
3  gap: <row-gap> <column-gap>;
4}

row-gap menentukan jurang antara baris. Ini adalah jarak menegak dalam susun atur grid atau flex.
column-gap menentukan jurang antara lajur. Ini adalah jarak mendatar.

Jika dua nilai tidak dinyatakan, satu nilai digunakan untuk kedua-dua row-gap dan column-gap.

Kelebihan sifat `gap`

Faedah sifat gap termasuk yang berikut:.

Tetapan jurang yang mudah: Kod untuk menetapkan jurang antara elemen anak menjadi lebih mudah, menghapuskan keperluan untuk menetapkan margin tambahan atau padding di antara elemen.
Penyesuaian fleksibel: Ia mudah menyokong reka bentuk responsif, membolehkan penyesuaian reka bentuk yang fleksibel.

Sifat `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}

Sifat grid-template-areas menyediakan cara untuk menamakan kawasan dalam bekas grid dan menggunakan nama-nama tersebut untuk meletakkan elemen grid dengan mudah. Menggunakan sifat ini membolehkan definisi susun atur yang intuitif secara visual.

Elemen yang ditempatkan dalam kawasan bernama yang ditentukan oleh sifat grid-template-areas harus mempunyai nama yang sama yang ditetapkan dengan sifat grid-area. Walaupun elemen merangkumi beberapa sel, mereka secara automatik ditempatkan dengan betul.

Dalam contoh ini, grid dibuat seperti yang berikut:.

Dalam baris pertama, "header" diletakkan merentasi dua lajur.
"Sidebar" diletakkan di kiri dan "content" di kanan dalam baris kedua.
"Footer" diletakkan merentasi dua lajur dalam baris ketiga.

Penggunaan Asas

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

Dalam sifat grid-template-areas, nama kawasan ditentukan untuk setiap baris. Dengan meletakkan elemen ke dalam kawasan dengan nama yang ditetapkan, anda dapat dengan mudah mencipta susun atur. - Dalam contoh ini, grid dengan 2 baris dan 3 lajur dibuat, dan setiap sel dinamakan area1, area2, dan sebagainya.

Mendefinisikan sel kosong menggunakan `.`

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

Jika anda ingin mempunyai sel kosong dalam susun atur anda, anda boleh mewakili sel kosong menggunakan . (titik). - Seperti dalam contoh ini, dengan menetapkan . antara sidebar dan content, lajur kedua menjadi kosong.

Kelebihan atribut `grid-template-areas`

Kelebihan atribut grid-template-areas termasuk perkara berikut.

Susun atur visual: Ia membolehkan anda menyatakan susun atur secara visual, menjadikannya lebih mudah untuk memahami reka bentuk.
Pergerakan elemen yang mudah: Anda boleh menyesuaikan susun atur elemen dengan mudah dengan menukar definisi kawasan dalam CSS tanpa mengubah suai HTML.

Nota

Apabila menggunakan atribut grid-template-areas, adalah penting untuk memberi perhatian kepada perkara-perkara berikut.

Bilangan nama dalam setiap baris mesti sepadan dengan bilangan lajur yang ditentukan.
Mensasarkan nama yang sama kepada pelbagai sel akan menggabungkan sel tersebut, tetapi apabila disasarkan ke baris atau lajur yang berlainan, kawasan tersebut mestilah berbentuk segi empat sama.

`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 adalah salah satu nilai untuk atribut display dalam CSS. Mengaplikasikan atribut ini menjadikan elemen bertindak sebagai kontainer peringkat dalam talian, mencipta konteks penformatan grid secara dalaman. Berbeza dengan display: grid, ia bertindak sebagai elemen dalam talian dalam aliran dokumen.

Penggunaan `inline-grid`

inline-grid tidaklah begitu lazim seperti grid, tetapi boleh digunakan dengan berkesan dalam situasi tertentu.

Grid dalam konteks dalam talian: Berguna apabila anda ingin menyusun grid selari dengan kandungan teks atau elemen dalam talian lain. Sebagai contoh, ia berguna apabila struktur grid diperlukan untuk butang, lencana, label, dsb., tetapi anda ingin memaparkannya secara dalam talian tanpa mengganggu aliran teks.
Kawalan susun atur dalam elemen dalam talian: Walaupun susun atur kompleks diperlukan dalam elemen dalam talian seperti pautan, butang, atau span, inline-grid boleh menguruskan struktur dalaman dengan susun atur grid sambil mengelak paparan blok.

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

Dalam kes ini, butang memaparkan ikon dan teks dalam grid, sambil kekal sebagai elemen dalam talian dalam aliran dokumen.

Komponen dalam talian yang responsif: inline-grid boleh digunakan untuk komponen kecil yang merupakan sebahagian daripada kandungan dalam talian dan memerlukan susun atur grid. Sebagai contoh, ia sesuai untuk borang dalam talian, lencana, label produk, dan sebagainya, di mana anda ingin menyesuaikan susun atur dengan grid sambil mengekalkannya sebagai elemen dalam talian.

Penjajaran dan saiz `inline-grid`

1.inline-grid {
2    display: inline-grid;
3    vertical-align: middle;
4}

Seperti elemen dalam talian lain, inline-grid menghormati penjajaran menegak berbanding kandungan di sekitarnya. Anda boleh mengawal penjajaran grid menggunakan atribut vertical-align.

1.inline-grid {
2    display: inline-grid;
3    width: 200px;
4    height: 100px;
5}

Berkaitan dengan saiz, elemen inline-grid hanya mengambil lebar yang diperlukan oleh kandungan gridnya. Jika perlu, anda boleh menetapkan lebar, tinggi, dan dimensi minimum/maksimum secara eksplisit.

1.inline-grid {
2    display: inline-grid;
3    grid-template-columns: auto 1fr;
4}

Susun atur grid itu sendiri juga boleh menentukan saiz bekas inline-grid, dan kecenderungan ini lebih kuat apabila menggunakan unit fleksibel seperti fr, auto, dan peratusan.

Anda boleh mengikuti artikel di atas menggunakan Visual Studio Code di saluran YouTube kami. Sila lihat juga saluran YouTube kami.

YouTube Video

Ciri-ciri CSS Berkaitan Flexbox Sifat-Sifat CSS Yang Berkaitan Dengan Rekaan Lajur

Hartanah CSS yang berkaitan dengan susun atur grid

YouTube Video

HTML untuk Pratonton

Susun Atur Grid

grid

Istilah Asas

Hartanah grid utama

grid-template-columns & grid-template-rows

grid-column & grid-row

grid-auto-rows & grid-auto-columns

justify-items & align-items

grid-area

gap

grid-auto-flow

Contoh susun atur yang kompleks

Kelebihan Grid

Sifat gap

Sintaks Asas

Kelebihan sifat gap

Sifat grid-template-areas

Penggunaan Asas

Mendefinisikan sel kosong menggunakan .

Kelebihan atribut grid-template-areas

Nota

inline-grid

Penggunaan inline-grid

Penjajaran dan saiz inline-grid

YouTube Video

`grid`

`grid-template-columns` & `grid-template-rows`

`grid-column` & `grid-row`

`grid-auto-rows` & `grid-auto-columns`

`justify-items` & `align-items`

`grid-area`

`gap`

`grid-auto-flow`

Sifat `gap`

Kelebihan sifat `gap`

Sifat `grid-template-areas`

Mendefinisikan sel kosong menggunakan `.`

Kelebihan atribut `grid-template-areas`

`inline-grid`

Penggunaan `inline-grid`

Penjajaran dan saiz `inline-grid`