前言
📫 大家好，我是陈三心，热爱技术和分享，欢迎大家交流，一起学习进步！
🍅 个人主页：陈三心
背景
最近在项目中遇到了这样的一个响应式布局需求：
在不同屏幕宽度下，动态调整卡片内容的列数，并且每列的宽度不能小于 300px，同时要充分利用剩余空间。
最初，我尝试使用 Flex 布局来实现这一需求，但很快发现 Flex 虽然强大，却无法完美应对这种动态列数和固定最小宽度的场景。
正当我为此头疼时，团队中的一位伙伴提到了 CSS Grid 布局。之前对 Gird 布局仅仅局限于了解程度，并没有去深入学习，因为大部分场景使用 Flex 布局就足矣完成。既然 Flex 在该需求场景下显得有些力不从心，于是，我开始研究 Grid 的相关文档，发现其功能远比我想象的要强很多，它不仅让代码更加简洁，还提供了更强大灵活的布局控制能力。最终，通过 Grid 布局完美解决了我的问题。
实现代码其实非常简单：
.wrapper {
display: grid;
grid-gap: 10px;
grid-template-columns: repeat(auto-fill, minmax(300px, 1fr) ) ;
}上述代码中的repeat、minmax和fr是什么呢？别着急，看完本篇你将对 Grid 有一个全面的认识。
Grid 布局简介
想象一下，你在设计一个网页布局时，就像在画一张表格。你可以把网页分成很多行和列，形成一个网格系统。Grid 布局就是这样一个强大的工具，它允许你通过定义行和列来创建复杂的网页布局。你可以把内容（比如图片、文字）放到这些网格的任意位置，甚至可以跨越多行或多列。
简单来说，Grid 布局（网格布局）就是将一个网页划分成一个一个的小格子，然后你可以自由地把内容放到这些格子里，或者让内容跨越多个格子。它就像是一个灵活的“网格画布”，让你可以轻松地控制网页的布局结构。
Grid 布局的优势：
-
二维布局：Grid 布局是真正的二维布局，可以同时控制行和列。相比于 Flex（主要是一维布局，只能控制行或列），Grid 布局更适合处理复杂的网页布局。
-
灵活控制：通过简单的 CSS 属性，可以精确控制每个网格项目的位置和大小。
-
代码简洁：相比传统的布局方法，Grid 布局几行 CSS 就能实现复杂的布局效果，更加简洁和易于维护。
浏览器兼容性
目前，所有现代浏览器都支持 CSS Grid 布局，包括 Chrome、Firefox、Safari、Edge 等。
根据caniuse，97.21%的用户支持Grid，即 Grid 在现代浏览器中已经非常成熟，可以放心使用。
基本概念
1. 容器和项目
-
容器：采用网格布局的区域，即为容器。
-
项目：容器里采用网格定位的直系子元素就是“项目”。
2. 行和列
-
行：容器中的水平区域，把容器分成几行。
-
列：容器中的垂直区域，把容器分成几列。
3. 单元格和网格线
-
单元格：行和列交叉形成的小格子，就是“单元格”。
-
网格线：划分行和列的线就是“网格线”。
想象你在画一个九宫格：
-
容器就是整个九宫格。
-
行和列把九宫格分成 3 行 3 列（图中黄色区域）。
-
单元格就是九宫格里的每一个小格子。
-
网格线就是划分九宫格的横线和竖线（蓝色区域）。共有4根水平网格线和4根垂直网格线。
你可以把内容（项目）放到任意一个格子里，或者让内容跨越多行或多列。这就是 Grid 布局的核心思想！
在 Grid 布局中，容器属性和项目属性是构建网格系统的核心。下面来详细介绍。
容器属性
容器属性是指定义在容器上的属性，用于定义网格的整体结构。
display 属性
display 属性用于将元素定义为网格容器，只需要将其设置为 grid 即可：
.container {
display: grid;
}默认情况下，Grid 的列是独占一行的，其宽度随父盒子大小。效果如下：
上述的容器元素是块级元素，但也可以设成行内元素。
-
inline-grid：生成行内网格容器。
.container {
display: inline-grid;
}