css grid布局
最近在學習css grid布局，為了避免以后忘記了難得查資料，遍寫在博客中方便以后查詢！
1,display屬性
display有三個值，
grid：生成一個塊級網格
inline-grid：生成一個內聯網格
subgrid：如果你的網格容器本身是另一個網格的網格項（即嵌套網格），你可以使用這個屬性來表示，它的行/列的大小繼承自它的父級網格容器，而不是自己指定的。
我們先創建一個grid的網格容器
在html中寫入代碼
<div class="container"> </div>
css中寫入代碼
.container{
display: grid;
}
這樣我們就創建好了一個網格容器，因為grid容器時隱性容器，在我們沒有向容器里面添加元素時，是看不到效果的，grid容器在我們沒有設置大小時，默認寬度為100%，高度為0.
注意：在 網格容器(Grid Container) 上使用column，float，clear，vertical-align不會產生任何效果。
2,grid-template-columns / grid-template-rows
用來定義網格的列和行，即設置幾行幾列。
值
單位為“px”
單位為“fr”
auto
n%
repeat（）
（1）px
我們在container中添加代碼
.container{
display: grid;
grid-template-columns: 100px 100px 100px;
grid-template-rows: 100px 50px 100px;
}
這樣我們就創建了一個三行，三列的網格，寬度分別為100px,100px,100px。高度分別為100px,50px,100px。
但是，我們在瀏覽器中是看不到效果的，我們需要向里面添加元素，才能看到效果。
我們在html中添加以下代碼
<div class="container">
<div>1</div>
<div>2</div>
<div>3</div>
<div>4</div>
<div>5</div>
<div>6</div>
</div>
我們在css中添加代碼放方便查看效果。
.container div{
border: 1px #000 solid;
}
我們就能看到效果了，效果圖為
可以看到我們只有一個3×2的網格，但是我們明明設置的3×3的網格啊。這是因為grid時隱性表格，我們只有六個元素，所以只能填滿六個格子，而剩下的沒有填的我們時看不到的，但是它們還是存在的。當我們沒有設置填充的元素的位置時，默認時從上到下，從左到右按行依次填充，即先填充第一行，填充慢了之后在填充第二行，直到元素被用完為止。
（2）fr
接下來我們將單位“px”改為“fr”，
css中container中修改代碼
.container{
display: grid;
grid-template-columns: 1fr 2fr 1fr;
grid-template-rows: 100px 50px 100px;
}
效果圖為
因為我們總共有4fr，所以將容器的寬度平均分為了4份，一個fr占一份，兩個占兩份，一次類推，因為我們沒有設置容器的寬度，也沒有用px單位設置網格格子的寬度，所以容器默認寬度為100%。
注意：當fr和px共存時，是將px的大小減去之后，在剩余的大小內在均分。
（3）auto
接下來我們再把auto加進去。
css中container中修改代碼
.container{
display: grid;
grid-template-columns: 100px 100px auto 100px;
grid-template-rows: 100px 50px 100px;
}
效果圖為
由圖可知，auto是在其他固定的大小分配之后，剩下的就是它的大小了，如果有兩個或兩個以上的auto，就是每個auto之間平均分配剩下的大小。
（4）n%
至于n%，n時多少就占整個容器的百分之多少。
（5）repeat()
我們修改css中container中的代碼
.container{
display: grid;
grid-template-columns: repeat(3,100px);
grid-template-rows: 100px 50px 100px;
}
上面的代碼等價與下面的代碼
.container{
display: grid;
grid-template-columns: 100px 100px 100px;
grid-template-rows: 100px 50px 100px;
}
這些值放在grid-template-rows中也是一樣的，只是列變行而已，這里就不做演示了。
3,grid-template-areas
指定的 網格區域(Grid Area) 名稱來定義網格模板。重復網格區域的名稱導致內容跨越這些單元格。這個語法本身可視作網格的可視化結構。
值
<grid-area-name>：由網格項的grid-area指定的網格區域名稱
.（點號） ：代表一個空的網格單元
none：不定義網格區域
修改html中的代碼
<div class="container">
<div class="item-a">1</div>
<div class="item-b">2</div>
<div class="item-c">3</div>
<div class="item-d">4</div>
<div class="item-e">5</div>
<div class="item-f">6</div>
</div>
修改css中的代碼
.item-a {grid-area: one;}
.item-b {grid-area: two;}
.item-c {grid-area: three;}
.item-d {grid-area: four;}
.item-e {grid-area: five;}
.item-f {grid-area: six;}
.container {
display: grid;
grid-template-columns: 100px 100px 100px 100px;
grid-template-rows: auto;
grid-template-areas:
"one one one one"
"two two . three"
"four four four four"
"five five six six";
}
.container div{
border: 1px solid #000;
}
效果圖
因為我們不確定有幾行，所以我們設置的是auto，這樣我們就不能設置行高了，子元素的高度是多少它的高度就是多少，但是我們可以設置子元素的高度。就能設置網格的高度了。
所以我們設置子元素高度為100px，對container下的div設置高度
.container div{
height: 100px;
border: 1px solid #000;
}
效果圖為
這樣，我們就設置好了這樣一個網格，第一行區域名稱為“one”，第二行一二列區域名稱為“two”，第二行第四列區域名稱為“three”，第三行區域名稱為“four”，第四行一二列名稱為“five”，第四行三四列名稱為“six”。
4,grid-column-gap / grid-row-gap
指定網格線(grid lines)的大小。即設置列/行之間間距的寬度。
我們修改css中container的代碼
.container {
display: grid;
grid-template-columns: 100px 100px 100px 100px;
grid-template-rows: auto;
grid-template-areas:
"one one one one"
"two two . three"
"four four four four"
"five five six six";
grid-column-gap: 10px;
grid-row-gap: 10px;
}
效果圖為
下面兩段代碼等價，下面的代碼上上面的簡寫。
grid-column-gap: 10px;
grid-row-gap: 10px;
grid-gap: 10px;
5,justify-items /align-items
沿著 行軸線(row axis) 或列軸線（column axis）對齊 網格項(grid items) 內的內容。該值適用于容器內的所有網格項。
值
start：將內容對齊到網格區域(grid area)的左側
end：將內容對齊到網格區域的右側
center：將內容對齊到網格區域的中間（水平居中）
stretch：填滿網格區域寬度（默認值）
修改css中container容器下div的代碼，
.container div{
display: grid;
height: 100px;
border: 1px solid #000;
justify-items: center;
align-items: center;
}
效果圖為
我這里就只嘗試center了。
6,justify-content /align-content
有時，我們的網格合計大小可能小于其 網格容器(grid container) 大小。 比如我們的所有 網格項(grid items) 都使用像px這樣的非靈活單位設置大小，我們又設置了容器的大小。在這種情況下，您可以設置網格容器內的網格的對齊方式。
值
start：將網格對齊到 網格容器(grid container) 的頂部
end：將網格對齊到 網格容器 的底部
center：將網格對齊到 網格容器 的中間（垂直居中）
stretch：調整 網格項(grid items) 的高度，允許該網格填充滿整個 網格容器 的高度
space-around：在每個網格項之間放置一個均勻的空間，上下兩端放置一半的空間
space-between：在每個網格項之間放置一個均勻的空間，上下兩端沒有空間
space-evenly：在每個柵格項目之間放置一個均勻的空間，上下兩端放置一個均勻的空間
為了效果明顯，我們規定一下容器的大小。
css中container中的代碼改為
.container {
display: grid;
width: 800px;
height: 800px;
border: 1px solid red;
grid-template-columns: 100px 100px 100px 100px;
grid-template-rows: auto;
grid-template-areas:
"one one one one"
"two two . three"
"four four four four"
"five five six six";
grid-column-gap: 10px;
grid-row-gap: 10px;
justify-content: start;
align-content: start;
}
效果圖
我們再修改一下值，將整個網格放在容器的中間，修改justify-content和align-content都為center。
css中container中的代碼修改為
.container {
display: grid;
width: 800px;
height: 800px;
border: 1px solid red;
grid-template-columns: 100px 100px 100px 100px;
grid-template-rows: auto;
grid-template-areas:
"one one one one"
"two two . three"
"four four four four"
"five five six six";
grid-column-gap: 10px;
grid-row-gap: 10px;
justify-content: center;
align-content: center;
}
效果圖為
剩下的值自己去實驗把。我們就做到這里了。
7,grid-column-start,grid-column-end,grid-row-start和grid-row-end。
為了方便演示，我們再添加一個容器container1,
html中代碼為
<div class="container">
<div class="item-a">1</div>
<div class="item-b">2</div>
<div class="item-c">3</div>
<div class="item-d">4</div>
<div class="item-e">5</div>
<div class="item-f">6</div>
</div>
<div class="container1">
<div class="item-1">1</div>
<div class="item-2">2</div>
<div class="item-3">3</div>
<div class="item-4">4</div>
<div class="item-5">5</div>
<div class="item-6">6</div>
</div>
css中代碼為
.item-a {grid-area: one;}
.item-b {grid-area: two;}
.item-c {grid-area: three;}
.item-d {grid-area: four;}
.item-e {grid-area: five;}
.item-f {grid-area: six;}
.container {
display: grid;
width: 800px;
height: 800px;
border: 1px solid red;
grid-template-columns: 100px 100px 100px 100px;
grid-template-rows: auto;
grid-template-areas:
"one one one one"
"two two . three"
"four four four four"
"five five six six";
grid-column-gap: 10px;
grid-row-gap: 10px;
justify-content: center;
align-content: center;
}
.container1 {
display: grid;
margin-left: 900px;
margin-top: -800px;
width: 800px;
height: 800px;
border: 1px solid red;
grid-template-columns: 100px 100px 100px 100px;
grid-template-rows: 100px 100px 100px 100px;
grid-column-gap: 10px;
grid-row-gap: 10px;
justify-content: center;
align-content: center;
}
.container div{
display: grid;
height: 100px;
border: 1px solid #000;
justify-items: center;
align-items: center;
}
.container1 div{
display: grid;
height: 100px;
border: 1px solid #000;
justify-items: center;
align-items: center;
}
效果圖為
接下來我們使用grid-column-start,grid-column-end,grid-row-start和grid-row-end將container1樣式改成和container中樣式一樣的。
css中添加代碼
.item-1 {grid-column-start: 1; grid-column-end: 5;}
.item-2 {grid-column-start: 1; grid-column-end: 3;}
.item-3 {grid-column-start: 4; grid-column-end: 5;}
.item-4 {grid-column-start: 1; grid-column-end: 5;}
.item-5 {grid-column-start: 1; grid-column-end: 3;}
.item-6 {grid-column-start: 3; grid-column-end: 5;}
上面代碼的簡寫為
.item-1 {grid-column: 1 / 5;}
.item-2 {grid-column: 1 / 3;}
.item-3 {grid-column: 4 / 5;}
.item-4 {grid-column: 1 / 5;}
.item-5 {grid-column: 1 / 3;}
.item-6 {grid-column: 3 / 5;}
效果圖為
我們就設計出了和container一樣的樣式。
8,grid-auto-columns / grid-auto-rows
指定任何自動生成的網格軌道(grid tracks)（又名隱式網格軌道）的大小。在你明確定位的行或列（通過grid-template-rows/grid-template-columns），超出定義的網格范圍時，隱式網格軌道被創建了。
上面我們創建了一個4×4的網格，那么當我們再container1容器中再添加一個div，并且超出4×4的網格了呢，我們來試一下。
在html中的container和container1中分別添加一個div，設置class分別為item-h和item-7。
container中添加
<div class="item-h">7</div>
container1中添加
<div class="item-7">7</div>
將css中兩個container的 justify-content: center;align-content: center改變
justify-content: start;
align-content: start;
再添加代碼
.item-h {grid-column: 6 / 7;grid-row: 6 / 7;}
.item-7 {grid-column: 6 / 7;grid-row: 6 / 7;}
效果為
我們在css中的container1中添加
grid-auto-columns: 100px;
grid-auto-rows: 100px;
效果圖
我們可以看到超出4×4的網格也別設置了大小，寬100px，高100px。
9,grid-auto-flow
前面我們說了grid在我們沒有設置元素位置時，默認是從上到下，從左到右的按行依次填充，但是這個也是可以設置。
值
row：告訴自動布局算法依次填充每行，根據需要添加新行
column：告訴自動布局算法依次填入每列，根據需要添加新列
dense：告訴自動布局算法在稍后出現較小的網格項時，嘗試填充網格中較早的空缺
設置grid-auto-flow：row;就是默認的排列方式。即按行來排列
設置grid-auto-flow：column;就是按列來排列，即一列一列的排完才開始下一列。
注意：當設置grid-auto-flow：dense;時網格項可能會亂序。
10,justify-self / align-self
沿著 行軸線(row axis)或列軸線（column axis） 對齊 網格項 內的內容。此值適用于單個網格項內的內容。
值
start：將內容對齊到網格區域的左側
end：將內容對齊到網格區域的右側
center：將內容對齊到網格區域的中間（水平居中）
stretch：填充整個網格區域的寬度（這是默認值）
到這里grid也學了一大部分了，剩下的內容我也沒有弄清楚，畢竟我也是一個初學者。
可以參考一些這個網址進行深入了解：http://www.css88.com/archives/8510/comment-page-1
總結
以上是生活随笔為你收集整理的css grid布局的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： GUI登录界面
- 下一篇： Win10更换电脑，又不想重装系统的解决