编辑“︁CSS网格概念”︁

= CSS网格概念 =

'''CSS网格布局'''（CSS Grid Layout）是一种二维布局系统，用于在网页上创建复杂的响应式设计。它允许开发者通过行（rows）和列（columns）来定义布局结构，并精确控制元素的位置和大小。与传统的布局方法（如浮动或Flexbox）相比，CSS网格提供了更直观、更强大的方式来构建网页布局。

== 基本概念 ==

CSS网格由以下核心概念组成：

=== 网格容器（Grid Container） ===
网格容器是应用了<code>display: grid</code>或<code>display: inline-grid</code>的元素。它的所有直接子元素自动成为'''网格项（Grid Items）'''。

<syntaxhighlight lang="css">
.container {
  display: grid;
}
</syntaxhighlight>

=== 网格轨道（Grid Tracks） ===
网格轨道是网格的行或列，通过<code>grid-template-rows</code>和<code>grid-template-columns</code>定义。

<syntaxhighlight lang="css">
.container {
  display: grid;
  grid-template-rows: 100px 200px; /* 两行，高度分别为100px和200px */
  grid-template-columns: 1fr 2fr; /* 两列，宽度比例为1:2 */
}
</syntaxhighlight>

=== 网格线（Grid Lines） ===
网格线是划分网格轨道的垂直线和水平线，用于定位网格项。网格线从1开始编号（从左到右，从上到下），也可以自定义名称。

<syntaxhighlight lang="css">
.container {
  display: grid;
  grid-template-columns: [start] 1fr [middle] 1fr [end];
}
</syntaxhighlight>

=== 网格单元格（Grid Cell） ===
网格单元格是网格的最小单位，由相邻的行和列交叉形成。

=== 网格区域（Grid Area） ===
网格区域是由一个或多个网格单元格组成的矩形区域，可以通过<code>grid-template-areas</code>定义。

<syntaxhighlight lang="css">
.container {
  display: grid;
  grid-template-areas:
    "header header"
    "sidebar main"
    "footer footer";
}
</syntaxhighlight>

== 代码示例 ==

以下是一个简单的网格布局示例：

<syntaxhighlight lang="html">
<div class="container">
  <div class="header">Header</div>
  <div class="sidebar">Sidebar</div>
  <div class="main">Main Content</div>
  <div class="footer">Footer</div>
</div>
</syntaxhighlight>

<syntaxhighlight lang="css">
.container {
  display: grid;
  grid-template-rows: 80px 1fr 60px;
  grid-template-columns: 200px 1fr;
  grid-template-areas:
    "header header"
    "sidebar main"
    "footer footer";
  gap: 10px; /* 网格项之间的间距 */
}

.header { grid-area: header; }
.sidebar { grid-area: sidebar; }
.main { grid-area: main; }
.footer { grid-area: footer; }
</syntaxhighlight>

输出效果：
* 顶部是一个跨越两列的页眉（header）。
* 左侧是一个固定宽度的侧边栏（sidebar）。
* 右侧是主要内容区域（main）。
* 底部是一个跨越两列的页脚（footer）。

== 实际应用场景 ==

CSS网格非常适合以下场景：
1. '''响应式布局'''：通过媒体查询调整网格结构。
2. '''杂志式布局'''：复杂的多列内容排列。
3. '''仪表盘'''：固定和动态区域的组合。

=== 响应式网格示例 ===
<syntaxhighlight lang="css">
.container {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
}
</syntaxhighlight>
此代码创建了一个自适应网格，每列最小宽度为200px，并根据容器宽度自动调整列数。

== 高级概念 ==

=== 隐式网格（Implicit Grid） ===
当网格项被放置在显式定义的网格之外时，浏览器会自动生成隐式轨道。可以通过<code>grid-auto-rows</code>和<code>grid-auto-columns</code>控制其大小。

=== 网格对齐 ===
CSS网格支持多种对齐方式：
* <code>justify-items</code>：水平对齐网格项。
* <code>align-items</code>：垂直对齐网格项。
* <code>place-content</code>：同时设置水平和垂直对齐。

== 可视化网格结构 ==

以下是一个3x2网格的Mermaid图表：

<mermaid>
graph TD
  A[Grid Line 1] --> B[Column 1]
  A --> C[Column 2]
  D[Grid Line 2] --> E[Row 1]
  D --> F[Row 2]
  D --> G[Row 3]
</mermaid>

== 数学公式 ==

网格的弹性单位<code>fr</code>（fraction）计算公式：
<math>
\text{Item width} = \left( \frac{\text{Item fr value}}{\text{Total fr values}} \right) \times \text{Available space}
</math>

== 总结 ==
CSS网格布局是现代网页设计的强大工具，它提供了精确的二维控制能力。通过掌握网格容器、轨道、线和区域的概念，开发者可以创建出灵活、高效的布局结构。对于更复杂的场景，还可以结合隐式网格和对齐属性进行精细调整。

[[Category:编程语言]]
[[Category:CSS]]
[[Category:CSS网格布局]]