grid佈局解析及實例實現

在學習gird佈局使用阮一峯的教程進行學習，並實現下里面的佈局

阮一峯grid佈局學習網址：http://www.ruanyifeng.com/blog/2019/03/grid-layout-tutorial.html

實現案例：

html代碼如下：

<div class="grid">
        <div class="left">
            <div class="lt" style="background-color: #b03531">1</div>
            <div class="lb">
                <div style="background-color: #30997b">3</div>
                <div style="background-color: #da6f2b">5</div>
            </div>
        </div>
        <div class="right">
            <div style="background-color: #33a8a5">2</div>
            <div style="background-color: #6a478f">4</div>
        </div>
    </div>

css代碼：

.grid{
            width: 600px;
            height: 300px;
            margin: 100px auto;
            display: grid;
            grid-template-columns: 2fr 1fr;
            gap: 20px 20px;
            grid-template-rows: 100%;
        }
        .left {
            display: grid;
            grid-template-columns: 1fr;
            grid-row-gap: 20px;
        }
        .lb {
            display: grid;
            grid-template-columns: 1fr 1fr;
            gap: 20px 20px;
        }
        .right {
            display: grid;
            grid-template-columns: 1fr;
            gap: 20px;
            grid-template-rows: 30%;
        }

知識點詳解

grid佈局與flex佈局有一定的相似性，都可以指定容器內部多個項目的位置。

flex佈局是軸線佈局，只能指定“項目”針對軸線的位置，可以看做一維佈局

grid佈局則是將容器劃分成“行”和“列”，產生單元格，然後指定“項目所在”的單元格，可以看作二維佈局。

display: grid 定容器採用網格佈局

display: inline-grid； 指定容器是一個行內元素，內部採用網格佈局。

grid-template-columns： 定義每一列的寬度 （300px 300px）兩列 每列寬度300px 支持百分比，rem等單位

grid-template-rows ： 定義每一行的高度 （300px 200px）第一行高度300培訓 第二行高度200px 支持百分比，rem等單位

備註： 也可以通過repeat()
grid-template-columns: repeat(3, 33.33%);
grid-template-rows: repeat(3, 33.33%);
grid-template-columns: repeat(2, 100px 20px 80px)；
接受兩個參數，第一個參數是重複的次數（上例是3），第二個參數是所要重複的值

fr關鍵詞

爲了方便表示比例關係，網格佈局提供了fr關鍵字（fraction 的縮寫，意爲"片段"）。如果兩列的寬度分別爲1fr和2fr，就表示後者是前者的兩倍

	  	grid-template-columns: 2fr 2fr;	
	  	grid-template-columns： 1fr minmax(minmax());   // minmax(100px, 1fr)表示列寬不小於100px，不大於1fr  

grid-gap 屬性

.container {
  grid-row-gap: 20px;  //設置行間距
  grid-column-gap: 20px; // 設置列間距 
  grid-gap: 20px 20px;  // 綜合寫法 跟padding,margin屬性類似， 第一個表示行間距，第二個表示列間距
  grid-gap: 20px;
}

justify-items屬性 align-items屬性

justify-items屬性設置單元格內容的水平位置（左中右） align-items屬性設置單元格內容的垂直位置（上中下）

justify-items: start | end | center | stretch;
align-items: start | end | center | stretch;	  

start：對齊單元格的起始邊緣。
end：對齊單元格的結束邊緣。
center：單元格內部居中。
stretch：拉伸，佔滿單元格的整個寬度（默認值）。  

justify-content 屬性，align-content 屬性

justify-content屬性是整個內容區域在容器裏面的水平位置（左中右）  
align-content屬性是整個內容區域的垂直位置（上中下）。  

.container {
  justify-content: start | end | center | stretch | space-around | space-between | space-evenly;
  align-content: start | end | center | stretch | space-around | space-between | space-evenly;  
}  

start：對齊容器的起始邊框。
end：對齊容器的結束邊框。
center：容器內部居中。
stretch：項目大小沒有指定時，拉伸佔據整個網格容器。
項目大小沒有指定時，拉伸佔據整個網格容器  
space-around - 每個項目兩側的間隔相等。所以，項目之間的間隔比項目與容器邊框的間隔大一倍  
space-between - 項目與項目的間隔相等，項目與容器邊框之間沒有間隔。 
space-evenly - 項目與項目的間隔相等，項目與容器邊框之間也是同樣長度的間隔  

place-content屬性是align-content屬性和justify-content屬性的合併簡寫形式。

place-content: <align-content> <justify-content>  

grid兼容性