前言

flex布局大家应该已经运用的炉火纯青了，相信在日常开发中大家和我一样不管遇到什么都是flex一把搜哈。直到我遇到grid，才发现有些场景下，不是说flex实现不了而是使用grid能够更加轻松的完成任务。下面拿几个场景和大家分享一下。

宫格类的布局

比如我要实现一个布局，最外层元素的宽度是1000px，高度自适应。子元素宽度为300px，一行展示3个，从左到右排列。其中最左边与最右边的元素需要紧挨父元素的左右边框。

使用flex实现

这个页面布局在日常开发中非常常见，考虑下使用flex布局如何实现，横向排列元素，固定宽度300，wrap设置换行显示，设置双端对齐。看起来很简单，来实现一下。

<!DOCTYPE html>
<html lang="en">

<head>
    <style>
        .box{
            width: 1000px;
            display: flex;
            flex-wrap: wrap;
            justify-content: space-between;
            gap: 10px;
        }
        .item{
            background: pink;
            width: 300px;
            height: 150px;
        }
    </style>
</head>

<body>
    <div class="box">
        <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 class="item">7</div>
        <div class="item">8</div>
    </div>
</body>

</html>
  • 1.
  • 2.
  • 3.
  • 4.
  • 5.
  • 6.
  • 7.
  • 8.
  • 9.
  • 10.
  • 11.
  • 12.
  • 13.
  • 14.
  • 15.
  • 16.
  • 17.
  • 18.
  • 19.
  • 20.
  • 21.
  • 22.
  • 23.
  • 24.
  • 25.
  • 26.
  • 27.
  • 28.
  • 29.
  • 30.
  • 31.
  • 32.
  • 33.
  • 34.

实现之后发现了问题，由于我们设置了双端对齐导致，当最后一行的个数不足三个时，页面展示的效果和我们预期的效果有出入。使用flex实现这个效果就要对这个问题进行额外的处理。

处理的方式有很多种，最常见的处理方式是在元素后面添加空元素，使其成为3的倍数即可。其实这里添加空元素的个数没有限制，因为空元素不会展示到页面上，即使添加100个空元素用户也是感知不到的。个人觉得这并不是一个好办法，在实际处理的时候可能还会遇到别的问题。个人觉得还是把flex下的子元素设置成百分比好一点。


使用grid实现

面对这种布局使用grid是非常方便的，设置3列，每列300px，剩下的元素让它自己往下排即可。几行代码轻松实现该效果，不需要flex那样额外的处理。

<!DOCTYPE html>
<html lang="en">

<head>
    <style>
        .box {
            display: grid;
            grid-template-columns: repeat(3, 300px);
            justify-content: space-between;
            gap: 10px;
            width: 1000px;
        }

        .item {
            background: pink;
            height: 100px;
        }
    </style>
</head>

<body>
    <div class="box">
        <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 class="item">7</div>
        <div class="item">8</div>

    </div>
</body>

</html>
  • 1.
  • 2.
  • 3.
  • 4.
  • 5.
  • 6.
  • 7.
  • 8.
  • 9.
  • 10.
  • 11.
  • 12.
  • 13.
  • 14.
  • 15.
  • 16.
  • 17.
  • 18.
  • 19.
  • 20.
  • 21.
  • 22.
  • 23.
  • 24.
  • 25.
  • 26.
  • 27.
  • 28.
  • 29.
  • 30.
  • 31.
  • 32.
  • 33.
  • 34.
  • 35.

结尾

除了上述场景外肯定还有许多场景适合使用grid来完成。grid和 flex都是强大的布局方式，它们并没有明显的优劣之分。关键在于掌握这两种方法，并在开发中根据实际情况选择最合适的方案。