在學習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兼容性