grid 入门：用 grid 布局轻松解决 flex 布局不太好做的一个问题

野性酷女 2022-05-21 05:14 265阅读 0赞

# 问题 #

最近一个需求如图：

![grid-1][]

大概是

*  数据上，react 组件从父组件接收两个数组，分别渲染出左右两列；  
    
    
     *  `Array_1.map(渲染左列表组件) Array_2.map(渲染右列表组件)`
 *  左右两列内容都是动态的，要求自适应文字高度，同一行其行高一致；
 *  左列文字右对齐，右列文字左对齐；

原来数据是死的，用 flex 布局，左右分别两个 div，由于文字长度固定，不会有问题。  
后来数据是动态的，可能造成同一行高度错位的问题。

在不改动数据结构的前提下，尝试用 grid 解决，发现异常轻松。

# GRID 轻松解决 #

grid 布局和 flex 布局挺像，也是 容器 + item 的结构。

## 对父元素设置 ##

.daddy { display: grid; }

就生效了

根据上面的图，我们想要一个两列的网格。这个需求可以通过 `grid-template` 网格模板轻松设置。

*  列  
    
    
     *  我们需要两列，宽度分别是 60px 180px，直接这么写就好了，及其简单
     *  `grid-template-columns: 60px 180px`
 *  行  
    
    
     *  我们需要行数是自适应的，直接 auto 就可以
     *  `grid-template-rows: auto`

.daddy { display: grid; grid-template-columns: 60px 180px grid-template-rows: auto; }

至此，我们得到了一个网格结构。

不过是有问题的，文字内容没有按照预想的顺序排列：  
![grid-2][]

原因在于，我们的数据是类似这样的：

... ...
    
    // 通过 Array_1 渲染出
    {
        <div className="key">aaa</div>
        <div className="key">bbb</div>
        <div className="key">ccc</div>
        <div className="key">ddd</div>
    }
    // 通过 Array_2 渲染出
    {
        <div className="value">AAA</div>
        <div className="value">BBB</div>
        <div className="value">CCC</div>
        <div className="value">DDD</div>
    }
    
    ... ...

grid 会自动按顺序一行行往下填充网格空格。

我们需要**设置 key 是第一列，value 是第二列**。

## 子元素的设置 ##

grid 布局允许我们指定子元素出现在哪一列。

我们希望：key 是第一列。即，**key 的范围在下图（从左到右）第一条竖红线 与 第二条竖红线 之间。**

![grid-3][]

用代码表示  
`grid-column-start: 1;` 即 纵向，从第一条红线开始；  
`grid-column-end: 2;` 纵向，到第二条红线结束；

即

// key 占第一列
    .key {
        grid-column-start: 1;
        grid-column-end: 2;
    }
    // value 占第二列
    .value {
        grid-column-start: 2;
        grid-column-end: 3;
    }

于是，我们得到了一个新的网格：

![这里写图片描述][70]

key 的确在第一列， value 的确在第二列 … …

## 空网格的填充方式 ##

问题出在了 grid 对空网格的填充规则上。

用于设置父元素的 `grid-auto-flow` 的默认值是 `row`。即依次填充每行。  
结合上面提到的，两个数组分别得到的数据，不难理解为什么会出现这样的情况。

该属性还有

*  `column` 依次填充每列
 *  `dense` 尝试在网格中填充空洞

我们对父元素设置

.daddy {
        ... ...
        grid-auto-flow: dense;
    }

![grid-5][]

成功~

最后，我们对第一列规定右对齐

.key {
        ... ...
        justify-content: end;
    }

![这里写图片描述][70 1]

完美~

# 最后代码 #

.daddy {
                display: grid;
                grid-template-columns: 60px 180px;
                grid-template-rows: auto;
                grid-auto-flow: dense;
                .key {
                    grid-column-start: 1;
                    grid-column-end: 2;
                    justify-content: end;
                }
                .value {
                    grid-column-start: 2;
                    grid-column-end: 3;
                    word-wrap: wrap;
                    word-break: break-word;
                }
            }

grid 真的十分方便！

[grid-1]: /images/20220521/25bb8a9a87b947e4bbf97658e560a975.png
[grid-2]: /images/20220521/55876ec1ea834267bc8897ae05d0c7de.png
[grid-3]: /images/20220521/2862ac91b6e540c5982258c5191b1596.png
[70]: /images/20220521/a2dfa7f6f0594a96a02fc6eea2b2e0fa.png
[grid-5]: /images/20220521/7f6c4dcd2b894491bd33435a4a012301.png
[70 1]: /images/20220521/9c1da733bc51414695288332fa3ed127.png