网格布局 CSS Grid

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 列 */
}
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;
  }
}
相关推荐
@小红花15 分钟前
从0到1学习Vue框架Day03
前端·javascript·vue.js·学习·ecmascript
前端与小赵17 分钟前
vue3中 ref() 和 reactive() 的区别
前端·javascript·vue.js
魔云连洲32 分钟前
Vue的响应式底层原理:Proxy vs defineProperty
前端·javascript·vue.js
专注VB编程开发20年35 分钟前
CSS定义网格的列模板grid-template-columns什么意思,为什么要用这么复杂的单词
前端·css
IT_陈寒42 分钟前
Redis性能提升50%的7个关键优化策略,90%开发者都不知道第5点!
前端·人工智能·后端
Hilaku1 小时前
深入URL和URLSearchParams:别再用正则表达式去折磨URL了
前端·javascript·代码规范
pubuzhixing1 小时前
Canvas 的性能卓越,用它解决一个棘手问题
前端
weixin_456904271 小时前
Vue.jsmain.js/request.js/user.js/store/index.js Vuex状态管理项目核心模块深度解析
前端·javascript·vue.js
伍哥的传说1 小时前
Vue 3.6 Alien Signals:让响应式性能飞跃式提升
前端·javascript·vue.js·vue性能优化·alien-signals·细粒度更新·vue 3.6新特性
永日456701 小时前
学习日记-HTML-day51-9.9
前端·学习·html