Grid網格布局

概述：Grid將容器劃分為一個個網格，通過任意組合不同的網格，做出你想想要的布局

Grid與flex布局相似，將整個Grid分為了容器與子項（格子）

?

Grid容器的三個重要的概念：

1. 行和列
2. 單元格
3. 網格線

?

行和列

行和列的概念和柵格系統的的概念相似

單元格在水平方向排成一路為一行

單元格在豎直方向上拍成一路為一列

?

單元格

作為容器的最小單位，Grid網格由一個個單元格組成

?

網格線

用來隔開單元格的交叉線。網格線將每一行、每一列的單元格分割成全封閉的矩形

每行、每列網格線的數量是當前行數和列數加一；全封閉嘛

網格線也是控制單元格大小的因素之一；

?

Grid容器屬性(常用的)

　　1.指定一個Grid容器　　　　

　　display屬性值：

　　　　grid:指定一個元素采用網格布局，默認情況下容器都是塊級元素獨占一行

　　　　inline-grid:指定為行內Grid

　　2.設置Grid行數和列數

　　grid-template-rows: 指定行數

　　grid-template-columns: 指定列數

先做一個3 x 3的網格

?

?

?

.container{
width: 300px;
height: 300px;
display: grid;
grid-template-rows: 100px 100px 100px;
grid-template-columns: 100px 100px 100px;
background-color: #123456;
margin: 200px;
}
.container div{
width: 100px;
height: 100px;
background-clip: content-box;
padding: 5px;
border: 1px solid #fff;
background-color: #eee;
display: flex;
justify-content: center;
align-items: center;
box-sizing: border-box;
}

<div class="container">
<div>1</div>
<div>2</div>
<div>3</div>
<div>4</div>
<div>5</div>
<div>6</div>
<div>7</div>
<div>8</div>
<div>9</div>
</div>

還可以使用結合屬性：grid-template

grid-template: 100px 100px 100px/100px 100px 100px;

?

新單位fr

　?fraction 的縮寫，意為"片段" 。可以理解為當前單元格所占該行/列的比例、

?

上述代碼可以改為

grid-template-rows: 1fr 1fr 1fr;grid-template-columns: 1fr 1fr 1fr;

如果行數或者列數特別多的情況下，這樣寫就顯得特別的繁瑣；

于是乎就有了一個repeat( )函數

grid-template-rows: repeat(3,1fr);
grid-template-columns: repeat(3,1fr);

repeat()

第一個參數是設置行/列數

第二個參數是設置每一行/列所占的當前容器的份額

?

第二個參數可以填多個值

grid-template-rows: repeat(3,1fr );
grid-template-columns: repeat(3,1fr 50px);

先看結果：

?

?

?

理解：

容器被分為3列，每一列又被分成了 1fr 和50px，也就是說被分為了6列

內容區為1的元素占了 1fr+50px中的 1fr

內容區為2的元素占了 1fr+50px中的 50px

?

那么問題來了，為什么6是完整的？

其實每一個div都是完整的，只不過2有一半被3遮住了而已

6有一半超出了grid容器

為什么 3 5 9會遮住前一個div呢？

這就要提到網格線的作用了，網格線的作用不僅僅是分割每一個單元格

在分割單元格的同時也規定了每個單一格的水平和垂直方向上的起始位置和結束位置

3的其實位置就是在1fr+50px這里，也就是第二條列網線的位置，結束位置是第三條網格線

?

審查元素能很好的看的網格線的情況和單元格的分布

?

?

minmax( ) 和 auto

auto 單元格寬度/高度自適應

grid-template-rows: repeat(3,1fr );
grid-template-columns: 50px auto 50px;

第二列多余的寬會隨這Grip容器的變化而改變

第三列網格線會改變

? ? ??

?

?

minmax( ) 單元格寬度/高度在（min，max）范圍內

?

grid-template-rows: repeat(3,1fr );
grid-template-columns: 50px minmax(120px,1fr) 50px;

這里的1fr表示剩余的位置。因為沒有別的列占剩余空間。

如果最大值部分超出grip容器的容量，只會分配最大剩余容量

?

?

3.grip-gap：設置行/列直接的間隙

?

grip-gap：5px 5px 行間隙5 列間隙5

?

