怎么实现系列：2.栅格布局

Alin
303 阅读2分钟

一起养成写作习惯！这是我参与「掘金日新计划 · 4 月更文挑战」的第3天，点击查看活动详情。

系列介绍

经常会被面试官问到这个怎么实现，或者怎么实现xx？

有些功能或者效果没有做过或者实现过，回答不出来，场面一度有些尴尬

于是打算出一个怎么实现系列，来实现xx功能或者xx效果，以此来提升自己的实战效果和能力。

本系列是一个开放系列，我实现的不一定是最好的，欢迎大家交流讨论

场景

面试官：你都用过什么布局？

我：我使用过grid布局

面试官：那你说下栅格布局怎么实现

（思考了一分钟）

我：呃...这个我没实现过

面试官：...

查阅资料

不会实现没有关系，后面马上去查阅相关资料，学习一下怎么实现栅格布局

什么是栅格布局

栅格布局，把容器分为多少行多少列。我们可以控制容器里面的元素可以占据多少行，多少列，这称为栅格布局。css布局里面有grid布局，把容器划分为一个网格，有多少行多少列；同时也可以控制子元素占据多少个格子。利用grid布局的特性，刚好可以实现栅格布局

实现

  1. 创建一个html文件

  2. 在body里面创建一个容器，在容器里生成12个子元素

    <div class="container">
            <div class="item"></div>
            <div class="item"></div>
            <div class="item"></div>
            <div class="item"></div>
            <div class="item"></div>
            <div class="item"></div>
            <div class="item"></div>
            <div class="item"></div>
            <div class="item"></div>
            <div class="item"></div>
            <div class="item"></div>
            <div class="item"></div>
        </div>

  3. 设置容器的样式

    
.container {
                width: 800px;
                height: 600px;
                display: grid;
                grid-template-columns: repeat(4, 1fr);
                grid-template-rows: repeat(3, 1fr);
}

    grid-template-columns控制网格分成多少列，grid-template-rows控制网格分成多少行。

    创建的值都是重复的时候，可以使用repeat

    1fr，代表每个元素等分

  4. 设置子元素样式

    
.item {
                background-color: orange;
    }

    到浏览器查看效果，此时所有子元素都挤到一起了

0001.png

给容器添加一个css属性就可以解决

.container {
                    width: 800px;
                    height: 600px;
                    display: grid;
                    grid-template-columns: repeat(4, 1fr);
                    grid-template-rows: repeat(3, 1fr);
                    grid-gap: 5px;
                }

grid-gap 控制网格元素之间的间隙

此时再到浏览器查看效果，网格布局出来了

0002.png

  1. 设置栅格布局

    让第二个子元素占据两行两列，设置css样式

    
.item:nth-child(1) {
                grid-row: 1/3;
                grid-column: 2/4;
                background-color: pink;
            }

    grid-row：子元素从第几行开始，到第几行结束

    grid-column：子元素从第几列开始，到第几列结束

    到浏览器查看效果

0003.png

#### 小结

至此，栅格布局已经完成，主要是用到grid布局完成
avatar
文章
阅读
粉丝