Teknik Grid CSS Lanjutan

Kuliah 10: Teknik Grid CSS Lanjutan

Selamat datang ke kuliah kesepuluh kursus "Asas kepada Kecemerlangan". Dalam kuliah ini, kita akan mendalami teknik Grid CSS lanjutan. Teknik ini akan membolehkan anda membuat reka letak yang lebih kompleks dan responsif. Menjelang akhir kuliah ini, anda akan dapat bekerja dengan kawasan grid, peletakan automatik grid dan menggabungkan Grid CSS dengan sistem reka letak lain seperti Flexbox.

1. Kawasan Grid

Kawasan grid membolehkan anda memberikan nama kepada bahagian grid anda, menjadikannya lebih mudah untuk mengurus dan menggambarkan reka letak anda.

• Contoh: Menamakan kawasan grid untuk reka letak dengan pengepala, bar sisi, kandungan dan pengaki.

HTML:

<div class="grid-container">
  <header class="header">Header</header>
  <aside class="sidebar">Sidebar</aside>
  <main class="content">Main Content</main>
  <footer class="footer">Footer</footer>
</div>

CSS:

.grid-container {
  display: grid;
  grid-template-areas:
    "header header"
    "sidebar content"
    "footer footer";
  grid-template-columns: 200px 1fr;
  grid-template-rows: auto 1fr auto;
}

.header {
  grid-area: header;
}

.sidebar {
  grid-area: sidebar;
}

.content {
  grid-area: content;
}

.footer {
  grid-area: footer;
}

Dalam contoh ini:

• Kawasan Grid: Sifat grid-template-areas mentakrifkan reka letak dengan tiga bahagian: pengepala yang merangkumi dua lajur, bar sisi dan kandungan utama di tengah dan pengaki.
• Dengan memperuntukkan item grid (pengepala, bar sisi, dll.) pada kawasan tertentu, anda mengawal reka letak dengan lebih berkesan.

2. Grid Auto-Peletakan

Grid CSS mempunyai ciri peletakan automatik yang meletakkan item grid secara automatik apabila ia tidak diletakkan secara eksplisit. Anda boleh mengawal cara ini berfungsi menggunakan grid-auto-flow.

• Nilai:

  • baris: Item diletakkan baris demi baris (lalai).
  • lajur: Item diletakkan lajur demi lajur.
  • padat: Item akan dibungkus ke dalam ruang kosong dalam grid.

• Contoh:
  
  

  .grid-container {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    grid-auto-flow: row dense; /* Auto-places items and packs them densely */
  }

Dalam kes ini, item grid akan diletakkan baris demi baris dan item yang lebih kecil akan mengisi sebarang jurang.

3. Menggunakan Fungsi minmax()

Fungsi minmax() membolehkan anda menentukan julat untuk trek grid, seperti menentukan saiz minimum dan maksimum yang boleh diambil oleh trek grid.

• Contoh:

  .grid-container {
    display: grid;
    grid-template-columns: repeat(3, minmax(150px, 1fr));
  }

Dalam contoh ini:

• Grid mempunyai tiga lajur.
• Setiap lajur akan berukuran sekurang-kurangnya 150px lebar tetapi boleh berkembang untuk memenuhi ruang yang tersedia (1fr).

4. AutoIsi Grid lwn. AutoFit

Kedua-dua isian automatik dan muat automatik digunakan untuk mencipta grid dinamik, tetapi ia berfungsi sedikit berbeza:

• AutoIsi: Menambah seberapa banyak lajur yang mungkin, walaupun ia kosong.

• Automuat: Mengecilkan atau membesarkan lajur agar sesuai dengan ruang yang ada.

• Contoh: Automuat dan perbandingan autoisi.
  

  .grid-container {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(100px, 1fr)); /* Auto-fill */
  }

  .grid-container-fit {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(100px, 1fr)); /* Auto-fit */
  }

