真的不考虑下grid布局?有时候真的很方便!

前言

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

宫格类的布局

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

使用flex实现

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

html 复制代码
<!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>

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

处理的方式有很多种,最常见的处理方式是在元素后面添加空元素,使其成为3的倍数即可。其实这里添加空元素的个数没有限制,因为空元素不会展示到页面上,即使添加100个空元素用户也是感知不到的。

使用grid实现

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

html 复制代码
<!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>

实现后台管理布局

这种后台管理的布局,使用flex实现当然也没有问题。首先需要纵向排列红色的两个div,然后再横向的排列蓝色的两个div,最后再纵向的排列绿色的两个div实现布局。达到效果是没有问题的,但是实现起来较为繁琐,而且需要很多额外的标签嵌套。

由于grid是二维的,所以它不需要额外的标签嵌套。html里面结构清晰,如果需要改变页面结构,只需要改变container的样式就可以了,不需要对html进行修改。

html 复制代码
<!DOCTYPE html>
<html lang="en">

<head>
    <style>
        .container {
            display: grid;
            grid-template-columns: 250px 1fr;
            grid-template-rows: 100px 1fr 100px;
            grid-template-areas:
                'header header'
                'aside  main'
                'aside footer';
            height: 100vh;
        }

        .header {
            grid-area: header;
            background: #b3c0d1;
        }

        .aside {
            grid-area: aside;
            background: #d3dce6;
        }

        .main {
            grid-area: main;
            background: #e9eef3;
        }

        .footer {
            grid-area: footer;
            background: #b3c0d1;
        }
    </style>
</head>

<body>
    <div class="container">
        <div class="header">Header</div>
        <div class="aside">Aside</div>
        <div class="main">Main</div>
        <div class="footer">Footer</div>
    </div>
</body>

</html>

实现响应式布局

借助grid的auto-fillminmax函数可以实现类似响应式布局的效果,可以应用在后台管理的表单布局等场景。

html 复制代码
<!DOCTYPE html>
<html lang="en">

<head>
    <style>
        .box {
            display: grid;
            grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
            justify-content: space-between;
            gap: 10px;
        }

        .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>

结尾

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

希望大家能有所收获!

相关推荐
brrdg_sefg14 分钟前
Rust 在前端基建中的使用
前端·rust·状态模式
m0_7482309439 分钟前
Rust赋能前端: 纯血前端将 Table 导出 Excel
前端·rust·excel
qq_589568101 小时前
Echarts的高级使用,动画,交互api
前端·javascript·echarts
黑客老陈2 小时前
新手小白如何挖掘cnvd通用漏洞之存储xss漏洞(利用xss钓鱼)
运维·服务器·前端·网络·安全·web3·xss
正小安2 小时前
Vite系列课程 | 11. Vite 配置文件中 CSS 配置(Modules 模块化篇)
前端·vite
暴富的Tdy2 小时前
【CryptoJS库AES加密】
前端·javascript·vue.js
neeef_se2 小时前
Vue中使用a标签下载静态资源文件(比如excel、pdf等),纯前端操作
前端·vue.js·excel
m0_748235612 小时前
web 渗透学习指南——初学者防入狱篇
前端