grid布局是一個二維的基于網(wǎng)格的布局系統(tǒng)挠将，這是個非常強(qiáng)大的css模塊胳岂，然而有個令人傷心的話題就是兼容性問題，一個兼容性否定了他的推廣舔稀，然而乳丰，這并不影響我們的學(xué)習(xí)，因?yàn)槟谥皇菚r間問題产园。
兼容性可以看這個網(wǎng)站
can i use

image.png

話不多說，開始學(xué)習(xí)吧
先創(chuàng)建一個html文件

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

然后開始我們最基礎(chǔ)的兩個性質(zhì)

grid-template-columns

     .container {
        display: grid;
        height: 100px;
        grid-template-columns: 20px auto 20px;
        border: 1px solid;
    }
    .item {
        border: 1px solid;
    }
    .is-one {
        background: rebeccapurple;
    }

image.png

從最基本的我們可以看出夜郁，其實(shí)這個grid跟flexbox挺像的什燕，是在父元素設(shè)置子元素的排列方式，然后子元素就會有統(tǒng)一的布局竞端，如果子元素再有一些不一樣的布局屎即，也可以自己改。
另外事富，有沒有瞬間又覺得很方便了技俐，做兩欄布局三欄布局甚至四欄五欄六欄都是so easy 的事情了呀。什么自適應(yīng)都是so easy啦

grid-template-rows

就把上面的grid-template-columns屬性換個屬性名统台。

image.png

grid-template-areas

• 通過引用 grid-area屬性指定的網(wǎng)格區(qū)域的名稱來定義網(wǎng)格模板雕擂。

• 重復(fù)網(wǎng)格區(qū)域的名稱導(dǎo)致內(nèi)容擴(kuò)展到這些單元格。

• 點(diǎn)號表示一個空單元格贱勃。 語法本身提供了網(wǎng)格結(jié)構(gòu)的可視化

  <style>
    .container {
        display: grid;
        height: 200px;
        grid-template-columns: 50px auto 50px;
        grid-template-rows: 10% auto 10%;
        grid-template-areas: 
        "header header header"
        "content content sidebar"
        "footer footer footer";
        border: 1px solid;
    }
    .item {
        border: 1px solid;
    }
    .is-header {
        grid-area: header;
        background: #CAA5EE;
    }
    .is-content {
        grid-area: content;
        background: #a395ba;
    }
    .is-sidebar {
        grid-area: sidebar;
        background: yellow;
    }
    .is-footer {
        grid-area: footer;
        background: #CAA5EE;
    }
    </style>
    <div class="container">
        <div class="item is-header"></div>
        <div class="item is-content"></div>
        <div class="item is-sidebar"></div>
        <div class="item is-footer"></div>
    </div>
  

image.png

image.png

grid-column-gap / grid-row-gap

行或者列的空隙
先來效果圖族展！

image.png

在上一個例子的基礎(chǔ)上，增加這兩條嘻嘻拔鹰。

image.png

上面講的都是網(wǎng)格怎么怎么排列的，接下來我們要講網(wǎng)格內(nèi)容物的排列方式啦

justify-items

image.png

• start: 內(nèi)容與網(wǎng)格區(qū)域的左端對齊
• end: 內(nèi)容與網(wǎng)格區(qū)域的右端對齊
• center: 內(nèi)容位于網(wǎng)格區(qū)域的中間位置
• stretch: 內(nèi)容寬度占據(jù)整個網(wǎng)格區(qū)域空間(這是默認(rèn)值)
  看到最后這一個是不是跟我說的好像不一樣拴还！這是因?yàn)槲覀兊那疤岵灰粯印?/li>

align-items

既然有水平方向，怎么可以沒有垂直方向呢欧聘！

image.png

看這樣片林，是不是就跑上去了！這里我只設(shè)置item的高度怀骤，沒有設(shè)置寬度费封，所以寬度是stretch啦，跟上面說的占據(jù)這個網(wǎng)格空間是一致的蒋伦。

• start: 內(nèi)容與網(wǎng)格區(qū)域的頂端對齊
• end: 內(nèi)容與網(wǎng)格區(qū)域的底部對齊
• center: 內(nèi)容位于網(wǎng)格區(qū)域的垂直中心位置
• stretch: 內(nèi)容高度占據(jù)整個網(wǎng)格區(qū)域空間(這是默認(rèn)值)

好的弓摘，今天就講到這里拉，這是最基礎(chǔ)的部分痕届，接下來還有稍微復(fù)雜一些的操作就等到下次再說吧