如何用css grid实现多行多列复杂布局-css教程-PHP中文网

如何用css grid实现多行多列复杂布局

P粉602998670

发布： 2025-09-23 12:43:01

原创

366人浏览过

CSS Grid通过display: grid实现二维布局，使用grid-template-columns/rows定义行列，gap设置间距，grid-area控制子元素位置，支持命名区域与响应式设计，适合复杂页面结构。

如何用css grid实现多行多列复杂布局

CSS Grid 是实现多行多列复杂布局最强大的工具之一。它允许你在一个二维平面上精确控制行和列的分布，非常适合构建仪表盘、卡片网格、表单排版等复杂结构。

定义基本网格容器

要使用 Grid 布局，先将父元素设为 display: grid，然后通过 grid-template-columns 和 grid-template-rows 定义行列结构。

示例：

.container {
  display: grid;
  grid-template-columns: 1fr 2fr 1fr; /* 三列，中间列是两边的两倍宽 */
  grid-template-rows: 100px auto 80px; /* 三行，高度分别为100px、自适应、80px */
  gap: 10px; /* 行列间距 */
}

登录后复制

使用 grid-area 精确控制子元素位置

每个子元素可以通过 grid-column 和 grid-row 指定起始和结束线，或直接用 grid-area 一次性定义。

常用属性说明：

grid-column: 1 / 3; —— 占据第1到第3条垂直线（跨两列）
grid-row: 2 / 4; —— 占据第2到第4条水平线（跨两行）
grid-area: 2 / 1 / 3 / 4; —— 行起/行终/列起/列终

实用技巧：命名区域更直观

立即学习“前端免费学习笔记（深入）”；

.container {
  display: grid;
  grid-template-areas:
    "header header header"
    "sidebar main main"
    "footer footer footer";
  grid-template-rows: 60px 1fr 50px;
  grid-template-columns: 200px 1fr 1fr;
}
<p>.header { grid-area: header; }
.sidebar { grid-area: sidebar; }
.main { grid-area: main; }
.footer { grid-area: footer; }

登录后复制

这种方式让布局结构一目了然，适合页面级框架设计。

喵记多

喵记多 - 自带助理的 AI 笔记

查看详情

响应式与自动填充策略

在实际项目中，常配合 minmax() 和 repeat() 实现灵活响应式布局。

例如创建一个自适应卡片网格：

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

登录后复制

这表示：自动重复列，每列最小250px，最大为1fr（均分剩余空间），屏幕变窄时自动换行。

结合 @media 查询可进一步优化不同设备下的表现：

@media (max-width: 768px) {
  .container {
    grid-template-areas:
      "header"
      "main"
      "sidebar"
      "footer";
    grid-template-columns: 1fr;
  }
}

登录后复制

基本上就这些核心方法。掌握好容器定义、区域划分和响应式策略，就能轻松应对大多数复杂布局需求。关键是理解网格线和轨道的概念，多练习几次就能熟练运用。不复杂但容易忽略细节，比如 gap 不包含在 grid 高度内，或者 grid-area 必须确保命名一致。

以上就是如何用css grid实现多行多列复杂布局的详细内容，更多请关注php中文网其它相关文章！