携手创作，共同成长！这是我参与「掘金日新计划 · 8 月更文挑战」的第15天，点击查看活动详情

Grid布局是css解决布局的方案之一。有人说flex是现在布局界的巅峰，弹性布局之下确实好处多多，但出现更早的Grid也并不乏亮点。今天，我将Grid拿来讲讲，并且说说在什么场景下，更好用。

Grid的说明

谈到布局，就一定要把flex拿出来比较下。Grid相比flex而言，更加精确的阐述了行列的概念。它也很好的解决了横平竖直的布局，而flex则只对于其中的某一行或者某一列自适应。也就是用于表格布局的情况下，Grid会更胜一重。 因此，Grid布局下，上下行元素对齐更加容易，而flex则容易依据元素本身造成参差不齐的情况。

Grid学习

知道了它的好处，那就有了学习的动力。这里也同flex一样，要先了解容器和项目。容器是指最外层包裹目标元素的dom---可以想象成Excel中的整个表，而项目则是每个表格中的格子。设置方法也很简单：display：grid或者display：inline-grid就设置好了表。而表的行列数则是通过grid-template-rows、grid-template-columns设置，grid-template-rows的值理论上可以是无限个，类型上有none、flex、percentage、length等等，这里感觉用的最多就是百分比、数值。grid-template-columns的使用与rows的相似，就不一一说明。有了表、行列外，我们还需要gap，因此就有了grid-gap、grid-row-gap、grid-column-gap。这里要注意的是grid-gap是另外两个的缩写，可描述成为两个值，分别对应row、column。例如：grid-gap: 8px 6px; 等价于，分别设置grid-row-gap：8px;grid-column-gap: 6px;
越是强大，属性也就越多。这里还必须要介绍grid-template-areas、grid-area，他们下是一定要成对出现的，前者是表达了表要分为哪几个区，后面的则说明了每个区对应的名字是什么。这里下面会通过代码，向大家展示。 除了以上的，还有grid-auto-flow、rid-row-end、grid-column-start、justify-items、place-items等很多属性，未来几天我用在整理一篇，到时候再详细说明。

Grid实战

使用Grid实现三栏式布局

<section class="grid-three-columns-layout">
    <article class="container">
        <div class="left"></div>
        <div class="center">
            我是用grid实现的三栏布局
        </div>
        <div class="right"></div>
    </article>
</section>
<style>
    .grid-contain {
        display: grid;
        grid-template-rows: 120px;
        grid-template-columns: 20px auto 30px;
        margin-top: 20px;
        width: 100%;
    }

    .container .left {
        background-color: red;
    }

    .container .center {
        background-color: blue;
    }

    .container .right {
        background-color: green;
    }
</style>

结束语

grid看着简单，但在写本文过程中，发现grid要熟练掌握要求大家学习的属性，还是很多的。为了避免大家学习疲劳，决定拆成多篇去说明。希望大家关注点赞评论啊，否则下一篇可能就错过了啊。

工作就像怀孕，当工作太多，肚子太大，想要不加班干完，想要顺利的生下来，简直就和难产一样。