测试文章 03 - CSS Grid 布局完全指南

CSS Grid 是现代网页布局的强大工具，提供了二维布局系统，让复杂的页面设计变得简单。

基础概念

Grid 布局涉及两个核心元素：

Grid Container：启用网格布局的父元素
Grid Items：网格中的子元素

1
.container {
2
  display: grid;
3
  grid-template-columns: repeat(3, 1fr);
4
  gap: 20px;
5
}

定义网格

使用 grid-template-columns 和 grid-template-rows 定义网格结构：

1
.grid {
2
  display: grid;
3
  grid-template-columns: 200px 1fr 2fr;
4
  grid-template-rows: auto 1fr auto;
5
  min-height: 100vh;
6
}

网格区域

使用命名区域创建直观的布局：

1
.layout {
2
  display: grid;
3
  grid-template-areas:
4
    "header header header"
5
    "sidebar main main"
6
    "footer footer footer";
7
  grid-template-columns: 200px 1fr 1fr;
8
}
9

10
.header { grid-area: header; }
11
.sidebar { grid-area: sidebar; }
12
.main { grid-area: main; }
13
.footer { grid-area: footer; }

响应式网格

结合媒体查询创建响应式布局：

1
.responsive {
2
  display: grid;
3
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
4
  gap: 1rem;
5
}

测试文章 03 - CSS Grid 布局完全指南

基础概念

定义网格

网格区域

响应式网格

结语

喜欢这篇文章？打赏一下作者吧