grid 佈局實現複雜的頁面結構
grid[1] 佈局通常在C
端佈局用得比較多,非常強大,特別是在響應式佈局上也有很大作用,過去我們使用彈性盒子
佈局,flex
佈局,通常我們在不改變結構的情況下可以使用grid
佈局來更靈活的拓展我們的佈局
正文開始...
grid
當我們對一個父級元素使用grid
時,此時子級元素會發生什麼
<div>
<div>
<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>
</div>
對應的css
* {
padding: 0;
margin: 0;
}
.app {
background: beige;
}
.box-1 {
display: grid;
}
.box-1 .item {
width: 80px;
height: 80px;
}
.box-1 .item:nth-of-type(2n) {
background-color: green;
}
.box-1 .item:nth-of-type(2n+1) {
background-color: pink;
}
此時子元素將默認單行排列
grid
, 默認grid-template-columns: 1fr
,grid-template-rows:1fr
網格佈局主要由colums
與rows
來定義列與行
-
九宮格
通常我們在頁面佈局上,左右間距等分,這個在以前佈局上,左右間距設置就是間距的一半,上下間距會合並
<div>
<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>
.app {
background: beige;
}
.box-1 {
display: grid;
grid-template-columns: 33.3% 33.3% 33.3%;
grid-template-rows: 200px 200px 200px;
}
.box .item:nth-of-type(2n) {
background-color: green;
}
.box .item:nth-of-type(2n+1) {
background-color: pink;
}
寬度自適應,每個高度爲固定200px
的九宮格
也就是grid-template-columns
確定了 3 列,並且寬度是整個屏幕的33.3%
, 而高度爲固定高度200px
有且僅有 3 行
當我們把grid-template-columns: 1fr 1fr 1fr
時,此時與之效果是一樣,有且僅僅只有三列
看到1fr
是不是很陌生,這是網格的軌道單位
, 這是一個很靈活的單位
-
假設我們要平分整個屏幕的 1/3,那麼你就需要設置
grid-template-columns: 1fr 1fr 1fr
, 每一個1fr
就是33.33%
-
假設你要設置一個
2fr 1fr 1fr
, 那麼第一個元素會是第二個元素的兩倍
grid-template-columns
在以上九宮格例子中,我們使用grid-template-columns
控制了網格列數,通過這個屬性,我們可以不用單獨對子元素進行控制
.box-1 {
display: grid;
grid-template-columns: 200px 100px 1fr;
grid-template-rows: 200px 200px 200px;
}
.box .item:nth-of-type(2n) {
background-color: green;
}
.box .item:nth-of-type(2n+1) {
background-color: pink;
}
在父元素上,我們可以在grid-template-columns
中設置子元素columns
的寬度,grid-template-columns: x y z ...
x,y,z 既可以是百分比,也可以是固定像素
grid-template-rows
在以上例子中我們用這個屬性控制了子元素的高度,當我們 UI 設計的一個模塊是 4 行時,我們就可以對應設置grid-template-rows: x y z p
這個屬性控制了網格中的行
grid-columns-grap
控制列之間的間距
.app {
background: beige;
}
.box-1 {
display: grid;
grid-template-columns: 1fr 1fr 1fr;
grid-template-rows: 200px 200px 200px;
grid-column-gap: 10px; /* 列之間10個像素*/
}
.box .item:nth-of-type(2n) {
background-color: green;
}
.box .item:nth-of-type(2n+1) {
background-color: pink;
}
grid-rows-grap
控制行之間的間距
.box-1 {
display: grid;
grid-template-columns: 1fr 1fr 1fr;
grid-template-rows: 200px 200px 200px;
grid-row-gap: 10px; /* 行之間的間距 */
}
.app {
background: red;
}
.box-1 {
display: grid;
grid-template-columns: 1fr 1fr 1fr;
grid-template-rows: 200px 200px 200px;
grid-column-gap: 10px;
grid-row-gap: 10px;
padding: 10px;
}
padding: 10px;
, 然後分別設置grid-column-gap: 10px;
,grid-row-gap:10
就可以實現間距相等了
我們可以用column-gap
與row-gap
來替代grid-column-gap
與grid-row-gap
repeat 複製
在以上我們使用grid-template-columns:1fr 1fr 1fr
來控制,我們也可以利用 repeat 來簡寫
.box-1 {
display: grid;
/ * grid-template-columns:1fr 1fr 1fr */
grid-template-columns: repeat(3,1fr);
/*
grid-template-rows: 200px 200px 200px
*/
grid-template-rows: repeat(3, 200px);
grid-column-gap: 10px;
grid-row-gap: 10px;
padding: 10px;
}
grid-column-start 與 grid-column-end
控制列的跨度
.box .item:nth-of-type(1) {
grid-column-start: 1;
grid-column-end: 4;
}
grid-column-start:1
,grid-column-end:4
grid-row-start 與 grid-row-end
控制行的跨度
.box .item:nth-of-type(1) {
grid-row-start: 3;
grid-row-end: 3;
grid-column-start: 1;
grid-column-end: 3;
}
grid-column 與 grid-row
在之前我們有用過grid-column-start
與grid-column-end
來控制列的跨度
我們可以通過grid-column:1/3
來簡grid-column-start:1;grid-column-end:3
.box-1 {
display: grid;
grid-template-columns: repeat(4,1fr);
gap: 20px;
position: relative;
}
.box .item:nth-of-type(1) {
grid-column: 1/3;
}
我們通過grid-row:1/3
來簡寫grid-row-start:1;grid-row-end:3
.box .item:nth-of-type(1) {
grid-column: 1/3;
grid-row: 1/3;
}
minmax(200px, 1fr)
最小寬度 200,最大自適應
.box-1 {
display: grid;
/* grid-template-columns: 1fr 1fr 1fr; */
grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
grid-column-gap: 10px;
grid-row-gap: 10px;
padding: 10px;
}
gap 的簡寫
gap:10px 20px
代表row-gap:10px
與column-gap:20px
.box-1 {
display: grid;
grid-template-columns: repeat(4,1fr);
/* grid-column-gap: 10px;
grid-row-gap: 10px; */
/* column-gap: 10px;
row-gap: 10px; */
gap:10px 20px;
}
grid-area
這是一個基於grid-row-start
、grid-column-start
、grid-row-end
、grid-row-end
的簡寫
.box .item:nth-of-type(2) {
grid-area: 1 / 2 / 2 / 2;
}
- 實現一個
header
,slide
,main
,footer
的佈局
<div>
<header>header</header>
<aside>slide</aside>
<main>main</main>
<footer>footer</footer>
</div>
對應的 css 如下
* {
padding: 0;
margin: 0;
}
.app {
background: red;
display: grid;
grid-template-columns: 200px 1fr;
grid-template-rows: 30px calc(100vh - 90px) 60px;
}
header {
grid-column: 1 / 3;
background-color: blue;
}
aside {
grid-column: 1 / 2;
background-color: pink;
}
main {
grid-column: 2 / 3;
background-color: yellow;
}
footer {
grid-column: 1 / 3;
background-color: palegreen;
}
我們在父元素上設置了grid-template-columns: 200px 1fr
, 這個使得網格的第一列是固定200px
, 第二列是1fr
我們使用grid-template-rows: 30px calc(100vh - 90px) 60px;
設置了row
,那麼第一行就是 30px,第二行就是calc(100vh -90px)
,第三行就是60px
。
我們在header
上用grid-column: 1/3
設置了跨列顯示,在aside
上設置了grid-column: 1/2
, 在main
上設置了grid-column: 2/3
;footer
設置了grid-column:1/3
最後我們看下效果
grid-area
命名網格區域名稱
* {
padding: 0;
margin: 0;
}
.app {
background: red;
display: grid;
grid-template-columns: 200px 1fr;
grid-auto-rows: minmax(100px, auto);
grid-template-areas:
"hd hd hd"
"sd main main"
"ft ft ft";
}
header {
grid-area: hd;
background-color: blue;
}
aside {
grid-area: sd;
background-color: pink;
}
main {
grid-area: main;
background-color: yellow;
}
footer {
grid-area: ft;
background-color: palegreen;
}
總結
-
grid
佈局常用的幾個屬性,比如grid-template-columns
與grid-template-rows
控制網格的列與行 -
grid-colunms-gap
與grid-rows-gap
設置列與行之間的間距,row-gap
與column-gap
是它們的簡寫 -
grap
可以設置row-gap
與column-gap
-
grid-column-start
與grid-column-end
來設置列的跨度,grid-column: 1/2
與grid-row: 1/3
可以替代它們 -
grid-area
實現一個網站的header
、slide
、main
、footer
的佈局 -
code example[2]
參考資料
[1]grid: https://developer.mozilla.org/zh-CN/docs/Web/CSS/CSS_Grid_Layout/Basic_Concepts_of_Grid_Layout
[2]code example:_ https://github.com/maicFir/lessonNote/tree/master/html/09-grid 佈局_
本文由 Readfog 進行 AMP 轉碼,版權歸原作者所有。
來源:https://mp.weixin.qq.com/s/g2itgo2j4ZaVMrhGIdUhNQ