CSS中的网格布局（Grid Layout）网格容器与网格项的关系详解

描述
网格布局（Grid Layout）是CSS中强大的二维布局系统，通过将元素划分为行和列来构建复杂布局。网格容器与网格项的关系是网格布局的核心基础，理解这种父子关系对于掌握网格布局至关重要。网格容器是应用display: grid的元素，而网格项则是其直接子元素，它们共同构成网格布局的基本结构。

网格容器与网格项的建立

1. 创建网格容器：在父元素上设置display: grid或display: inline-grid，该元素即成为网格容器，其直接子元素自动变为网格项。

   .container {
     display: grid; /* 容器变为块级网格 */
   }
   

2. 网格项的自动生成：容器内所有直接子元素（包括文本节点外的元素）都会被转换为网格项，但孙子元素不受影响。例如：

   <div class="container">
     <div>项1</div>  <!-- 网格项 -->
     <p>项2</p>     <!-- 网格项 -->
     <span>项3</span><!-- 网格项 -->
   </div>
   

网格容器的控制作用

1. 定义网格结构：容器通过属性如grid-template-rows、grid-template-columns和grid-template-areas定义行和列的尺寸与布局模板。例如：

   .container {
     grid-template-columns: 100px 1fr 2fr; /* 三列：固定宽度、1比例单位、2比例单位 */
     grid-template-rows: 50px auto;        /* 两行：固定高度、自动高度 */
   }
   

2. 设置网格间距：使用gap属性（或旧版grid-gap）控制项之间的间隔：

   .container {
     gap: 10px 20px; /* 行间距10px，列间距20px */
   }
   

3. 整体对齐方式：通过justify-items（水平对齐）和align-items（垂直对齐）设置所有网格项在单元格内的默认对齐方式，例如居中对齐：

   .container {
     justify-items: center;
     align-items: center;
   }
   

网格项的定位与调整

1. 显式定位网格项：网格项可通过grid-row、grid-column或grid-area属性放置在容器的特定位置。例如将项放置在第1行第2列：

   .item {
     grid-row: 1;     /* 占用第1行 */
     grid-column: 2;   /* 占用第2列 */
   }
   

2. 单个项的对齐覆盖：项可使用justify-self（水平）和align-self（垂直）覆盖容器的默认对齐方式：

   .item {
     justify-self: end; /* 项在单元格内右对齐 */
   }
   

3. 层叠与重叠控制：当多个项被放置到相同单元格时，它们会层叠。可通过z-index控制重叠顺序，或依赖HTML顺序（后出现的项在上层）。

隐式网格的生成机制

1. 自动扩展网格：当网格项被放置到显式定义的网格范围之外时，容器会自动生成隐式网格轨道。例如容器只定义2列，但项被设置为grid-column: 3，则会自动创建第3列。

2. 隐式轨道尺寸控制：使用grid-auto-rows和grid-auto-columns设置隐式轨道的默认尺寸：

   .container {
     grid-auto-rows: 60px; /* 隐式行高度固定为60px */
   }
   

实际布局示例
假设需实现一个三列布局，其中侧边栏固定，主内容自适应：

.container {
  display: grid;
  grid-template-columns: 200px 1fr 200px; /* 左右固定，中间自适应 */
  gap: 15px;
}

项无需额外设置即可按顺序填充网格。若需调整项位置，如将页脚跨三列：

.footer {
  grid-column: 1 / 4; /* 从第1列线开始到第4列线结束 */
}

关键要点

• 网格容器完全控制网格结构，而网格项在容器定义的框架内调整自身位置与对齐。
• 隐式网格确保布局灵活性，避免项溢出时破坏设计。
• 网格项的对齐属性（如justify-self）优先级高于容器的对齐设置（如justify-items），允许局部微调。