最近挺忙的，準備考試，還有其他的事，沒時間研究東西，快周末了，難得學點東西，grid是之前看到的，很好奇，講的二維的佈局，看起來很方便，應該很適合移動端佈局，所以今天抽時間學一學，這個當是筆記了。參考的是阮老師的博客和HTML中文網的文章。 阮一峰：CSS Grid 網格佈局教程 CSS Grid ...
最近挺忙的，準備考試，還有其他的事，沒時間研究東西，快周末了，難得學點東西，grid是之前看到的，很好奇，講的二維的佈局，看起來很方便，應該很適合移動端佈局，所以今天抽時間學一學，這個當是筆記了。參考的是阮老師的博客和HTML中文網的文章。
阮一峰：CSS Grid 網格佈局教程
http://www.ruanyifeng.com/blog/2019/03/grid-layout-tutorial.html
CSS Grid 佈局示例大全
不系統的解釋了，系統的看阮老師的博客，我再覆述一遍沒屁用，然後再看佈局示例大全，然後就能懂個八九不離十了。但是我途中遇到一些問題，我這篇是總結一下我遇到的問題，順便和flex做一下對比，方便以後回顧。
fr關鍵字：
grid-template-columns:150px 1fr 2fr這個1fr 和 2fr和父容器寬度有關係，1fr 和2fr是會主動填補父容器寬度（類似flex里的basis屬性），保證他們倆的寬度關係為1:2，但是他們和150px沒有關係，150px始終為150px。
佈局實例：
1.父容器中設置兩個項目分別占七三比例
.wrapper {
display: grid;
grid-template-columns: 70% 30%;
}
這個是一維的，只有一行，所以flex也能夠佈局出來。(簡寫啥的看不懂的話可以去看我有一篇flex佈局筆記)
.wrapper{
display: flex;
}
.item1{
flex:70%
}
.item2{
flex:30%
}好像grid方便一點哈，那就接著往下看哈。
2.傳統十二網格佈局
可以直接在容器上定義一個
display: grid;
grid-template-columns: repeat(12, 1fr);就完事了。
flex佈局雖然也是一維的，但是要分別定義容器還有項目
.warpper{
display:flex
}
//前提12個項目的class都為item
.item{
flex:1
}各有千秋吧，但是flex強項就是一維的，grid強項在於二維佈局。我接著看看二維的佈局
控制邊距
flex沒有控制邊距的特殊屬性，都是自動的，如果想要就是加margin.但是grid加了gap屬性，可以column-gap也可以row-gap
指定區域，合併多塊
.container {
display: grid;
grid-template-columns: 100px 100px 100px;
grid-template-rows: 100px 100px 100px;
grid-template-areas: 'a b c'
'd e f'
'g h i';
}上面這個是預設的情況，九個單元格各司其職。誰都不理誰。
但是可以可以將他們更換變成
grid-template-areas: 'a a a'
'b b b'
'c c c';類似，如果將其中一塊變成.的話，那.所屬的區域傻東西都沒有
表示沒有用到該單元格，或者該單元格不屬於任何區域
註意，區域的命名會影響到網格線。每個區域的起始網格線，會自動命名為
區功能變數名稱-start，終止網格線自動命名為區功能變數名稱-end。比如，區功能變數名稱為
header，則起始位置的水平網格線和垂直網格線叫做header-start，終止位置的水平網格線和垂直網格線叫做header-end。
grid-auto-flow
跟flex的flow不一樣，flow是wrap和nowrap還有wrap-reverse。而這個gird-auto-flow可以調整密度。
column dense和row dense可以自動填補豎向和橫向的空白
剩下沒啥東西了，記得東西偏多，感覺和flex差不多，都是比較方便的佈局方式，多了二維操作和指定特殊的塊兒的功能。
項目中應用
在項目中的佈局主要是應用到下麵這樣的類似的效果。
.warpper{
display: grid;
grid-gap: 5px;
grid-template-columns: repeat(12, 1fr);
grid-template-rows: 50px 350px 50px;
grid-template-areas:
"h h h h h h h h h h h h"
"m m c c c c c c c c c c"
"f f f f f f f f f f f f";
}然後再在項目中指定相應的iteam為h,m,c,f
.header {
grid-area: h;
}
.menu {
grid-area: m;
}
.content {
grid-area: c;
}
.footer {
grid-area: f;
}聖杯佈局:
<!DOCTYPE html>
<html>
<head>
<title></title>
</head>
<body>
<div class="grid">
<header>Header</header>
<aside class="siderbar-left">Lefr Sidebar</aside>
<article>Article</article>
<aside class="sidebar-right">Right Sidebar</aside>
<footer>Footer</footer>
</div>
</body>
<style type="text/css">
.grid{
display:grid;
grid-template-rows: repeat(3,100px);
grid-template-columns: 150px auto 150px;
grid-gap:1em;
}
header,
aside,
article,
footer {
background: #eaeaea;
padding: 1em;
}
header,footer{
grid-column: 1/4;
}
</style>
</html>關於span
sapn表示跨越，有些時候可以gird-column:1/span2這樣會讓人感到困惑，我到底是跨越到哪去了，span2就是加兩個，相當於gird-column:1/3，其實占得部分就是1塊兒和2塊兒。
auto-fill的補充
.container {
display: grid;
grid-template-columns: repeat(auto-fill, 100px);
}我自己瞎看，於是乎走進了誤區，因為總覺得這個gird-template-columns明明說設置列，但是為什麼設計出來卻是控制的行，我現在想明白了，就像上面這個例子，因為他要控制的是一個列的寬度，然後配合上auto-fill，我一列設置成100px，然後將這100px寬度的列自動填滿整個行的寬度。直到寫到這裡我的困惑才被揭開，我服了。
關於fr的補充
fr是自動計算剩餘地方的，比如說讓
grid-template-columns:100px repeat(10,1fr)這個解釋一下就是，第一個列的寬度為100px,然後這十個把剩下的父容器寬度（一般grid佈局的父容器都是body元素，所以會根據瀏覽器的寬度進行變化，方便進行響應式佈局，以下父容器如果沒有特殊標註的話一般都指的body元素）平均分了。
這個fr有幾種情況：
- 1fr單獨出現，會把父容器都占滿
- N個1fr出現，這幾個1fr會平均分父容器
- N個1fr，和一個2fr出現，會n+2的平均分，然後給1fr的一份，給2fr的兩份。其他比例同理
自認為的難點
grid-template-columns: repeat(auto-fill, minmax(200px, 1fr) )
這個破玩意困擾我很久，repeat的意思是前面是個數，後面是寬度，表示一種快速方便的寫法。auto-fill是用列給這一行自動添加滿元素，minmax是控制這個列的寬度最小為200px，最大為1fr。fr是上面講過的。
可是最大為1fr ，1fr不是占滿整個父容器寬度嗎？，既然占滿也就沒有auto-fill的事兒了，一行一個不就完事了嗎？
我開始陷入了這個誤區好久，後來寫了寫demo才發現我的誤區在於盲目的認為1fr會占整個寬度，但卻忽略了幾個1fr同時存在會平分的關係。也就是說，在父容器變化寬度的同時，我們的列會自動添加進來，比如說由399px變到了400px(現實情況一般會比400px大，因為預設會有邊距)那麼我們就會出現第二個列加入到同一行。但是在400px到600px這之間，我們列的最小寬度是200px，所以不會有新的列加入。那麼剩下的寬度就會空著嗎？
答案顯然是不是的，因為我們設置了列的寬度，寬度為minmax這個範圍，200px到1fr，1fr這時候的作用便顯示出來了，因為比如說現在父容器寬度為500px,現在兩個列存在這一行，都是1fr，所以這兩個會把500px平均分，變成250px。
