Grid-地表最强布局Grid 布局是 CSS 中用于构建二维布局的强大工具，通过 “行” 与 “列” 的网格结构，实现

Grid布局和使用

1. 常规flex布局痛点

在一些特定的布局下，比如卡片布局，在我使用flex布局后，添加justify-content: space-between flex-wrap: wrap属性来处理页面布局，在宽度不足，自动换行且最后一行不足三个时，那么最后一行会出现间距比较大的情况。

2. Grid布局是什么

Grid 布局（网格布局）是 CSS 中一种强大的二维布局系统，用于创建复杂的网页布局结构。它通过将页面划分为行和列的网格容器，能够同时处理元素在水平和垂直方向上的排列，相比 Flexbox（一维布局）更适合构建整体页面布局。

3. 兼容性

目前除了低版本的IE浏览器，都是可以支持的，可以放心使用

另外可以在网站查询 caniuse.com/ 支持情况

4. 基本使用

在 Grid 布局中，display 属性的取值决定了网格容器是块级网格容器还是行级网格容器，两者的核心区别在于容器本身在页面流中的排列方式，以及对父容器空间的占用规则

特性	块级网格容器（`display: grid`）	行级网格容器（`display: inline-grid`）
页面流排列	独占一行	与其他行级元素同行排列
默认宽度	铺满父容器宽度	由网格内容（轨道总宽）决定
与相邻元素关系	上下排列	左右排列

在实际使用中，根据不同的布局场景选择不同的方式需要独立区块时用 grid，需要嵌入行内时用 inline-grid。

5. Grid中的行和列

使用 grid-template-columns 规则可划分列数，使用 grid-template-rows 划分行数。

实现三行三列

   .container {
            margin: 50px auto;
            display: grid;
            width: 600px;
            height: 300px;
            border: 5px solid #3333;
            grid-template-columns: 200px 200px 200px;
            grid-template-rows: 100px 100px 100px;
        }

        .container div {
            width: 200px;
            height: 100px;
            background-color: yellowgreen;
            border: 1px solid #d2d0d0;
        }

也可以使用百分比

    display: grid; 
    grid-template-columns: 33.33% 33.33% 33.33%; // 三列 
    grid-template-rows: 50% 50%; // 三行

6. 重复设置

细心的同学可能发现，我设置三行需要grid-template-columns和grid-template-rows属性指定三次值，那我设置很多行，岂不是需要一个个的指定？答案肯定不是，可以通过repeat统一设置属性值，第一个参数为重复的数量，第二个参数为重复值

grid-template-rows: repeat(3, 100px); 
grid-template-columns: repeat(3, 200px);

7. 比例划分

固定单位：px（像素）、em、rem 等，如 100px 表示固定高度 / 宽度。
比例单位 fr：分配剩余空间的比例（fraction 的缩写）。
例：grid-template-columns: 1fr 2fr 表示两列，第二列宽度是第一列的 2 倍。
自适应 auto：由内容或父容器自动决定尺寸。
例：grid-template-rows: auto 表示行高由内容撑开。
最小 / 最大限制：minmax(min, max) 定义尺寸范围。
例：grid-template-columns: minmax(100px, 1fr) 表示列宽最小 100px，最大占满剩余空间。

8. 间距定义

`column-gap` 属性设置列间距

column-gap: 20px;

`row-gap` 属性设置列间距

row-gap: 20px;

`gap` 属性统一设置行和列间距

gap: 20px;

9.网格对齐

属性	说明	说明
justify-content	所有栅格在容器中的水平对齐方式，容器有额外空间时	栅格容器
align-content	所有栅格在容器中的垂直对齐方式，容器有额外空间时	栅格容器
align-items	栅格内所有元素的垂直排列方式	栅格容器
justify-items	栅格内所有元素的横向排列方式栅格内所有元素的横向排列方式	栅格容器
align-self	元素在栅格中垂直对齐方式	栅格元素
justify-self	元素在栅格中水平对齐方式	栅格容器

整体使用类似于Flex布局

10. 结尾

以上是在实际场景中高频使用的 Grid 布局属性，掌握这些足以应对大多数布局需求。当然，Grid 的强大远不止于此 —— 像用grid-template-areas通过命名区域搭建直观的页面框架，用grid-auto-flow控制元素的自动排列逻辑，或是借助justify-content/align-content调整整体网格在容器中的位置等，都能让布局设计更灵活、更贴合场景。

网格布局的魅力在于它对二维空间的精准掌控，从简单的卡片排列到复杂的响应式页面架构，都能游刃有余。如果想进一步探索，可以尝试组合不同属性实现个性化布局，或是结合媒体查询打造适配多设备的弹性界面。布局的本质是服务于内容与交互，多实践、多调试，就能逐渐体会到 Grid 布局带来的高效与优雅。

Grid-地表最强布局