CSS Grid 属性

1. 容器属性

• display: grid
  使元素成为网格容器，启用网格布局模式。
• grid-template-columns
  定义网格容器的列结构，可以使用固定单位、百分比、比例（如 1fr），或函数（如 repeat()）。
  示例：

css
复制代码
grid-template-columns: 100px 200px 1fr; /* 三列，第一列100px，第二列200px，第三列占剩余空间 */

• grid-template-rows
  定义网格容器的行结构，同样可以使用固定单位、百分比、比例或函数。
  示例：

css
复制代码
grid-template-rows: 50px auto 100px; /* 第一行50px，第二行自动调整高度，第三行100px */

• grid-template-areas
  使用命名区域来定义网格布局，使代码更具可读性。
  示例：

css
复制代码
grid-template-areas: 
  "header header header"
  "sidebar content content"
  "footer footer footer";

• grid-column-gap / column-gap
  定义列之间的间距。
  示例：

css
复制代码
grid-column-gap: 15px; /* 列之间15px的间隔 */

• grid-row-gap / row-gap
  定义行之间的间距。
  示例：

css
复制代码
grid-row-gap: 20px; /* 行之间20px的间隔 */

• grid-gap
  同时定义列和行的间距。
  示例：

css
复制代码
grid-gap: 15px 20px; /* 列之间15px，行之间20px */

• justify-items
  控制网格项目在其网格单元中的水平对齐方式。
  值：start, end, center, stretch
  示例：

css
复制代码
justify-items: center; /* 水平居中对齐 */

• align-items
  控制网格项目在其网格单元中的垂直对齐方式。
  值：start, end, center, stretch
  示例：

css
复制代码
align-items: stretch; /* 垂直方向上拉伸以填满单元格 */

• justify-content
  控制整个网格容器内项目在主轴上的对齐。
  值：start, end, center, stretch, space-between, space-around, space-evenly
  示例：

css
复制代码
justify-content: space-between; /* 主轴方向上项目之间均匀分布 */

• align-content
  控制整个网格容器内项目在交叉轴上的对齐。
  值：start, end, center, stretch, space-between, space-around, space-evenly
  示例：

css
复制代码
align-content: center; /* 交叉轴方向上内容居中对齐 */

2. 项目属性

• grid-column
  允许一个项目跨越多个列。
  值：start / end
  示例：

css
复制代码
grid-column: 1 / 3; /* 从第1列开始，到第3列结束 */

• grid-row
  允许一个项目跨越多个行。
  值：start / end
  示例：

css
复制代码
grid-row: 2 / 4; /* 从第2行开始，到第4行结束 */

• grid-area
  指定项目所占的网格区域，通常结合 grid-template-areas 使用。
  示例：

css
复制代码
grid-area: header; /* 作为 header 区域的内容 */

• justify-self
  控制单个网格项目在其单元格中的水平对齐。
  值：start, end, center, stretch
  示例：

css
复制代码
justify-self: center; /* 水平居中对齐 */

• align-self
  控制单个网格项目在其单元格中的垂直对齐。
  值：start, end, center, stretch
  示例：

css
复制代码
align-self: end; /* 垂直方向上靠底部对齐 */