2019下半年，該用用grid網格佈局了！

時間 2019-11-05

標籤下半年用用 grid 網格佈局简体版

原文原文鏈接

前言

如今咱們你們在實際的開發中，可能用的最多的就是flex佈局，固然還有浮動和定位，除此以外，這兩年一直聽到網格佈局是趨勢，即grid佈局，可是項目中沒有太多的應用，因此特此總結一下，但願對你們也對我本身有幫助。css

給你們一個直接的效果體驗一下： html

網格佈局：就是一個容器內部由一個個的項目組成，是一個二維佈局，接下來，咱們就會圍繞容器和項目來介紹網格佈局，

容器相關屬性

grid | inline-grid

display: grid;

display: inline-grid; 說明：類比於block於inline-block的區別，grid和inline-grid的區別也同樣，後者能夠和其餘行內元素同時放在同一行上顯示。

grid-template-rows | grid-template-columns

grid-template-rows: 設置行高

grid-template-columns：設置列寬

以上三個屬性值能夠是不少方式：瀏覽器

固定值： 50px等
repeat，以及auto-fill
fr關鍵字
auto關鍵字
minmax()函數

咱們來試試上面的5中形式：bash

首先，html內容都是以下：wordpress

//html
<div class="container">
    <div class="item">1</div>
    <div class="item">2</div>
    <div class="item">3</div>
    <div class="item">4</div>
    <div class="item">5</div>
    <div class="item">6</div>
    <div class="item">7</div>
    <div class="item">8</div>
    <div class="item">9</div>
</div>

//公共css
.container{
    display: grid;
    grid-gap: 10px 10px;
}
.container .item{
    background: dodgerblue;
}
複製代碼

1. 固定值

//css
.container{
    grid-template-rows: 50px 50px 50px;
    grid-template-columns: 50px 50px 50px;
}
複製代碼

效果以下：函數

2. repeat()函數

從上面的例子，咱們能夠看到若是有重複的固定值，那麼咱們就能夠用repeat函數去代替佈局

//css
.container{
    grid-template-rows: repeat(3, 50px);
    grid-template-columns: repeat(3, 50px);
}
複製代碼

有時，單元格的大小是固定的，可是容器的大小不肯定。若是但願每一行（或每一列）容納儘量多的單元格，這時可使用auto-fill關鍵字表示自動填充。學習

.container{
    grid-template-rows: repeat(3, 50px);
    grid-template-columns: repeat(auto-fill, 50px);
}
複製代碼

效果以下：

其中紅色部分空的，可是是佔據空間的，爲了更生動的看一下效果，咱們右擊打開「檢查」，查看一下element標籤，咱們能夠看到以下效果：

其中淺藍色的單元格都是自動生成的單元格，深藍色的單元格是咱們代碼生成的。

3.fr關鍵字

即fraction的縮寫，意爲"片斷"，用於表示單元格之間的比例關係，

以下效果：

代碼以下：

.container{
    width: 200px;
    grid-template-rows: repeat(3, 50px);
    grid-template-columns: 1fr 2fr 1fr;
}
複製代碼

此時，咱們設置了容器總寬度爲200px, 而後按1:2:1的比例來分配，即中間的單元格爲100px，兩邊爲50px

4. auto關鍵字

咱們來實現一個常見的三欄佈局，即左右各200px,中間撐滿剩餘寬度。

代碼以下：

.container{
    grid-template-rows: repeat(3, 50px);
    grid-template-columns: 200px auto 200px;
}
複製代碼

即auto對應的單元格會自動盛滿剩餘寬度

5. minmax()函數

顧名思義，設置一個範圍，最大值和最小值

.container{
    grid-template-rows: repeat(3, 50px);
    grid-template-columns: 50px 50px minmax(50px, 100px);
}
複製代碼

咱們來看一下效果：

這個時候是按最大列寬顯示的，爲何呢？這是由於此時咱們的容器沒有設置寬度，默認爲auto，因此會按最大值去渲染，可是，咱們若是設置容器寬度小於150px呢？（由於總共3列，前兩列都是50px，第三列最小也是50px）

.container{
    grid-template-rows: repeat(3, 50px);
    grid-template-columns: 50px 50px minmax(50px, 100px);
    width: 140px;
}
複製代碼

