Grid布局适用于二维布局场景，1. 通过grid-template-columns实现左侧固定、右侧自适应的两栏布局；2. 利用repeat(auto-fit, minmax())创建响应式卡片网格，自动调整列数；3. 使用grid-template-areas构建头部、侧边栏、内容区和页脚的经典网页结构，布局清晰；4. Grid天然支持等高列，配合align-items可轻松实现内容垂直居中。这些实例展示了Grid在现代网页布局中的灵活性与强大功能。
Grid网格布局是CSS中最强大的布局工具之一，适合处理二维布局（行和列）。通过实际例子能更直观理解它的用法。以下是几个常见的Grid布局应用实例。
1. 基础两栏布局
实现一个左侧固定宽度、右侧自适应的两栏布局。
.container { display: grid; grid-template-columns: 200px 1fr; /* 左侧200px，右侧占剩余空间 */ gap: 16px; /* 列间距 */ height: 100vh;}.sidebar {background-color: #f0f0f0;padding: 20px;}
.main-content {background-color: #d0e0f0;padding: 20px;}
HTML结构：
主内容区
2. 响应式卡片网格
创建一个在不同屏幕尺寸下自动调整列数的卡片布局。
立即学习“前端免费学习笔记（深入）”；
.card-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: 20px; padding: 20px;}.card {background: white;border-radius: 8px;box-shadow: 0 2px 5px rgba(0,0,0,0.1);padding: 20px;text-align: center;}
说明： auto-fit配合minmax()让每张卡片最小250px，超出则换行，自动填充可用空间。
css网格布局图片响应式缩放特效
一款css网格布局图片响应式缩放特效
14 查看详情
3. 经典网页布局（头部 + 侧边栏 + 内容 + 页脚）
使用grid-template-areas构建清晰的页面结构。
.layout { display: grid; height: 100vh; grid-template-rows: 60px 1fr 40px; grid-template-columns: 200px 1fr; grid-template-areas: "header header" "sidebar main" "footer footer"; gap: 10px;}.header { grid-area: header; background: #4a90e2; }.sidebar { grid-area: sidebar; background: #f0f0f0; }.main { grid-area: main; background: #fff; }.footer { grid-area: footer; background: #ccc; }
每个区域通过grid-area分配位置，结构一目了然。
4. 等高布局与内容对齐
Grid天然支持等高列，无需额外计算高度。
.equal-height { display: grid; grid-template-columns: 1fr 2fr; gap: 16px; align-items: center; /* 垂直居中内容 */}.left-box {background: #ffeaa7;padding: 20px;}
.right-box {background: #fab1a0;padding: 20px;}
即使左右内容长度不同，两列高度始终保持一致，且内部内容可轻松垂直居中。
基本上就这些常见用法。Grid布局灵活且语义清晰，特别适合复杂界面的搭建。掌握这几个实例后，可以组合出大多数现代网页布局需求。
以上就是css布局grid网格布局应用实例的详细内容，更多请关注创想鸟其它相关文章！
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。
如发现本站有涉嫌抄袭侵权/违法违规的内容， 请发送邮件至 chuangxiangniao@163.com 举报，一经查实，本站将立刻删除。
发布者：程序猿，转转请注明出处：https://www.chuangxiangniao.com/p/1066951.html
微信扫一扫 
支付宝扫一扫 
