css Grid常用布局
1. 九宫格布局
html
<style>
.container {
width: 400px;
height: 400px;
display: grid;
grid-template-columns: repeat(3, 1fr); /* 3列等分 */
grid-template-rows: repeat(3, 1fr); /* 3行等分 */
gap: 10px; /* 行列间距10px */
}
.item {
background: #42b983;
color: #fff;
display: flex;
align-items: center;
justify-content: center;
font-size: 20px;
}
</style>
<div class="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 class="item">7</div>
<div class="item">8</div>
<div class="item">9</div>
</div>
2. 自适应响应式卡片布局（一行代码响应式，无媒体查询）
最常用的「商品列表 / 卡片列表」布局，PC 端多列，移动端自动变少列，完美适配所有屏幕，Grid 的封神场景！
html
<style>
.container {
width: 100%; /* 占满屏幕宽度 */
display: grid;
/* 核心响应式：每列最小240px，自动填充列数，超出换行 */
grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
gap: 15px; /* 间距 */
padding: 10px;
}
.card {
height: 180px;
background: #f5f5f5;
border-radius: 8px;
}
</style>
<div class="container">
<div class="card"></div><div class="card"></div><div class="card"></div>
<div class="card"></div><div class="card"></div><div class="card"></div>
</div>
3. 圣杯布局（经典三栏布局，中间自适应，两侧固定）
html
<style>
.container {
width: 100%; height: 500px;
display: grid;
/* 核心：左200px，中间自适应(1fr)，右200px */
grid-template-columns: 200px 1fr 200px;
grid-template-rows: 100px 1fr 100px;
gap: 10px;
}
.header { grid-column: 1/4; background: #42b983; }
.left { background: #f1c40f; }
.main { background: #e74c3c; }
.right { background: #3498db; }
.footer { grid-column: 1/4; background: #9b59b6; }
</style>
<div class="container">
<div class="header">头部</div>
<div class="left">左侧边栏</div>
<div class="main">中间内容区（自适应）</div>
<div class="right">右侧边栏</div>
<div class="footer">底部</div>
</div>
4. 不规则网格布局（博客 / 资讯页面常用）
场景：首页推荐区，大卡片占 2 列 2 行，小卡片占 1 列 1 行，实现错落有致的排版，比 Flex 嵌套更简洁。
html
<style>
.container {
width: 800px;
margin: 20px auto;
display: grid;
/* 4列等分，基础网格 */
grid-template-columns: repeat(4, 1fr);
grid-template-rows: repeat(2, 200px);
gap: 15px;
}
.item {
background-color: #42b983;
border-radius: 8px;
color: #fff;
display: flex;
align-items: center;
justify-content: center;
font-size: 20px;
}
/* 大卡片：跨2列+跨2行 */
.item-1 {
grid-column: span 2;
grid-row: span 2;
background-color: #e74c3c;
}
</style>
<div class="container">
<div class="item item-1">推荐文章</div>
<div class="item">文章1</div>
<div class="item">文章2</div>
<div class="item">文章3</div>
<div class="item">文章4</div>
</div>
5. 相册瀑布流布局（图片展示常用）
场景：相册页面，图片高度不一，宽度一致，实现错落有致的瀑布流，比 column-count 更灵活可控。
html
<style>
.gallery {
width: 100%;
max-width: 1000px;
margin: 20px auto;
display: grid;
/* 4列等分，自适应 */
grid-template-columns: repeat(4, 1fr);
gap: 10px;
}
.gallery-item {
width: 100%;
border-radius: 8px;
overflow: hidden;
}
.gallery-item img {
width: 100%;
height: 100%;
object-fit: cover; /* 保持图片比例 */
}
/* 随机设置不同高度，模拟瀑布流 */
.item-1 { grid-row: span 2; }
.item-3 { grid-row: span 3; }
.item-5 { grid-row: span 2; }
.item-7 { grid-row: span 2; }
</style>
<div class="gallery">
<div class="gallery-item item-1"><img src="https://picsum.photos/400/600" alt="图片1"></div>
<div class="gallery-item item-2"><img src="https://picsum.photos/400/300" alt="图片2"></div>
<div class="gallery-item item-3"><img src="https://picsum.photos/400/800" alt="图片3"></div>
<div class="gallery-item item-4"><img src="https://picsum.photos/400/400" alt="图片4"></div>
<div class="gallery-item item-5"><img src="https://picsum.photos/400/600" alt="图片5"></div>
<div class="gallery-item item-6"><img src="https://picsum.photos/400/300" alt="图片6"></div>
<div class="gallery-item item-7"><img src="https://picsum.photos/400/600" alt="图片7"></div>
<div class="gallery-item item-8"><img src="https://picsum.photos/400/400" alt="图片8"></div>
</div>
6. 后台管理系统布局（经典上中下 + 左右结构）
场景：后台系统页面，顶部导航、左侧菜单、右侧内容区、底部版权，完美适配后台布局，比 position 写法更稳定。
html
<style>
* { margin: 0; padding: 0; box-sizing: border-box; }
body { height: 100vh; }
.layout {
height: 100%;
display: grid;
/* 行：头部60px，内容区自适应，底部40px */
grid-template-rows: 60px 1fr 40px;
/* 列：左侧200px，右侧自适应 */
grid-template-columns: 200px 1fr;
grid-template-areas:
"header header"
"sidebar main"
"footer footer";
}
/* 给区域命名，方便定位 */
.header { grid-area: header; background-color: #333; color: #fff; display: flex; align-items: center; justify-content: center; }
.sidebar { grid-area: sidebar; background-color: #f5f5f5; padding: 20px; }
.main { grid-area: main; background-color: #fff; padding: 20px; overflow: auto; }
.footer { grid-area: footer; background-color: #333; color: #fff; display: flex; align-items: center; justify-content: center; }
</style>
<div class="layout">
<div class="header">后台管理系统</div>
<div class="sidebar">
<div>菜单1</div>
<div>菜单2</div>
<div>菜单3</div>
</div>
<div class="main">
<h2>内容区域</h2>
<p>这里是后台系统的主要内容...</p>
</div>
<div class="footer">版权所有 © 2026</div>
</div>
7. 价格卡片布局（电商 / SAAS 产品常用）
场景：产品定价页面，多个价格卡片并排，响应式适配，鼠标悬浮时放大，提升用户体验。
html
<style>
.pricing-container {
width: 100%;
max-width: 1200px;
margin: 50px auto;
display: grid;
/* 响应式：最小280px，自动填充列数 */
grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
gap: 20px;
padding: 0 20px;
}
.pricing-card {
background-color: #fff;
border: 1px solid #e5e5e5;
border-radius: 8px;
padding: 30px;
text-align: center;
transition: transform 0.3s ease;
}
.pricing-card:hover {
transform: translateY(-5px);
box-shadow: 0 10px 20px rgba(0,0,0,0.1);
}
.card-title {
font-size: 24px;
margin-bottom: 10px;
color: #333;
}
.card-price {
font-size: 36px;
color: #42b983;
margin: 20px 0;
}
.card-btn {
display: inline-block;
padding: 10px 20px;
background-color: #42b983;
color: #fff;
text-decoration: none;
border-radius: 4px;
margin-top: 20px;
}
/* 高亮推荐卡片 */
.card-recommended {
border-color: #42b983;
transform: scale(1.05);
}
.card-recommended .card-btn {
background-color: #e74c3c;
}
</style>
<div class="pricing-container">
<div class="pricing-card">
<h3 class="card-title">基础版</h3>
<div class="card-price">¥99/月</div>
<p>适合个人使用</p>
<a href="#" class="card-btn">立即购买</a>
</div>
<div class="pricing-card card-recommended">
<h3 class="card-title">标准版</h3>
<div class="card-price">¥199/月</div>
<p>适合小团队使用</p>
<a href="#" class="card-btn">立即购买</a>
</div>
<div class="pricing-card">
<h3 class="card-title">企业版</h3>
<div class="card-price">¥399/月</div>
<p>适合大型企业使用</p>
<a href="#" class="card-btn">立即购买</a>
</div>
</div>
8. 等高卡片布局（电商商品列表 刚需！解决 Flex 最大痛点）
场景: 电商 / 商品列表中，卡片的标题 / 内容多少不一，用 Flex 布局会出现「卡片高度不一致」的问题，需要额外写样式兜底；而 Grid 天生就是等高布局，一行代码搞定所有卡片强制等高，这是 Grid 碾压 Flex 的经典场景！
html
<style>
.goods-list {
width: 100%;
max-width: 1200px;
margin: 20px auto;
display: grid;
/* 响应式：最小宽度280px，自动适配列数 */
grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
gap: 20px; /* 行列间距统一 */
padding: 0 10px;
}
.goods-card {
border: 1px solid #eee;
border-radius: 8px;
padding: 15px;
}
.card-img {
width: 100%;
height: 180px;
background: #f5f5f5;
border-radius: 4px;
margin-bottom: 10px;
}
.card-title {
font-size: 16px;
margin-bottom: 8px;
}
.card-desc {
color: #999;
font-size: 12px;
line-height: 1.5;
}
.card-price {
color: #e74c3c;
font-size: 18px;
margin-top: 15px;
font-weight: bold;
}
</style>
<div class="goods-list">
<div class="goods-card">
<div class="card-img"></div>
<div class="card-title">小米手环 智能运动监测</div>
<div class="card-desc">血氧心率睡眠监测，超长续航，防水防尘，多种运动模式</div>
<div class="card-price">¥199</div>
</div>
<div class="goods-card">
<div class="card-img"></div>
<div class="card-title">无线蓝牙耳机 降噪款</div>
<div class="card-desc">主动降噪，续航24小时，无感佩戴</div>
<div class="card-price">¥299</div>
</div>
<div class="goods-card">
<div class="card-img"></div>
<div class="card-title">超薄充电宝20000毫安</div>
<div class="card-desc">双向快充，便携小巧，兼容所有机型，自带数据线，可上飞机</div>
<div class="card-price">¥129</div>
</div>
<div class="goods-card">
<div class="card-img"></div>
<div class="card-title">桌面小风扇</div>
<div class="card-desc">静音大风力，三档调速，USB充电</div>
<div class="card-price">¥39</div>
</div>
</div>
9. 带侧边栏的文章详情页（博客 / 资讯站 经典布局）
场景: PC 端博客、资讯、文档类页面的标准布局：左侧主体文章区占宽多，右侧侧边栏占宽少，底部 footer 通栏，适配所有屏幕尺寸，侧边栏和主体区自动等高，不用写height:100%，Grid 实现极其简洁。
html
<style>
*{margin:0;padding:0;box-sizing:border-box;}
.article-layout {
width: 100%;
max-width: 1200px;
margin: 0 auto;
display: grid;
/* 核心：左侧占3份，右侧占1份，完美比例 */
grid-template-columns: 3fr 1fr;
gap: 20px;
padding: 20px;
}
.article-main {
background: #f9f9f9;
padding: 20px;
border-radius: 8px;
}
.article-aside {
background: #f5f5f5;
padding: 20px;
border-radius: 8px;
}
.article-footer {
/* 跨所有列，通栏显示 */
grid-column: 1 / -1;
text-align: center;
margin-top: 20px;
color: #999;
font-size: 14px;
}
</style>
<div class="article-layout">
<div class="article-main">
<h2>Grid布局的核心优势详解</h2>
<p style="margin:20px 0;">Grid布局是CSS的二维布局方案，能够同时控制行和列的排布，相比Flex布局，在处理复杂的二维布局时更加简洁高效...</p>
<p>Grid布局的核心属性包括grid-template-columns、grid-template-rows、gap等，通过这些属性可以轻松实现各种复杂的布局需求...</p>
</div>
<div class="article-aside">
<h3>侧边栏</h3>
<p>相关推荐</p>
<ul style="margin:10px 0;padding-left:20px;">
<li>CSS Flex布局详解</li>
<li>前端布局最佳实践</li>
<li>响应式布局技巧</li>
</ul>
</div>
<div class="article-footer">版权所有 © 2026 前端布局教程</div>
</div>
10. 重叠层 / 悬浮层布局（无需定位，Grid 黑科技）
场景: 开发中经常遇到的「内容层 + 悬浮层 / 遮罩层」布局，比如：卡片 hover 遮罩、图片水印、弹窗背景，不用写 position: absolute/relative，纯 Grid 实现元素重叠，代码极简，定位精准，这是 Grid 的「隐藏神技」！
html
<style>
.card-wrap {
width: 300px;
height: 200px;
margin: 20px auto;
/* 核心：开启Grid，只划分1列1行 */
display: grid;
border-radius: 8px;
overflow: hidden;
cursor: pointer;
}
/* 两个子元素都在同一个单元格里，自动重叠 */
.card-img, .card-mask {
grid-column: 1 / 2;
grid-row: 1 / 2;
width: 100%;
height: 100%;
}
.card-img {
background: #3498db;
display: flex;
align-items: center;
justify-content: center;
color: #fff;
font-size: 20px;
}
.card-mask {
background: rgba(0,0,0,0.6);
color: #fff;
display: flex;
align-items: center;
justify-content: center;
font-size: 18px;
/* 默认隐藏遮罩层 */
opacity: 0;
transition: opacity 0.3s ease;
}
.card-wrap:hover .card-mask {
/* hover时显示遮罩 */
opacity: 1;
}
</style>
<div class="card-wrap">
<div class="card-img">图片内容</div>
<div class="card-mask">查看详情 →</div>
</div>
11. 响应式图文混排布局（新闻 / 资讯列表 常用）
场景: 新闻、资讯、朋友圈类的图文混排布局：左侧小图 + 右侧文字内容，小屏幕自动变成「图片在上，文字在下」，无媒体查询，纯 Grid 响应式实现，完美适配移动端和 PC 端。
html
<style>
.news-list {
width: 100%;
max-width: 800px;
margin: 20px auto;
display: grid;
gap: 15px;
padding: 0 10px;
}
.news-item {
display: grid;
/* 核心响应式：小屏幕1列，大屏幕2列（图30%，文字70%） */
grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
gap: 10px;
border: 1px solid #eee;
padding: 10px;
border-radius: 8px;
}
.news-img {
width: 100%;
height: 120px;
background: #f5f5f5;
border-radius: 4px;
}
.news-content {
display: flex;
flex-direction: column;
justify-content: space-between;
}
.news-title {
font-size: 16px;
font-weight: bold;
}
.news-time {
color: #999;
font-size: 12px;
}
</style>
<div class="news-list">
<div class="news-item">
<div class="news-img"></div>
<div class="news-content">
<div class="news-title">Grid布局成为前端布局的主流方案</div>
<div class="news-time">2026-01-13 10:00</div>
</div>
</div>
<div class="news-item">
<div class="news-img"></div>
<div class="news-content">
<div class="news-title">前端工程师必学的Grid核心属性</div>
<div class="news-time">2026-01-12 18:00</div>
</div>
</div>
</div>
12. 多行多列不规则排版（杂志 / 海报式布局）
场景: 类似杂志、海报的不规则图文排版，元素大小不一、位置交错，用 Grid 可以精准控制每个元素的位置和大小，比 float 或定位更灵活。
html
<style>
.magazine {
width: 100%;
max-width: 800px;
margin: 20px auto;
display: grid;
grid-template-columns: repeat(4, 1fr);
grid-template-rows: repeat(3, 120px);
gap: 10px;
}
.item {
background: #3498db;
color: #fff;
border-radius: 8px;
display: flex;
align-items: center;
justify-content: center;
}
/* 精准控制每个元素的位置 */
.item1 { grid-column: 1/3; grid-row: 1/2; background: #e74c3c; }
.item2 { grid-column: 3/5; grid-row: 1/3; background: #2ecc71; }
.item3 { grid-column: 1/2; grid-row: 2/4; background: #9b59b6; }
.item4 { grid-column: 2/3; grid-row: 2/3; background: #f39c12; }
.item5 { grid-column: 2/5; grid-row: 3/4; background: #1abc9c; }
</style>
<div class="magazine">
<div class="item item1">标题区</div>
<div class="item item2">大图区</div>
<div class="item item3">侧边栏</div>
<div class="item item4">小图1</div>
<div class="item item5">正文区</div>
</div>