效果以下：

其中黃色部分就是多出來的，由於容器寬度爲140px，前兩列爲50px, 第三列最小也是50px，再加上列間距，因此總體單元格寬度就超出了140px，若是不想超出，本身能夠試着加一個overflow：hidden試試看另外的效果：

以上，咱們說了grid-template-rows，以及grid-template-columns常見屬性值的形式，而且這些形式是能夠相互在一塊兒使用。

grid-template-areas

該屬性用來設置區域，咱們經過上面咱們知道，一個容器由一個個單元格（或者叫項目）組成，咱們想要對這些單元格再作進一步的劃分，不一樣的一個或多個單元格組成一個區域，這樣就造成了：容器>區域>單元格 的基本形式。

代碼以下：

//html
<div class="container">
    <div class="item item-a">a</div>
    <div class="item item-b">b</div>
    <div class="item item-c">c</div>
    <div class="item item-d">d</div>
</div>

//css
.container{
        display: grid;
        width: 150px;
        height: 150px;
        grid-template-rows: repeat(3, 1fr);
        grid-template-columns: repeat(3, 1fr);
        grid-template-areas:
                "a a a"
                "b c c"
                "b d d"
    }
    .container .item-a {
        grid-area: a;
        background: dodgerblue;
    }
    .container .item-b {
        grid-area: b;
        background: green;
    }
    .container .item-c {
        grid-area: c;
        background: yellow;
    }
    .container .item-d {
        grid-area: d;
        background: red;
    }
複製代碼

實現的效果以下：

咱們來分析一下grid-template-areas的做用是什麼？很顯然，它能夠將單元格分類，不一樣的類表示不一樣的區域，同時，本來3x3的網格佈局，須要指定9個單元格標籤，而如今咱們只須要四個標籤，而後每一個標籤經過grid-area設置區域名，最後每一個區域在哪裏，怎麼佈局，是經過grid-tempate-areas去生成。

即：經過grid-area爲指定標籤設置區域名，而後經過grid-template-areas設置區域怎麼排版和顯示

注意：咱們設置的網格區域必定要造成規整的矩形區域，什麼L形，凹的或凸的形狀都是不支持的，會認爲是無效的屬性值。

經過前面介紹，咱們分別學習了：grid-template-rows grid-template-columns grid-template-areas, 固然這三個屬性也能夠合成一個屬性，即grid-template

grid-row-gap | grid-column-gap | grid-gap

grid-row-gap: 設置行間距

grid-column-gap：設置列間距

grid-gap:

這三個屬性比較簡單，很少說，在文章剛開始公共css文件中，咱們也設置了間距，以前的效果圖也都有間隔的。

justify-items | align-items | place-items

用於設置網格元素(或者說是每一個單元格的內容)在水平和垂直方向的上中下左右對齊，仍是拉伸。

justify-items: start | end | center | stretch

align-items:start | end | center | stretch

place-items: |

咱們來看一個例子：

.container {
    justify-items: stretch; //默認值
    align-items: stretch; // 默認值
 }
複製代碼

效果以下：

再來看看其餘值：

.container {
    justify-items: start;
    align-items: end; 
 }
複製代碼

效果以下：

再看看居中的效果：

.container {
    justify-items: center;
    align-items: center; 
 }
複製代碼

justify-content | align-content | place-content

justify-content: stretch | start | end | center | space-between | space-around | space-evenly;

align-content: stretch | start | end | center | space-between | space-around | space-evenly;

place-content: 合併寫法

首先，咱們來看看默認的效果：

.container {
    justify-content: start; 
    align-content: start;    
}
複製代碼

效果以下：

再看看居中的效果：

.container {
    justify-content: center; 
}
複製代碼

效果以下：

一樣，若是是：justify-content: end；則靠右顯示。

再來看看space-around:

.container {
    justify-content: space-around; 
}
複製代碼

效果以下：

繼續看：space-evenly

.container {
    justify-content: space-evenly;
}
複製代碼

效果以下：

注意：此處仔細觀看space-around和space-evenly的區別，前者是保證每一列的左右間距相同，這樣的話，好比第二列的左間距和第一列的右間距加起來就是兩倍的距離了，可是space-evenly只是純粹的控制列之間的間距等分。

