高度な CSS グリッドテクニック

第 10 讲：高级 CSS 网格技术

欢迎来到《从基础到辉煌》课程第十讲。在本次讲座中，我们将深入研究高级 CSS 网格技术。这些技术将使您能够创建更复杂和响应更快的布局。在本讲座结束时，您将能够使用网格区域、网格自动放置，并将 CSS 网格与 Flexbox 等其他布局系统结合起来。

---

1.网格区域

网格区域允许您为网格的各个部分指定名称，从而更轻松地管理和可视化布局。

• 示例：为带有页眉、侧边栏、内容和页脚的布局命名网格区域。

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

在此示例中：

• 网格区域：grid-template-areas 属性定义了包含三个部分的布局：跨越两列的标题、中间的侧边栏和主要内容以及页脚。
• 通过将网格项（标题、侧边栏等）分配给特定区域，您可以更有效地控制布局。

---

2.网格自动放置

CSS 网格具有自动放置功能，可以在未显式放置网格项时自动定位网格项。您可以使用 grid-auto-flow 控制其工作方式。

• 价值观：

  • row：项目逐行放置（默认）。
  • 列：项目按列放置。
  • 密集：项目将被打包到网格中的空白空间中。

• 示例：
  
  

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

在这种情况下，网格项目将逐行放置，较小的项目将填充任何间隙。

---

3.使用 minmax() 函数

minmax() 函数允许您定义网格轨道的范围，例如指定网格轨道可以采用的最小和最大尺寸。

• 示例：

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

在此示例中：

• 网格有三列。
• 每列至少有 150 像素宽，但可以增长以填充可用空间 (1fr)。

---

4.网格自动填充与自动调整

自动填充和自动调整都用于创建动态网格，但它们的工作方式略有不同：

• 自动填充：添加尽可能多的列，即使它们是空的。

• 自动调整：缩小或增大列以适应可用空间。

• 示例：自动调整和自动填充比较。
  

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

两个选项都会根据可用空间自动调整列数，但自动调整会折叠空列。

---

5.将 CSS 网格与 Flexbox 相结合

虽然 CSS Grid 非常适合构建整体布局，但 Flexbox 非常适合控制单个项目内的对齐方式。您可以将两者结合起来处理布局的不同部分。

• 示例：使用 CSS Grid 作为主布局，并使用 Flexbox 来对齐网格项内的内容。

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

在此示例中：

• 网格布局：整体布局采用 CSS 网格结构，包含页眉、内容和页脚。
• Flexbox：内容部分使用 Flexbox 来对齐其中的项目。

---

6.隐式网格与显式网格

网格可以显式定义（使用 grid-template-columns 和 grid-template-rows）或隐式定义（自动创建新轨道）。

• 显式网格：您定义行数和列数。

• 隐式网格：网格自动创建行或列以容纳额外的项目。

• 示例：
  

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

在这种情况下，如果添加的项目数量超出了定义的列，网格将自动创建新行。

---

7.创建全页网格布局

让我们使用 CSS Grid 创建一个带有页眉、主要内容区域、侧边栏和页脚的响应式全页布局。

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

在此示例中：

• グリッドエリア: レイアウトはヘッダー、サイドバー、メインコンテンツ、フッターで構成されます。
• グリッドは各セクションの高さを自動的に調整し、ビューポート全体の高さを埋めます。

---

練習演習

1. CSS グリッドを使用して、ヘッダー、サイドバー、メイン コンテンツ、フッターを備えたレスポンシブなブログ レイアウトを作成します。
2. グリッド テンプレート エリアを使用して構造を定義します。
3. さまざまな画面サイズで列の数を調整して、レイアウトをレスポンシブにします。

---

次回: 次の講義では、CSS の配置 と、絶対、相対、固定などのプロパティを使用して要素を配置する方法について説明します。レイアウト コントロールをさらに強化する準備をしましょう!

---

LinkedIn でフォローしてください

リドイ・ハサン

以上が高度な CSS グリッドテクニックの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。