Grid的由來

CSS一直用來布局網(wǎng)頁，但一直都不完美狞洋。 一開始我們使用table 做布局弯淘，然后轉(zhuǎn)向浮動(dòng)、定位以及inline-block吉懊，但所有這些方法本質(zhì)上都是 Hack 的方式耳胎，并且遺漏了很多重要的功能（例如垂直居中）惯吕。 Flexbox的出現(xiàn)在一定程度上解決了這個(gè)問題，但是它的目的是為了更簡單的一維布局怕午，而不是復(fù)雜的二維布局（Flexbox和Grid實(shí)際上一起工作得很好）废登。 只要我們一直在制作網(wǎng)站，我們就一直在為解決布局問題不斷探索郁惜， 而Grid是第一個(gè)專門為解決布局問題而生的CSS模塊堡距。

Gird簡介和基本概念

• grid布局又稱CSS網(wǎng)格布局，（又名“網(wǎng)格”）是一個(gè)二維的基于網(wǎng)格的布局系統(tǒng)兆蕉，其目的只在于完全改變我們?cè)O(shè)計(jì)基于網(wǎng)格的用戶界面的方式羽戒。
• grid中的一些概念
  • 網(wǎng)格容器（Grid Container）元素應(yīng)用display:grid，它是其所有網(wǎng)格項(xiàng)的父元素虎韵。
  • 網(wǎng)格項(xiàng)（Grid Item）網(wǎng)格容器的直接子元素
  • 網(wǎng)格線（Grid Line）組成網(wǎng)格線的分界線易稠。它們可以是列網(wǎng)格線（column grid lines），也可以是行網(wǎng)格線（row grid lines）并居于行或列的任意一側(cè)
  • 網(wǎng)格軌道（Grid Track）兩個(gè)相鄰的網(wǎng)格線之間為網(wǎng)格軌道包蓝。
  • 網(wǎng)格單元（Grid Cell）兩個(gè)相鄰的列網(wǎng)格線和兩個(gè)相鄰的行網(wǎng)格線組成的是網(wǎng)格單元驶社，它是最小的網(wǎng)格單元。
  • 網(wǎng)格區(qū)（Grid Area）網(wǎng)格區(qū)是由任意數(shù)量網(wǎng)格單元組成
• grid目前兼容性目前還可以测萎，主流瀏覽器對(duì)它的支持力度很大亡电，ie9,10宣布它未來不久會(huì)對(duì)它有很好的支持，目前則需要使用過時(shí)的語法硅瞧。我相信不久的將來grid將成為每一個(gè)前端工作人員必備的布局技能份乒。

屬性介紹

父元素上的屬性

設(shè)置grid布局

display:grid | inline-grid |  subgrid;

設(shè)置網(wǎng)格的列數(shù)與行數(shù)

1. grid-template-columns 它表示的是設(shè)置列數(shù)

grid-template-columns:100px 10% 1fr 2fr; /*寫幾個(gè)值表示有幾列   值可以是px這種固定大小的枣接，也可以是百分比颂暇，也可以使用fr這種單位；fr表示總空間減去固定空間和百分比的大小月腋，然后再分配*/
grid-template-columns: [c1] 200px [c2] 200px [c3] 1fr [c4];/*這里的[]是在給網(wǎng)格線起名字蟀架，每個(gè)網(wǎng)格線可以有多個(gè)名字，用空格隔開就OK榆骚，在后面會(huì)說到網(wǎng)格線名字的作用*/
grid-template-columns:repeat(12 1fr);    /*這個(gè)repeat是重復(fù)的意思片拍，也就是我們創(chuàng)建了12個(gè)大小相等的列*/
grid-template-columns: repeat(auto-fit, 100px);    /*auto-fit 自適應(yīng)的意思，也就是說盡可能的每塊100px填滿網(wǎng)格容器*/
grid-template-columns: repeat(auto-fit, minmax(100px, 1fr));/*上面的這種repeat(auto-fit, 100px)在響應(yīng)式布局中可能因?yàn)椴坏?00像素然后產(chǎn)生留白妓肢，所以我們用minmax()來解決捌省，我們用minmax(100px, 1fr)來代替100px   minmax() 函數(shù)定義大于或等于 min 且小于或等于 max 的大小范圍*/

2. grid-template-rows 與grid-template-columns的使用方法相同 設(shè)置網(wǎng)格項(xiàng)的行數(shù)

grid-template-rows:100px 10% 1fr 2fr; /*寫幾個(gè)值表示有幾行   值可以是px這種固定大小的，也可以是百分比碉钠，也可以使用fr這種單位纲缓；fr表示總空間減去固定空間和百分比的大小卷拘，然后再分配*/

通過網(wǎng)格單元的名字來布局 grid-template-areas

使用這個(gè)屬性的時(shí)候，需要先用子元素上的grid-area屬性給子元素起一個(gè)名字祝高，然后再配合這個(gè)屬性來時(shí)使用

