编辑“︁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>