三十的博客

从零开始学习 Grid 布局

本文内容基于 AI 生成结果整理，可能包含不准确信息，仅供参考使用。
发布时间
阅读量 加载中...

什么是 Grid 布局？

Grid（网格）布局是 CSS 中最强大的布局系统，它是一个二维布局系统（可以同时处理行和列），而 Flexbox 是一维布局系统（一次只能处理行或列）。

MDN Grid 文档 | CSS Grid Garden - 游戏化学习 Grid | Grid by Example - 大量示例

基础概念

1. 网格容器 (Grid Container)

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

设置这个属性的元素就变成了网格容器，它的直接子元素会自动成为网格项目。

2. 网格线 (Grid Lines)

网格线是构成网格结构的分界线，包括水平线和垂直线。

3. 网格轨道 (Grid Track)

两个相邻网格线之间的空间，包括行轨道和列轨道。

4. 网格单元格 (Grid Cell)

四条网格线包围的最小单位，就像表格中的单元格。

5. 网格区域 (Grid Area)

由一个或多个网格单元格组成的矩形区域。

基本用法

1. 定义网格

css 
.container {
  display: grid;
  grid-template-columns: 100px 200px 100px; /* 3列，宽度分别为100px,200px,100px */
  grid-template-rows: 50px 100px; /* 2行，高度分别为50px,100px */
}

2. 常用单位

css 
.container {
  grid-template-columns: 1fr 2fr 1fr; /* 中间列是两侧的两倍宽 */
}

实战示例

示例 1：基本网格

html 
<div class="grid-container">
  <div class="item">1</div>
  <div class="item">2</div>
  <div class="item">3</div>
  <div class="item">4</div>
  <div class="item">5</div>
  <div class="item">6</div>
</div>
css 
.grid-container {
  display: grid;
  grid-template-columns: repeat(3, 1fr); /* 3等宽列 */
  gap: 10px; /* 网格间距 */
}

.item {
  background-color: #4caf50;
  padding: 20px;
  text-align: center;
  color: white;
}

示例 2：响应式网格

css 
.grid-container {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  gap: 15px;
}

示例 3：命名网格线

css 
.container {
  display: grid;
  grid-template-columns: [first] 100px [line2] 200px [line3] auto [last];
  grid-template-rows: [row1] 50px [row2] 50px [row3] auto [last];
}

网格项目定位

1. 基于线的定位

css 
.item {
  grid-column-start: 1;
  grid-column-end: 3;
  grid-row-start: 1;
  grid-row-end: 3;

  /* 简写 */
  grid-column: 1 / 3;
  grid-row: 1 / 3;
}

2. 基于区域的定位

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

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

对齐方式

1. 容器内对齐

css 
.container {
  justify-items: start | end | center | stretch;
  align-items: start | end | center | stretch;
  place-items: <align-items> <justify-items>; /* 简写 */
}

2. 整个内容区域对齐

css 
.container {
  justify-content: start | end | center | stretch | space-around | space-between
    | space-evenly;
  align-content: start | end | center | stretch | space-around | space-between |
    space-evenly;
}

实用技巧

1. ​ 圣杯布局

css 
.container {
  display: grid;
  grid-template:
    "header header header" 80px
    "nav main aside" 1fr
    "footer footer footer" 80px
    / 200px 1fr 200px;
}

2. ​ 等高列

css 
.container {
  display: grid;
  grid-auto-rows: 1fr; /* 所有行等高 */
}

3. ​ 自动填充剩余空间

css 
.container {
  grid-template-columns: 200px minmax(0, 1fr);
}

浏览器支持

Grid 布局在现代浏览器中得到了很好的支持（IE11 部分支持）。可以使用 @supports 进行特性检测：

css 
@supports (display: grid) {
  .container {
    display: grid;
  }
}
#Grid #Layout #CSS基础