外观

掌握CSS网格布局

约 705 字

CSSHTML

1. 什么是CSS网格布局？

网格是一组相交的水平线和垂直线，它定义了网格的列和行。CSS 提供了一个基于网格的布局系统，带有行和列，

与 flexbox 的一维布局不同 网格布局允许我们员创建复杂的网页布局，更轻松地设计网页，而无需使用浮动和定位，且代码更简洁直观。

核心概念：

  • 网格容器 (Grid Container)
  • 网格项 (Grid Items)
  • 轨道 (Tracks)
  • 单元格 (Cell)
  • 区域 (Area)

2. 创建基础网格

2.1. 定义网格容器

.container {
  display: grid; /* 或 inline-grid */
}

2.2. 设置轨道尺寸

.container {
  grid-template-columns: 200px 1fr 2fr;
  grid-template-rows: 100px auto;
}

2.3. 间距控制

.container {
  gap: 10px; /* 行列统一间距 */
  row-gap: 15px;
  column-gap: 20px;
}

3. 高级定位技巧

3.1. 线编号定位

.item {
  grid-column: 2 / 4; /* 从第2列线到第4列线 */
  grid-row: 1 / span 2; /* 跨2行 */
}

3.2. 命名区域布局

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

.header {
  grid-area: header;
}
.sidebar {
  grid-area: sidebar;
}

4. 响应式布局策略

4.1. 自适应轨道

.container {
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
}

4.2. 媒体查询适配

@media (max-width: 768px) {
  .container {
    grid-template-columns: 1fr;
  }
}

5. 完整属性速查表

容器属性

属性描述可选值默认值
display定义网格容器grid / inline-grid-
grid-template-columns定义列轨道track-listnone
grid-template-rows定义行轨道track-listnone
grid-template-areas定义命名区域string-listnone
grid-template复合属性合并以上属性-
gap网格间距length0
grid-auto-columns隐式列尺寸track-sizeauto
grid-auto-rows隐式行尺寸track-sizeauto
grid-auto-flow自动布局算法row / column / denserow
align-items垂直对齐方式start / end / center / stretchstretch
justify-items水平对齐方式start / end / center / stretchstretch
place-items复合对齐属性[align-items] [justify-items]-
align-content垂直内容分布start / end / center / stretch / space-around / space-between / space-evenlystart
justify-content水平内容分布同上start
place-content复合内容分布属性[align-content] [justify-content]-

项目属性

属性描述可选值默认值
grid-column-start列起始位置line-number / span nauto
grid-column-end列结束位置同上auto
grid-row-start行起始位置同上auto
grid-row-end行结束位置同上auto
grid-column列简写属性start-line / end-lineauto
grid-row行简写属性同上auto
grid-area区域定位属性name / row-start / column-start / row-end / column-endauto
align-self单个项目垂直对齐start / end / center / stretchcontainer默认
justify-self单个项目水平对齐同上container默认
place-self复合对齐属性[align-self] [justify-self]-
order显示顺序integer0