最後，咱們看一下：space-between

.container {
    justify-content: space-between;
}
複製代碼

效果以下：

上面這幾個屬性和flex佈局裏面的屬性都比較相似，你們能夠試着對比去看看效果。

grid-auto-rows | grid-auto-columns | grid-auto-flow

有時候，一些項目的指定位置，在現有網格的外部。好比網格只有3列，可是某一個項目指定在第5行。這時，瀏覽器會自動生成多餘的網格，以便放置項目。

例如：一個3x3的網格以下：

咱們但願把第三個項目放到第四行和第三列，怎麼處理？

.container .item:nth-child(3){
    grid-row-start: 4;
    grid-row-end: 5;
    grid-column: 3/4; //是grid-column-start和grid-column-end的縮寫
    background: red;
}
複製代碼

效果以下：

此時，咱們看到第三個項目，放到第四行第三列之後，高度變成自動包裹內容，怎麼設置這個單獨放出來的項目的樣式呢？grid-auto-rows 和grid-auto-columns

.container {
    grid-auto-rows: 100px;
}
.container .item:nth-child(3){
    grid-row-start: 4;
    grid-row-end: 5;
    grid-column: 3/4; //是grid-column-start和grid-column-end的縮寫
    background: red;
}

//注意：此處的grid-row-start grid-column-start grid-column都是項目的屬性，用於設置項目在水平和垂直方向上的起始網格線和網格線，即項目的位置處於哪一行，那一列。 下面咱們會詳細介紹
複製代碼

效果以下：

最後，咱們看一下容器的最後一個屬性：grid-auto-flow ，用來設置項目的排列方向，默認是水平方向，也能夠是垂直方向

.container {
    grid-auto-flow: row//默認值
}
複製代碼

改爲垂直方向：

.container {
    grid-auto-flow: column
}
複製代碼

效果以下：

項目相關屬性

grid-column-start：左邊框所在的垂直網格線

grid-column-end：右邊框所在的垂直網格線

grid-row-start：上邊框所在的水平網格線

grid-row-end：下邊框所在的水平網格線

grid-row | grid-column：縮寫

grid-area: 設置項目的區域名

例如：實現以下效果：

.container{
    display: grid;
    grid-template-rows: repeat(4, 50px);
    grid-template-columns: repeat(4, 50px);
    grid-gap: 10px 10px;
    grid-auto-rows: 50px;
}
.container .item:nth-child(5){
    grid-row: 2/4;
    grid-column: 2/4;
}

複製代碼

經過這些屬性，能夠控制項目的位置，以及大小，能夠實現相似合併單元格的效果哦。

接着上面的例子，實現以下效果：

看到這個效果，可能就想到了justify-items 和align-items 設置爲center不就能夠啦，

沒錯，可是justify-items和align-items是容器的屬性，是對全部的項目有效的，若是咱們只是想把某一個單元格設置怎麼作？

.container .item:nth-child(5){
    justify-self: center;
    align-self: center;
}
複製代碼

同理，也能夠縮寫：place-self: center center;

至此，grid佈局相關屬性就介紹完了，相關屬性比較多，也容易混淆，更多仍是要在咱們項目去實踐使用，固然前提是對兼容性要求不高。

下面是在學習過程當中參考的一些網站：

前端將來頁面佈局發展方向是 Flexbox 仍是 Grid ? www.zhihu.com/question/28…
張鑫旭： www.zhangxinxu.com/wordpress/2…
阮一峯：www.ruanyifeng.com/blog/2019/0…
flex vs grid: blog.csdn.net/iac743nj0b/…

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。

2019下半年，該用用grid網格佈局了！

前言

目錄

容器相關屬性

grid | inline-grid

grid-template-rows | grid-template-columns

1. 固定值

2. repeat()函數

3.fr關鍵字

4. auto關鍵字

5. minmax()函數

grid-template-areas

grid-row-gap | grid-column-gap | grid-gap

justify-items | align-items | place-items

justify-content | align-content | place-content

grid-auto-rows | grid-auto-columns | grid-auto-flow

項目相關屬性