簡寫：grip-gap：5px

?

?

你也可以分開寫兩個屬性

?

grid-column-gap：5px;

?

grid-row-gap：5px;

?

?

?

4.grid-template-areas：在網格內指定區域

改屬性必須配合子項中的grid-area來使用

?

grid-area：用來規定區域的名字

?

你可把grid-area當成畫布，把grid-area所指定的區域當作畫塊

通過畫塊的拼接來獲取想要的布局；

?

你可以輕輕松松的做出如下布局（而且大小可以自適應）

?

?

代碼如下：

.container{
width: 100vw;
height: 100vh;
display: grid;
grid-template: repeat(4,1fr)/repeat(4,1fr);
grid-template-areas: "hl m m hr"
"hl m m hr"
"al al ar ar "
"f f f f ";
background: #eee;
grid-gap: .7em
}
.container .main{
grid-area: m;
background-color: #f1c40f
}
.container .asideL{
grid-area: al;
background-color: #4ff10f
}
.container .asideR{
grid-area: ar;
background-color: #0ff1cb
}
.container .headerL{
grid-area: hl;
background-color: #0f26f1
}
.container .headerR{
grid-area: hr;
background-color: #9e0ff1
}
.container .footer{
grid-area: f;
background-color: #f10f1a
}

<div class="container">
<div class="main"></div>
<div class="headerL"></div>
<div class="headerR"></div>
<div class="asideL"></div>
<div class="asideR"></div>
<div class="footer"></div>
</div>

突然感覺頁面布局居然如此簡單

?

注意：在grid-template-areas內所指定的命名區域必須是矩形，不然瀏覽器不渲染

grid-template：是grid-template-columns、grid-template-rows和grid-template-areas

?

5.grid-auto-flow：設置單元格排列的方向。

屬性值：

row： 從水平方向自左向右排列（默認）

column：從豎直方向自上向下排列

row dense：從水平方向自左向右排列，自動填補空格，盡可能排滿

column?dense：從豎直方向自上向下排列，盡可能排滿

?

6.justify-items/align-items：設置單元格內的水平方向/垂直方向對其方式

屬性值：

start：對齊單元格的起始邊緣。

end：對齊單元格的結束邊緣。

center：單元格內部居中。

stretch：拉伸，占滿單元格的整個寬度（默認值）

place-items是justify-items與align-items的合并屬性

7.justify-content/align-content：設置grid網格內所有單元格水平方向/垂直方向對其方式

屬性值：

start：對齊容器的起始邊框。

end：對齊容器的結束邊框。

center：容器內部居中。

stretch：項目大小沒有指定時，拉伸占據整個網格容器。

space-around：每個項目兩側的間隔相等。所以，項目之間的間隔比項目與容器邊框的間隔大一倍。

space-between：項目與項目的間隔相等，項目與容器邊框之間沒有間隔。

space-evenly：項目與項目的間隔相等，項目與容器邊框之間也是同樣長度的間隔。

place-content是align-content和justify-content的合并屬性。

?

?

Grid項目屬性(常用的)

?

1.grid-column/grid-row：根據網格線來指定單元格位置

?

background-color: red;
grid-column: 2 / 3;
grid-row: 1 / 2;

這里的意思是該單元格

X方向上所占的位置是第二根網格線到第三根網格線

Y方向上所占的位置是第一根網格線到第三根網格線

2. grid-area: 指定單元格在那個區域

grid-area:是grid-column/grid-row的合成屬性

?

grid-area: 1/2/2/3;

也可以指定是哪個已命名的區域，配個grid-template-areas使用

?

3. justify-self/align-self：單元格內容對齊方式

?

start：對齊單元格的起始邊緣。

?

end：對齊單元格的結束邊緣。

?

center：單元格內部居中。

?

stretch：拉伸，占滿單元格的整個寬度（默認值）。

?

?

Grid網格兼容問題：

?

?如果對內容有疑問，歡迎交流討論

參考鏈接：

http://www.ruanyifeng.com/blog/2019/03/grid-layout-tutorial.html

https://www.jianshu.com/p/21fc2c091b98

?

轉載于:https://www.cnblogs.com/yongG/p/11511265.html

總結

以上是生活随笔為你收集整理的你真的了解Grid布局吗？的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。