css grid layout 初步認識
近期在在回顧css的時候，重新學習了一下css的相關(guān)布局。
根據(jù)之前常用的布局包括
固定尺寸
布局可以從固定尺寸先了解，先構(gòu)思好頁面的主要結(jié)構(gòu)，然后設定頁面的整體大小，在頁面的整體中劃分小的模塊進行尺寸的固定，直到整個頁面布局完成。
自適應尺寸
響應式的布局的結(jié)構(gòu)其實就是多個固定尺寸的組合，元素的寬度，字體的大小一般會以百分比的形式設置，通過媒體查詢進行不同分辨率下的布局，
彈性盒子flex布局
彈性盒子，用來為盒子模型提供最大的靈活性，任何一個容器都可以指定為flex布局。具體訪問
https://www.runoob.com/w3cnote/flex-grammar.html
https://blog.csdn.net/naruto_luoluo/article/details/51279761
雖然css grid layout 在之前自己只是聽說，然而自己沒有實際用過，因為之前瀏覽器的支持程度比較低，所以就沒有去學習了解，在最近重新回顧css的時候自己在https://caniuse.com/中發(fā)現(xiàn)，css grid layout的支持程度已經(jīng)很高了，于是自己就重新認識了一下。
什么是網(wǎng)格布局？
在web內(nèi)容中，可以將內(nèi)容分隔成多個內(nèi)容塊，每個內(nèi)容塊占據(jù)自己的空間，因此形成了一個網(wǎng)狀的格局，類似我們在用table的時候，將其分為多個行列的單元格，形成了一個二維布局空間。
waht is css grid layout ?
css grid layout 是一個web內(nèi)容的二維布局系統(tǒng)，它可以將你的內(nèi)容按行和列進行劃分，并且直接明確的指定了劃分的某個內(nèi)容塊所處的位置空間。它所包含的基礎屬性名稱有
grid(設定網(wǎng)格) , grid-template-columns(網(wǎng)格列) , grid-template-rows(網(wǎng)格行) ，grid-gap(網(wǎng)格間隙)
對css grid layout進行練習和認識
一,按網(wǎng)格線劃分布局
<div class="wrapper">
<div class="box a">A</div>
<div class="box b">B</div>
<div class="box c">C</div>
<div class="box d">D</div>
<div class="box e">E</div>
<div class="box f">F</div>
</div>
<style>
.wrapper {
display: grid;
grid-template-columns: 100px 10px 100px 10px 100px 10px 100px;
grid-template-rows: auto 10px auto 10px auto;
}
.box {
background-color: #444;
color: #fff;
font-size: 150%;
padding: 20px;
text-align: center;
}
.a{
grid-column: 1 / 6;
grid-row: 1 / 2;
}
.b {
grid-column: 7 / 8;
grid-row: 1 / 6;
background: orange;
}
.c {
grid-column: 1 / 2;
grid-row: 3 / 4;
}
.d {
grid-column: 2 / 6;
grid-row: 3 / 4;
background:red;
}
.e {
grid-column: 5 / 6;
grid-row: 3 / 4;
}
.f {
grid-column: 1 / 4;
grid-row: 5 / 6;
}
</style>
在上面布局中，我們設定 .wrapper{grid-template-columns: 100px 10px 100px 10px 100px 10px 100px;} 這樣就將其分為7列，會有8條列網(wǎng)格線，設定 .wrapper{grid-template-rows: auto 10px auto 10px auto;}將其分為5行，因此形成6條行網(wǎng)格線。
然后設定.a{grid-column: 1 / 6; grid-row: 1 / 2;},讓A塊占據(jù)列網(wǎng)格線1-6，行網(wǎng)格線1-2之間的部分；同樣設定.b{grid-column: 7 / 8; grid-row: 1 / 6;}讓B塊占據(jù)列網(wǎng)格線7-8，行網(wǎng)格線1-6，其他模塊按同樣的方法。注意也可以指定已被其他塊占據(jù)的網(wǎng)格線部分，例如效果圖D塊，.d{grid-column: 2 / 6; grid-row: 3 / 4;} ,這樣就會出現(xiàn)按順序覆蓋的現(xiàn)象因為E塊元素節(jié)點在D的后面，所以E塊遮擋了D塊列5-6網(wǎng)格線之間的部分，也可以根據(jù)自己的需求來設置z-index調(diào)整層級關(guān)系
效果圖IMG20180829_113317.png
二，按fr進行劃分
下班是自己利用css grid和flex進行的一個列表布局，在這個部分中，表頭固定，列表部分如果超出設定高度進行滾動
<div class="frboxauto">
<div class="frbox">
<div class="tabtit">A</div>
<div class="tabtit">B</div>
<div class="tabtit">C</div>
</div>
<ul class="listbox">
<li>
<div class="frboxcon">1</div>
<div class="frboxcon">2</div>
<div class="frboxcon">3</div>
</li>
<li>
<div class="frboxcon">1</div>
<div class="frboxcon">2</div>
<div class="frboxcon">3</div>
</li>
<li>
<div class="frboxcon">1</div>
<div class="frboxcon">2</div>
<div class="frboxcon">3</div>
</li>
</ul>
</div>
<style>
.frboxauto{
width:400px;
margin:20px;
display: flex;
flex-direction:column;
height:100px;
}
.frbox{
display:grid;
grid-template-columns: 1fr 2fr 1fr;
grid-template-rows: auto;
grid-gap:10px;
}
.tabtit{
background:#444;
color:#fff;
text-align: center;
}
.listbox{
flex:1;
list-style-type: none;
padding:0;
margin:0;
overflow-y: auto;
}
li{
width:100%;
display:grid;
grid-template-columns: 1fr 2fr 1fr;
grid-template-rows: auto;
grid-gap:10px;
background-color: #999;
height:35px;
line-height: 35px;
}
.frboxcon{
text-align: center;
}
</style>
如上設置.frbox{grid-template-columns: 1fr 2fr 1fr;},將其按列分為4欄，其中中間塊B占據(jù)2欄，
效果圖
同樣設定 li{ grid-template-columns: 1fr 2fr 1fr;}按和表頭相同的欄數(shù)劃分，這樣便形成了一個簡單的列表布局。
1234.gif
其中fr單位被用于在一系列長度值中分配剩余空間，如果多個已指定了多個部分，則剩下的空間根據(jù)各自的數(shù)字按比例分配。
有關(guān)fr資料可查找
如上是自己個人對css grid layout的初步了解，希望以后再應用中有更多的認識。
相關(guān)參考資料
https://segmentfault.com/a/1190000002437544
https://segmentfault.com/a/1190000002448197
https://developer.mozilla.org/en-US/docs/Learn/CSS/CSS_layout/Grids
