页面怎么布局，当然是Grid (ˉ﹃ˉ)

最新推荐文章于 2024-08-16 17:14:08 发布

Forpear

最新推荐文章于 2024-08-16 17:14:08 发布

阅读量186

点赞数

分类专栏：前端 html 文章标签： javascript 学习 android

本文链接：https://blog.csdn.net/m0_54850952/article/details/123228221

版权

本文探讨了前端布局中的Grid布局，对比了Grid与Flex布局的差异，指出Grid的高性能和强大布局能力。介绍了Grid的基本概念，如容器、项目、行、列、单元格和网格线，并展示了如何设置display、行列属性、宽高等。通过实例解析了grid-template-areas的使用，以实现更复杂的布局。最后，提供了一些学习资源和有趣的布局示例。

摘要由CSDN通过智能技术生成

序

这里先问大家一个小问题，各位用中文输入法打Grid会出现什么呢？

在讲述Grid布局之前，先聊聊前端目前比较流行布局方式，前端开发者应该都知道Flex布局，Flex布局真的非常好用

相较于原来的Float浮动布局时代，Flex布局做到了更优解

并且在性能上，Flex布局性能也远远比Float更高，同样，Grid也是

在这里插入图片描述

flex和float性能测试

float布局：

<style>
.test {
    width: 100px;
    height: 100px;
    margin: 20px;
    background-color: blueviolet;
    float: left;  /*float布局*/
}
</style>

<button onclick="start()"> 开始布局 </button>
<div id="app">
</div>
<script>
    function start() {
        var div = "<div class='test'></div>", dhtml = "";
        for (let i = 0; i < 10000; i++) {
            dhtml += div;
        }
        document.getElementById("app").innerHTML = dhtml;
    }
</script>

布局性能：
在这里插入图片描述

flex布局（修改一下CSS）：

<style>
    #app {
        display: flex;
        flex-wrap: wrap;
    }
    .test {
        width: 100px;
        height: 100px;
        margin: 20px;
        background-color: blueviolet;
        /* float: left; */
    }
</style>

布局性能：