.box{
            background-color: #999;
            display: grid;
            grid-template-columns: 100px 80% 1fr 1fr;
          grid-template-rows: 200px 300px 300px;
          grid-template-areas: "header header header ."
                               "main main . sidebar"
                               "footer footer footer footer"
            /*名字便是元素的名字栗弟，點(diǎn)(.)代表的意思是空一格，這個(gè)單元格中不放內(nèi)容*/
}
.a{
            grid-area:header;
            /*grid-area:;   是給子元素起一個(gè)名字*/
            background-color: red;
}
.b{
            grid-area:main;
            background: blue;
}
.c{
            grid-area:sidebar;
            background: pink;
}
.d{
       grid-area:footer;
       background: black;
}
<div class="box">
        <div class="a">
            頭部
        </div>
        <div class="b">
            主題
        </div>
        <div class="c">
            側(cè)邊欄
        </div>
        <div class="d">
            底部
        </div>
</div>

設(shè)置網(wǎng)格軌道的大小

• grid-column-gap和grid-row-gap 用來指定橫豎網(wǎng)格軌道的大小 只在兩個(gè)單元格之間產(chǎn)生間距工闺，不再邊緣產(chǎn)生
• grid-gap grid-column-gap和grid-row-gap這兩個(gè)屬性的縮寫方式

.box{
    grid-row-gap:10px;
    grid-column-gap:20px;
}
.box{
    grid-gap:10px 20px;
    /* grid-gap: grid-row-gap grid-column-gap; */
}

justify-items 網(wǎng)格中所有單元格中的內(nèi)容在網(wǎng)格項(xiàng)X軸的對(duì)齊方式 默認(rèn)是占滿寬度整個(gè)X軸

align-items 網(wǎng)格中所有單元格中的內(nèi)容在網(wǎng)格項(xiàng)Y軸的對(duì)齊方式 默認(rèn)是占滿寬度整個(gè)Y軸 它的值與justify-items相同

justify-content 如果我們使用PX這種固定大小的布局方式的時(shí)候乍赫，網(wǎng)格的大小可能小于網(wǎng)格容器的大小

這個(gè)值是用來設(shè)置整個(gè)網(wǎng)格在網(wǎng)格容器中的X軸的排列方式

align-content 如果我們使用PX這種固定大小的布局方式的時(shí)候陆蟆，網(wǎng)格的大小可能小于網(wǎng)格容器的大小

這個(gè)值是用來設(shè)置整個(gè)網(wǎng)格在網(wǎng)格容器中的Y軸的排列方式

grid-auto-columns和grid-auto-rows 設(shè)定隱藏的網(wǎng)格軌道的大小

自動(dòng)生成隱式網(wǎng)格軌道（列和行），當(dāng)你定位的網(wǎng)格項(xiàng)超出網(wǎng)格容器范圍時(shí)叠殷，將自動(dòng)創(chuàng)建隱式網(wǎng)格軌道改鲫。網(wǎng)格軌道大小,可以是固定值，百分比或者是分?jǐn)?shù)（fr單位）林束。

grid-auto-flow 在布局是時(shí)候像棘，選擇網(wǎng)格填充的方法

在沒有設(shè)置網(wǎng)格項(xiàng)的位置時(shí)，這個(gè)屬性控制網(wǎng)格項(xiàng)怎樣排列诊县。

grid的簡寫方式和屬性的順序,設(shè)置網(wǎng)格容器所有屬性讲弄。

grid: none | grid-template-rows / grid-template-columns | grid-auto-flow [grid-auto-rows [ / grid-auto-columns] ];

設(shè)置子元素上的屬性

grid-area 給單個(gè)子元素起名字

這個(gè)屬性就是配合父元素上的grid-template-areas屬性來使用措左，grid-area就是給單個(gè)網(wǎng)格項(xiàng)起個(gè)名字

設(shè)置網(wǎng)格項(xiàng)位置的三種寫法

1. grid-column-start grid-column-end grid-row-start grid-row-end

從左到右的四個(gè)屬性的含義：  
            哪跟豎線開始
            哪跟豎線結(jié)束
            哪跟橫線開始
            哪跟橫線結(jié)束
值寫數(shù)字表示第幾跟網(wǎng)格線       也可以寫網(wǎng)格線的名字

2. grid-column grid-row

grid-column: 1 / 2;
grid-row: 1 / 2;

3. grid-area grid-column和grid-row的縮寫

grid-area: 1/1/2/2;
/*第三種寫法  行起始位置/列起始位置/行結(jié)束位置/列結(jié)束位置*/

設(shè)置單個(gè)子元素在其所在的網(wǎng)格項(xiàng)中的排列方式

1. justify-self 用來設(shè)置單個(gè)元素在單個(gè)網(wǎng)格項(xiàng)中X軸的布局

2. align-self 與justify-self:;類似依痊，用來設(shè)置單個(gè)元素在單個(gè)網(wǎng)格中Y軸的布局方式，和justify-self有4個(gè)相同的值