CSS Grid 是 CSS3 提供的二维布局系统,可以同时控制行和列,比 Flexbox(一维布局)更强大,适用于复杂的网页布局设计。
一、Grid 基本概念
1、Grid 容器(Grid Container)
通过 display: grid 或 display: inline-grid 定义一个 Grid 容器:
css
.container {
display: grid;
}
2、Grid 项目(Grid Items)
Grid 容器的直接子元素自动成为 Grid 项目:
html
<div class="container">
<div class="item">Item 1</div>
<div class="item">Item 2</div>
<div class="item">Item 3</div>
</div>
3、网格线(Grid Lines)
Grid 布局由行(row)和列(column)组成,网格线是它们的边界线
二、Grid 容器属性
1、定义列和行:grid-template-columns / grid-template-rows
- grid-template-columns:定义列宽度
- grid-template-rows:定义行高度
示例:3 列(200px 1fr 200px) + 2 行(100px auto)
css
.container {
display: grid;
grid-template-columns: 200px 1fr 200px; /* 1fr = 剩余空间 */
grid-template-rows: 100px auto;
}
单位说明:
fr(fraction):剩余空间分配比例
auto:自动调整大小
minmax(min, max):定义最小和最大尺寸
2、定义网格区域:grid-template-areas
通过命名区域布局:
css
.container {
display: grid;
grid-template-areas:
"header header header"
"sidebar main main"
"footer footer footer";
}
.item-header { grid-area: header; }
.item-sidebar { grid-area: sidebar; }
.item-main { grid-area: main; }
.item-footer { grid-area: footer; }
HTML 结构:
html
<div class="container">
<div class="item-header">Header</div>
<div class="item-sidebar">Sidebar</div>
<div class="item-main">Main</div>
<div class="item-footer">Footer</div>
</div>
3、行列间距:gap(旧版:grid-gap)
row-gap:行间距
column-gap:列间距
gap:简写(row-gap column-gap)
css
.container {
gap: 10px 20px; /* 行间距 10px,列间距 20px */
}
4、对齐方式
justify-items:所有项目在列方向的对齐(默认 stretch)
start | end | center | stretch
align-items:所有项目在行方向的对齐(默认 stretch)
start | end | center | stretch
justify-content:整个网格在容器列方向的对齐
start | end | center | stretch | space-around | space-between | space-evenly
align-content:整个网格在容器行方向的对齐
三、Grid 项目属性
1、项目位置:grid-column / grid-row
grid-column-start / grid-column-end:列起始和结束线
grid-row-start / grid-row-end:行起始和结束线
简写:
grid-column: <start> / <end>;
grid-row: <start> / <end>;
示例:跨 2 列 + 跨 3 行
css
.item {
grid-column: 1 / 3; /* 从第 1 列线到第 3 列线 */
grid-row: 1 / 4; /* 从第 1 行线到第 4 行线 */
}
2、项目对齐:justify-self / align-self
justify-self:单个项目在列方向的对齐
align-self:单个项目在行方向的对齐
css
.item {
justify-self: center;
align-self: end;
}
3、 项目顺序:order
调整项目的显示顺序(数值越小越靠前):
css
.item {
order: 1;
}
4、Grid 布局示例
1、经典 12 列网格
css
.container {
display: grid;
grid-template-columns: repeat(12, 1fr);
gap: 10px;
}
.item {
grid-column: span 4; /* 每项占 4 列 */
}
2、圣杯布局(Header + Sidebar + Main + Footer)
css
.container {
display: grid;
grid-template-areas:
"header header header"
"sidebar main main"
"footer footer footer";
grid-template-rows: 80px 1fr 60px;
grid-template-columns: 200px 1fr;
}
3、自适应卡片布局
css
container {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
gap: 15px;
}
auto-fill:自动填充列
minmax(250px, 1fr):最小 250px,最大占剩余空间
5、浏览器兼容性
CSS Grid 已被所有现代浏览器支持(包括 IE11+,但部分语法不同)。可以使用 @supports 检测支持情况:
css
@supports (display: grid) {
.container {
display: grid;
}
}