🧑 写在开头
点赞 + 收藏 === 学会🤣🤣🤣
CSS Grid 布局(网格布局)是 CSS 中一种强大的二维布局系统,它彻底改变了我们构建网页布局的方式。与传统的布局方法(如浮动、定位或 Flexbox)相比,Grid 提供了更直观、更灵活的方式来创建复杂的网页布局。
一、Grid 布局的基本概念
1. 什么是 Grid 布局?
CSS Grid 是一个二维布局系统,可以同时处理行和列的布局。它允许开发者将页面划分为多个区域,并精确定位和调整这些区域的大小和位置。
2. 核心术语
- Grid Container(网格容器):应用
display: grid
的元素 - Grid Item(网格项):网格容器的直接子元素
- Grid Line(网格线):构成网格结构的分界线
- Grid Track(网格轨道):两条相邻网格线之间的空间(行或列)
- Grid Cell(网格单元格):四条网格线包围的最小单位
- Grid Area(网格区域):任意数量的网格单元格组成的矩形区域
二、创建基本 Grid 布局
1. 定义一个网格容器
.container { display: grid; grid-template-columns: 100px 200px 100px; /* 3列,宽度分别为100px,200px,100px */ grid-template-rows: 100px 200px; /* 2行,高度分别为100px,200px */ gap: 10px; /* 网格项之间的间距 */ }
2. 简单的网格示例
<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>
.container { display: grid; grid-template-columns: repeat(3, 1fr); /* 3列,每列等宽 */ grid-template-rows: 100px 100px; /* 2行,每行100px高 */ gap: 15px; } .item { background: #4CAF50; padding: 20px; text-align: center; }
三、Grid 布局的核心特性
1. 灵活的轨道大小
fr
单位:表示网格容器中的可用空间的一部分minmax()
函数:定义大小范围auto
关键字:根据内容自动调整
.container { grid-template-columns: 1fr minmax(200px, 1fr) 1fr; grid-template-rows: auto 1fr auto; }
2. 响应式布局
.container { grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); }
这个设置会创建尽可能多的 200px 宽的列来填充容器,如果空间不足则换行。
3. 网格项定位
可以精确控制网格项的位置:
.item { grid-column-start: 1; grid-column-end: 3; grid-row-start: 1; grid-row-end: 2; } /* 简写形式 */ .item { grid-column: 1 / 3; /* 从第1列线到第3列线 */ grid-row: 1 / 2; /* 从第1行线到第2行线 */ } /* 跨越整个网格 */ .item { grid-column: 1 / -1; /* 从第1列线到最后1列线 */ }
4. 命名网格线和区域
.container { display: grid; grid-template-columns: [main-start] 1fr [content-start] 1fr [content-end] 1fr [main-end]; grid-template-rows: [header-start] 80px [header-end main-start] 1fr [main-end footer-start] 80px [footer-end]; 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; }
四、Grid 布局的实际应用
1. 经典网页布局
.layout { display: grid; grid-template-columns: 250px 1fr; grid-template-rows: 80px 1fr 100px; grid-template-areas: "header header" "sidebar main" "footer footer"; min-height: 100vh; } .header { grid-area: header; } .sidebar { grid-area: sidebar; } .main { grid-area: main; } .footer { grid-area: footer; }
2. 图片画廊
.gallery { display: grid; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); gap: 20px; padding: 20px; }
3. 产品卡片网格
.products { display: grid; grid-template-columns: repeat(3, 1fr); gap: 30px; } @media (max-width: 900px) { .products { grid-template-columns: repeat(2, 1fr); } } @media (max-width: 600px) { .products { grid-template-columns: 1fr; } }
五、Grid 与 Flexbox 的比较
经验法则:
- 使用 Grid 进行宏观布局(整个页面的结构)
- 使用 Flexbox 进行微观布局(组件内部的排列)
六、浏览器支持与渐进增强
CSS Grid 已被所有现代浏览器支持(包括 Edge 16+)。对于旧版浏览器,可以采用渐进增强的策略:
.container { display: flex; /* 回退方案 */ flex-wrap: wrap; } @supports (display: grid) { .container { display: grid; grid-template-columns: repeat(3, 1fr); flex-wrap: initial; } }
本文转载于:https://juejin.cn/post/7521233387224154146
如果对您有所帮助,欢迎您点个关注,我会定时更新技术文档,大家一起讨论学习,一起进步。
来源链接:https://www.cnblogs.com/smileZAZ/p/18959959
© 版权声明
本站所有资源来自于网络,仅供学习与参考,请勿用于商业用途,否则产生的一切后果将由您(转载者)自己承担!
如有侵犯您的版权,请及时联系3500663466#qq.com(#换@),我们将第一时间删除本站数据。
如有侵犯您的版权,请及时联系3500663466#qq.com(#换@),我们将第一时间删除本站数据。
THE END
暂无评论内容