直接 上代碼，里面我加注釋，相當的簡單, 也可以去我的github上直接下載代碼，順手給個星：https://github.com/yurizhang/micro-finance-admin-system/blob/master/grid.html
<!DOCTYPE html> <html> <meta name=viewport content="width=device-width,initial-scale=1,maximum-scale=1,minimum-scale=1,user-scalable=no,minimal-ui"> <meta content=yes name=apple-mobile-web-app-capable> <meta content=yes name=apple-touch-fullscreen> <meta content="telephone=no,email=no" name=format-detection> <head> <title>Gird示例</title> <style> body, html { padding: 0; margin: 0; } .wrapper { display: grid; grid-template-columns: 1fr 1fr; /*表示2列*/ grid-template-rows: 1fr 2fr 1fr 2fr; /*第二行的高是第一行的2倍,我們現在可以設置行高之間的關系。如果我們把前面的行高設成 1fr ，最后一個則設置為 3fr，這意味着第二行的行高是第一行的 3 倍：*/ grid-column-gap: 1px; /*列之間的線*/ grid-row-gap: 1px; /*行之間的線隔*/ background-color: rgb(117, 112, 112); } @media screen and (min-width: 500px) { /*超過500顯示三列*/ .wrapper { grid-template-columns: 1fr 1fr 1fr; } } @media screen and (min-width: 800px) { /*超過800四列*/ .wrapper { grid-template-columns: 1fr 1fr 1fr 1fr; } } .letter { background-color: #0069b3; display: flex; justify-content: center; /*flex的相差屬性居中對齊*/ align-items: center; /*容器里元素垂直居中*/ padding: 20px; font-size: 70px; color: white; line-height: 1; font-family: 'hobeaux-rococeaux-background', Helvetica; font-weight: 200; cursor: pointer; transition: all .3s ease; } </style> </head> <body> <div class="wrapper"> <div class="letter"> Aa </div> <div class="letter"> Bb </div> <div class='letter'> Cc </div> <div class='letter'> Dd </div> <div class="letter"> Ee </div> <div class="letter"> Ff </div> <div class='letter'> Gg </div> <div class='letter'> Hh </div> <div class="letter"> Ii </div> <div class="letter"> Jj </div> <div class='letter'> Kk </div> <div class='letter'> Mm </div> </div> </body> </html>
效果如下：
<!DOCTYPE html
>
<
html
>
<
meta
name=
viewport
content=
"width=device-width,initial-scale=1,maximum-scale=1,minimum-scale=1,user-scalable=no,minimal-ui"
>
<
meta
content=
yes
name=
apple-mobile-web-app-capable
>
<
meta
content=
yes
name=
apple-touch-fullscreen
>
<
meta
content=
"telephone=no,email=no"
name=
format-detection
>
<
head
>
<
title
>Gird示例
</
title
>
<
style
>
body,
html {
padding:
0;
margin:
0;
}
.wrapper {
display:
grid;
grid-template-columns:
1fr
1fr;
/*表示2列*/
grid-template-rows:
1fr
2fr
1fr
2fr;
/*第二行的高是第一行的2倍,我們現在可以設置行高之間的關系。如果我們把前面的行高設成 1fr ，最后一個則設置為 3fr，這意味着第二行的行高是第一行的 3 倍：*/
grid-column-gap:
1px;
/*列之間的線*/
grid-row-gap:
1px;
/*行之間的線隔*/
background-color:
rgb(
117,
112,
112);
}
@media
screen and (
min-width:
500px) {
/*超過500顯示三列*/
.wrapper {
grid-template-columns:
1fr
1fr
1fr;
}
}
@media
screen and (
min-width:
800px) {
/*超過800四列*/
.wrapper {
grid-template-columns:
1fr
1fr
1fr
1fr;
}
}
.letter {
background-color:
#0069b3;
display:
flex;
justify-content:
center;
/*flex的相差屬性居中對齊*/
align-items:
center;
/*容器里元素垂直居中*/
padding:
20px;
font-size:
70px;
color:
white;
line-height:
1;
font-family:
'hobeaux-rococeaux-background',
Helvetica;
font-weight:
200;
cursor:
pointer;
transition:
all
.3s
ease;
}
<
/
style
>
</
head
>
<
body
>
<
div
class=
"wrapper"
>
<
div
class=
"letter"
>
Aa
</
div
>
<
div
class=
"letter"
>
Bb
</
div
>
<
div
class=
'letter'
>
Cc
</
div
>
<
div
class=
'letter'
>
Dd
</
div
>
<
div
class=
"letter"
>
Ee
</
div
>
<
div
class=
"letter"
>
Ff
</
div
>
<
div
class=
'letter'
>
Gg
</
div
>
<
div
class=
'letter'
>
Hh
</
div
>
<
div
class=
"letter"
>
Ii
</
div
>
<
div
class=
"letter"
>
Jj
</
div
>
<
div
class=
'letter'
>
Kk
</
div
>
<
div
class=
'letter'
>
Mm
</
div
>
</
div
>
</
body
>
</
html
>