Kedua-dua pilihan melaraskan bilangan lajur secara automatik berdasarkan ruang yang tersedia, tetapi muat auto akan meruntuhkan lajur kosong.

5. Menggabungkan Grid CSS dengan Flexbox

Walaupun Grid CSS bagus untuk menstruktur susun atur keseluruhan, Flexbox sesuai untuk mengawal penjajaran dalam item individu. Anda boleh menggabungkan kedua-duanya untuk mengendalikan bahagian reka letak anda yang berbeza.

• Contoh: Menggunakan Grid CSS untuk reka letak utama dan Flexbox untuk penjajaran dalam item grid.

HTML:

<div class="grid-container">
  <div class="header">Header</div>
  <div class="content">
    <div class="flexbox-item">Item 1</div>
    <div class="flexbox-item">Item 2</div>
  </div>
  <div class="footer">Footer</div>
</div>

CSS:

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

.content {
  display: flex;
  justify-content: space-around;
  align-items: center;
}

.flexbox-item {
  padding: 20px;
  background-color: #ddd;
}

Dalam contoh ini:

• Reka Letak Grid: Reka letak keseluruhan berstruktur dengan Grid CSS, dengan pengepala, kandungan dan pengaki.
• Flexbox: Bahagian kandungan menggunakan Flexbox untuk menjajarkan item di dalamnya.

6. Grid Tersirat lwn. Eksplisit

Grid boleh ditakrifkan secara eksplisit (menggunakan grid-template-lajur dan grid-template-rows) atau secara tersirat (di mana trek baharu dicipta secara automatik).

• Grid Eksplisit: Anda menentukan bilangan baris dan lajur.

• Grid Tersirat: Grid secara automatik mencipta baris atau lajur untuk memuatkan item tambahan.

• Contoh:
  

  .grid-container {
    display: grid;
    grid-template-columns: 100px 100px;
    grid-auto-rows: 50px; /* Implicitly adds rows */
  }

Dalam kes ini, grid akan membuat baris baharu secara automatik jika lebih banyak item ditambahkan daripada muat dalam lajur yang ditentukan.

7. Mencipta Reka Letak Grid Halaman Penuh

Mari kita gunakan Grid CSS untuk mencipta reka letak halaman penuh responsif dengan pengepala, kawasan kandungan utama, bar sisi dan pengaki.

HTML:

<div class="grid-container">
  <header class="header">Header</header>
  <nav class="sidebar">Sidebar</nav>
  <main class="main-content">Main Content</main>
  <footer class="footer">Footer</footer>
</div>

CSS:

.grid-container {
  display: grid;
  grid-template-areas:
    "header header"
    "sidebar main"
    "footer footer";
  grid-template-columns: 200px 1fr;
  grid-template-rows: auto 1fr auto;
  height: 100vh; /* Full height layout */
}

.header {
  grid-area: header;
  background-color: #333;
  color: white;
  padding: 20px;
  text-align: center;
}

.sidebar {
  grid-area: sidebar;
  background-color: #f4f4f4;
  padding: 20px;
}

.main-content {
  grid-area: main;
  padding: 20px;
}

.footer {
  grid-area: footer;
  background-color: #333;
  color: white;
  padding: 10px;
  text-align: center;
}

Dalam contoh ini:

• 网格区域：布局由标题、侧边栏、主要内容和页脚组成。
• 网格自动调整每个部分的高度，填充整个视口高度。

练习运动

1. 使用 CSS 网格创建带有标题、侧边栏、主要内容和页脚的响应式博客布局。
2. 使用 grid-template-areas 定义结构。
3. 通过调整不同屏幕尺寸上的列数来使布局响应。

下一步： 在下一课中，我们将探索 CSS 定位 以及如何使用绝对、相对和固定等属性来定位元素。准备好进一步增强您的布局控制！

在 LinkedIn 上关注我

里多伊·哈桑

Atas ialah kandungan terperinci Teknik Grid CSS Lanjutan. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!