Grid 布局

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實戰

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

結束語