编辑“︁CSS网格项目”︁（章节）

= CSS网格项目 =

'''CSS网格项目'''（CSS Grid Items）是CSS网格布局（CSS Grid Layout）中的核心组成部分，它们是被放置在网格容器（Grid Container）内的直接子元素。网格项目的行为和位置可以通过各种CSS属性进行控制，从而实现复杂的布局设计。

== 简介 ==
在CSS网格布局中，网格容器（通过<code>display: grid</code>或<code>display: inline-grid</code>定义）包含若干网格项目（Grid Items）。每个网格项目可以跨越一个或多个网格单元格（Grid Cells），并可以通过行列对齐、间距调整等方式进行精确布局。

网格项目的定位和尺寸可以通过以下属性控制：
* <code>grid-column-start</code>、<code>grid-column-end</code>
* <code>grid-row-start</code>、<code>grid-row-end</code>
* <code>grid-area</code>
* <code>justify-self</code>、<code>align-self</code>

== 基本用法 ==
以下是一个简单的网格布局示例，展示如何定义网格项目：

<syntaxhighlight lang="css">
/* 定义网格容器 */
.grid-container {
  display: grid;
  grid-template-columns: 100px 100px 100px;
  grid-template-rows: 100px 100px;
  gap: 10px;
}

/* 定义网格项目 */
.item1 {
  grid-column-start: 1;
  grid-column-end: 3; /* 跨越两列 */
  grid-row-start: 1;
  grid-row-end: 2;
  background: lightblue;
}

.item2 {
  grid-column: 3; /* 简写属性 */
  grid-row: 1 / 3; /* 跨越两行 */
  background: coral;
}
</syntaxhighlight>

对应的HTML结构：
<syntaxhighlight lang="html">
<div class="grid-container">
  <div class="item1">项目1</div>
  <div class="item2">项目2</div>
</div>
</syntaxhighlight>

输出效果：
<div style="display: grid; grid-template-columns: 100px 100px 100px; grid-template-rows: 100px 100px; gap: 10px; margin: 1em 0;">
  <div style="grid-column: 1 / 3; grid-row: 1; background: lightblue; display: flex; align-items: center; justify-content: center;">项目1</div>
  <div style="grid-column: 3; grid-row: 1 / 3; background: coral; display: flex; align-items: center; justify-content: center;">项目2</div>
</div>

== 网格项目属性详解 ==

=== 网格项目定位 ===
网格项目可以通过以下属性指定其在网格中的位置：
* <code>grid-column-start</code>、<code>grid-column-end</code>：定义项目的列起始和结束位置
* <code>grid-row-start</code>、<code>grid-row-end</code>：定义项目的行起始和结束位置
* 简写属性：
  * <code>grid-column: start / end</code>
  * <code>grid-row: start / end</code>

<mermaid>
graph LR
    A[网格线1] --> B[网格线2]
    B --> C[网格线3]
    D[项目] --> |grid-column: 2/3| B
    D --> |grid-row: 1/2| A
</mermaid>

=== 网格区域 ===
<code>grid-area</code>属性是更高级的简写，可以同时定义行和列的位置：
<syntaxhighlight lang="css">
.item {
  grid-area: row-start / column-start / row-end / column-end;
}
</syntaxhighlight>

或者引用命名的网格区域：
<syntaxhighlight lang="css">
.container {
  grid-template-areas: "header header"
                       "sidebar main";
}
.item {
  grid-area: header;
}
</syntaxhighlight>

=== 项目对齐 ===
单个网格项目可以在其网格区域内对齐：
* <code>justify-self</code>：水平对齐（start | end | center | stretch）
* <code>align-self</code>：垂直对齐（start | end | center | stretch）
* <code>place-self</code>：简写（align-self justify-self）

== 实际应用案例 ==

=== 响应式图库 ===
创建一个自适应的图片网格，在不同屏幕尺寸下自动调整布局：

<syntaxhighlight lang="css">
.gallery {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  gap: 16px;
}

.gallery-item {
  aspect-ratio: 1;
  overflow: hidden;
}
</syntaxhighlight>

=== 仪表板布局 ===
构建一个包含页眉、侧边栏、主内容和页脚的典型仪表板布局：

<syntaxhighlight lang="css">
.dashboard {
  display: grid;
  grid-template:
    "header header" 80px
    "sidebar main" 1fr
    "footer footer" 60px
    / 250px 1fr;
}

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

== 高级技巧 ==

=== 隐式网格项目 ===
当网格项目被放置在显式定义的网格之外时，浏览器会自动创建隐式轨道。可以使用以下属性控制隐式网格项目：
* <code>grid-auto-rows</code>
* <code>grid-auto-columns</code>
* <code>grid-auto-flow</code>

=== 重叠项目 ===
网格项目可以通过定位在相同的网格单元格上来实现重叠效果：
<syntaxhighlight lang="css">
.overlapping {
  grid-column: 1;
  grid-row: 1;
}

.overlapping + .overlapping {
  z-index: 1;
}
</syntaxhighlight>

== 数学基础 ==
网格布局基于二维坐标系系统，其中：
* 列线编号从1开始，从左到右
* 行线编号从1开始，从上到下
* 负值表示从末端开始计数

网格项目占据的区域可以用数学表达式表示：
<math>
\text{Grid Area} = \text{grid-column-end} - \text{grid-column-start} \times \text{grid-row-end} - \text{grid-row-start}
</math>

== 浏览器支持与最佳实践 ==
CSS网格布局在现代浏览器中得到广泛支持。对于需要支持旧版浏览器的情况，可以考虑：
* 使用特性检测（@supports）
* 提供渐进增强的备用布局
* 避免过度复杂的网格结构

== 总结 ==
CSS网格项目提供了强大的布局控制能力，允许开发者：
* 精确定位项目在网格中的位置
* 控制项目的对齐方式
* 创建响应式和自适应布局
* 实现复杂的重叠和分层效果

通过熟练掌握网格项目相关属性，开发者可以构建出各种复杂的布局结构，同时保持代码的简洁性和可维护性。

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