从"劝退神器"到"布局王者"的全维度指南
一、2025年为什么必须懂Grid布局？
-
浏览器支持率突破99.8%的现实意义
Grid布局的浏览器支持率已经达到99.8%，几乎覆盖了所有现代浏览器。这意味着开发者可以放心使用Grid布局，而无需担心兼容性问题。 -
主流UI框架全面拥抱Grid的现状分析
越来越多的UI框架（如Bootstrap、Tailwind CSS等）开始支持Grid布局，甚至将其作为默认布局方式。掌握Grid布局，能够更好地理解和应用这些框架。 -
CSS Subgrid+新视口单位的革命性升级
CSS Subgrid和新的视口单位（如dvmin、dvmax）进一步增强了Grid布局的能力，使其在复杂布局和响应式设计中表现更加出色。
二、Grid布局核心概念速成
- 10分钟建立网格世界观
- 二维布局的降维打击优势 Grid布局是一种二维布局系统，可以同时控制行和列，相比传统的一维布局（如Flexbox），Grid布局在处理复杂布局时更加灵活和高效。 - 容器 vs 项目的哲学思辨
三、Grid 和 Flex 的对比
Flex 的痛点问题
在使用传统Flex布局时，如果想实现子元素两端对齐并自动分配中间间距，假设一行4个，如果每一行都是4的倍数，那没有问题。但如果最后一行是2、3个时，就会出现分布不均匀的情况。
解决方案1：
- 使用
justify-content: flex-start;让子元素默认左对齐。 - 通过设置
margin-right来控制子元素之间的间距。 - 使用
nth-child选择器去除最后一列子元素的margin-right，确保布局整齐。
.container {
display: flex;
flex-wrap: wrap;
justify-content: flex-start;
}
.container .item {
width: 300px;
height: 200px;
margin-right: 20px;
margin-bottom: 20px;
}
.container .item:nth-child(4n) {
margin-right: 0;
}
关键点说明：
justify-content: flex-start;
将子元素默认左对齐，而不是使用space-between导致最后一行分布不均匀。margin-right的作用
通过手动设置margin-right，可以精确控制子元素之间的水平间距。nth-child选择器
nth-child(4n)表示选择每行的第4个子元素（假设每行4个），将第4个子元素的margin-right设为0，确保最后一列的子元素不会因为多余的间距而错位。
Grid 二维网格布局
基本概念：
display: grid;
设置为Grid布局。grid-template-columns: 1fr;
引入新的计量单位fr，1fr代表1个列。grid-template-columns: repeat(4, 1fr);
自动排布4列。
间隙设置：
gap: 20px;
设置行和列的间隙。column-gap: 10px;
设置列间隙。row-gap: 10px;
设置行间隙。- 合并写法：
gap: 行间距 列间距;
例如：gap: 10px 20px;。
响应式布局：
grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
自动填充，页面的宽度能容纳多少，一行就放多少，随页面的变化而响应。
实战——复现b站网页端页面布局
需要使用到 grid-row 和 grid-column,这两个元素可以实现控制一份由几个元素组成
比如上面这个b站首页 很明显发现整体可以使用gird布局实现，但是最左侧的一个格子正好占了2行。
具体实现：
给最左侧的盒子单独设置一个类 item1，同时把所有item中原带的高度宽度都取消掉
.container .item1 {
grid-row: 1/3; /* 跨两行 */
}
.container .item1 {
grid-row: 1/3; 1+2=3 /* 跨两行 */
grid-column: 1/3; /* 跨两列 */
}
