CSS网格概念[编辑 | 编辑源代码]

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

基本概念[编辑 | 编辑源代码]

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

网格容器（Grid Container）[编辑 | 编辑源代码]

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

.container {
  display: grid;
}

网格轨道（Grid Tracks）[编辑 | 编辑源代码]

网格轨道是网格的行或列，通过grid-template-rows和grid-template-columns定义。

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

网格线（Grid Lines）[编辑 | 编辑源代码]

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

.container {
  display: grid;
  grid-template-columns: [start] 1fr [middle] 1fr [end];
}

网格单元格（Grid Cell）[编辑 | 编辑源代码]

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

网格区域（Grid Area）[编辑 | 编辑源代码]

网格区域是由一个或多个网格单元格组成的矩形区域，可以通过grid-template-areas定义。

.container {
  display: grid;
  grid-template-areas:
    "header header"
    "sidebar main"
    "footer footer";
}

代码示例[编辑 | 编辑源代码]

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

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

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

输出效果：

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

实际应用场景[编辑 | 编辑源代码]

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

响应式网格示例[编辑 | 编辑源代码]

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

此代码创建了一个自适应网格，每列最小宽度为200px，并根据容器宽度自动调整列数。

高级概念[编辑 | 编辑源代码]

隐式网格（Implicit Grid）[编辑 | 编辑源代码]

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

网格对齐[编辑 | 编辑源代码]

CSS网格支持多种对齐方式：

justify-items：水平对齐网格项。
align-items：垂直对齐网格项。
place-content：同时设置水平和垂直对齐。

可视化网格结构[编辑 | 编辑源代码]

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

数学公式[编辑 | 编辑源代码]

网格的弹性单位fr（fraction）计算公式： $Item width = (\frac{Item fr value}{Total fr values}) \times Available space$

总结[编辑 | 编辑源代码]

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