嘿~ 是時候學學柵格佈局GRID了 佈局入門

概念篇
學完了概念好像沒啥用。今天咱們來使用Grid完成兩個簡單佈局。

聲明容器

display: grid;或display: inline-grid;或display: subgrid;。grid 和 inline-grid 很好理解就是塊級網格及行內塊級網格。subgrid 是用來定義子網格，子網格會繼承父網格的一系列規格。

劃分容器

定義橫、縱網格軌道。此處咱們嘗試定義一個4 * 4的網格。code

<div class="grid">
    <div>1</div>
    <div>2</div>
    <div>3</div>
    <div>4</div>
    <div>5</div>
    <div>6</div>
</div>

.grid {
    display: grid;
    grid-template-columns: 60px 60px 60px 60px;
    grid-template-rows: 60px 60px 60px 60px;
    grid-gap: 5px;
}
.grid > div {
    background: grey;
    /*你們不要被下面的代碼迷惑，只是爲了好看，哈哈*/
    display: flex;
    color: #fff;
    font-size: 150%;
    justify-content: center;
    align-items: center;
}

grid-template-columns

grid-template-columns用來定義網格列的寬度既軌道寬度，代碼表示將容器劃分爲4列，列的寬度都爲60px，寬度能夠隨意的更改。

grid-template-rows

grid-template-rows用來定義網格行的高度，代碼表示將容器劃分4個行。經過以上兩行代碼就實現了4 * 4的網格劃分了。不信，增長几個div數試一下。

grid-gap用來控制網格的間距的，準確地說是用來控制網格區域的間距。

控制項目

到目前爲止，咱們的 css 好像都做用在了容器上，那麼如何來點兒高級的東西呢？code

<div class="grid">
    <div class="item1">1</div>
    <div class="item2">2</div>
    <div class="item3">3</div>
    <div class="item4">4</div>
    <div class="item5">5</div>
    <div class="item6">6</div>
</div>

.grid {
    display: grid;
    grid-template-columns: 60px 60px 60px 60px;
    grid-template-rows: 60px 60px 60px 60px;
    grid-gap: 5px;
}
.grid > div {
    background: grey;
    /*你們不要被下面的代碼迷惑，只是爲了好看，哈哈*/
    display: flex;
    color: #fff;
    font-size: 150%;
    justify-content: center;
    align-items: center;
}
.item1 {
    grid-column-start: 4;
    grid-row-start: 2;
}
.item2 {
    grid-column-start: 1;
    grid-column-end: 4;
    grid-row-start: 1;
    grid-row-end: 3;
}
.item3 {
    grid-column: -1 / -2;
    grid-row: 1 / 2;
}
.item4 {
    grid-column: 1 / span 2;
    grid-row: -1 / -3;
}
.item5 {
    grid-area: -1 / 3 / -3 / 4;
}
.item6 {
    grid-area: -1 / 5 / -3 / 4;
}

咱們在概念篇中討論過，網格線是有編號的一、二、三、4...。要控制網格區域的位置就須要依賴於這這些網格線。下面經過5個例子講解如何經過控制網格線來實現區域的定位及單元格合併。

grid-column-start & grid-row-start

grid-column-start grid-row-start用來控制區域的列開始和行開始的位置，請注意這裏咱們並無給出 grid-column-end和grid-row-end的值，他們的默認值能夠簡單理解爲 start 的值加一。其實這裏有個span的概念。

.item1 {
    grid-column-start: 4;
    grid-row-start: 2;
}

grid-column-end& grid-row-end

有開始確定就有結束，grid-column-end，grid-row-end是用來控制區域結束位置。這裏有個知識點須要你們記住，✍️end 的值是能夠小余 start 的值的，不信你試試。還有grid-column-start、grid-column-end、grid-row-start、grid-row-end 的值均可以取負數的，負數意味着從後往前數✍️。

.item2 {
    grid-column-start: 1;
    grid-column-end: 4;
    grid-row-start: 1;
    grid-row-end: 3;
}

grid-column & grid-row

grid 的相關屬性這麼多，確定會有簡寫。grid-column是grid-column-start 和grid-column-end的簡寫。grid-row同理。

.item3 {
    grid-column: -1 / -2;
    grid-row: 1 / 2;
}
// 等價於
.item3 {
    grid-column-start: -1;
    grid-column-end: -2;
    grid-row-start: 1;
    grid-row-end: 2;
}

span

span表示橫跨幾個單元格。功能就是當你你不肯意一直數數時，就可使用span。下面向你們展現區域定義的4種寫法。

.item4 {
    /* 1 */
    grid-column: 1 / span 2;

    /* 2 */
    grid-column: span 2 / 3;

    /* 3 */
    grid-column-start: 1;
    grid-column-end: span 2;

    /* 4 */
    grid-column-start: span 2;
    grid-column-end: 3;
    /*row 也同樣的*/
    grid-row: -1 / -3;
}

grid-area

grid-area是grid-row和grid-column的簡寫。順序是grid-row-start，grid-column-start，grid-row-end，grid-column-end。

.item5 {
    grid-area: -1 / 3 / -3 / 4;
}
// 等同於
.item {
    grid-row-start: -1;
    grid-row-end: -3;
    grid-column-start: 3;
    grid-column-end: 4;
}

此處留一個思考題：grid-area 裏面可使用 span 嗎？?

總結

本文但願你們能夠掌握定義容器和軌道的方法和劃分網格區域的n種寫法。

推薦你們到cssgridgarden上練習一下，加深對 grid屬性的記憶。grid概念理解完以後就是考驗你們的記憶功力了。

姊妹篇 深刻理解佈局神器 flexbox

歡迎你們指正批評、或留言。QQ羣：538631558