前端CSS3布局display:grid用法
2022-05-31 17:26:07
前端CSS3布局display:flex用法
1. 先附上代碼
點擊查看代碼
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>display:flex</title>
<style>
.grid-box {
width: 100%;
background-color: lightseagreen;
}
.grid-box>div {
background-color: lightskyblue;
text-align: center;
border: 1px solid red;
}
</style>
</head>
<body>
<div class="grid-box">
<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>
</body>
</html>
效果圖
給grid-box加上display: grid
點擊查看代碼
.grid-box {
width: 100%;
background-color: lightseagreen;
display: grid;
}
效果圖
可以看到并沒有什么變化，說明grid默認縱向排列
2. 接下來詳解grid布局的幾個常用屬性
- grid-template-columns
- grid-template-rows
- gap
- grid-template-areas
- justify-items
- align-items
1. grid-template-columns
決定網格布局中的列數（和寬度）
網格呈三列排列且每列120px
上代碼
點擊查看代碼
.grid-box {
width: 100%;
background-color: lightseagreen;
display: grid;
grid-template-columns: 120px 120px 120px;
}
效果圖
簡寫方式
grid-template-columns: repeat(3, 120px)
也可這樣設置
grid-template-columns: 120px auto 120px
兩邊的寬度為120px，中間的寬度自動填充
效果圖
可用fr表示比例關系(fraction 的縮寫，意為"片段”)
將寬度平均分成3等份
上代碼
點擊查看代碼
.grid-box {
width: 100%;
background-color: lightseagreen;
display: grid;
grid-template-columns: repeat(3, 1fr);
}
效果圖
將寬度分成3份，每份各占1 2 3
上代碼
點擊查看代碼
.grid-box {
width: 100%;
background-color: lightseagreen;
display: grid;
grid-template-columns: 1fr 2fr 3fr;
}
效果圖
單元格大小固定，但容器大小不確定，auto-fill屬性就會自動填充
上代碼
點擊查看代碼
.grid-box {
width: 100%;
background-color: lightseagreen;
display: grid;
grid-template-columns: repeat(auto-fill, 170px);
}
效果圖
minmax()函數產生一個長度范圍，接受兩個參數，分別為最小值和最大值
上代碼
點擊查看代碼
.grid-box {
width: 100%;
background-color: lightseagreen;
display: grid;
grid-template-columns: 1fr minmax(150px, 300px);
}
效果圖
第二列的最小寬度為150px，最大寬度為300px
2. grid-template-rows
規定網格布局中行的高度
前三行每行高120px
上代碼
點擊查看代碼
.grid-box {
width: 100%;
background-color: lightseagreen;
display: grid;
grid-template-rows: 120px 120px 120px;
}
效果圖
簡寫方式
grid-template-rows: repeat(3, 120px)
也可這樣設置
grid-template-rows: 120px auto 120px
第一行高度為120px，第二行的高度自動，第三行的高度為120px
效果圖
可用fr表示比例關系(fraction 的縮寫，意為"片段”)
將前三行的高度設置為1fr 2fr 3fr
上代碼
點擊查看代碼
.grid-box {
width: 100%;
background-color: lightseagreen;
display: grid;
grid-template-rows: 1fr 2fr 3fr;
}
效果圖
minmax()函數產生一個長度范圍，接受兩個參數，分別為最小值和最大值
上代碼
點擊查看代碼
.grid-box {
width: 100%;
background-color: lightseagreen;
display: grid;
grid-template-rows: 80px minmax(150px, 300px) 120px;
}
效果圖
3. gap
規定網格布局中行與列之間間隙的尺寸
上代碼
點擊查看代碼
.grid-box {
width: 100%;
background-color: lightseagreen;
display: grid;
grid-template-columns: repeat(3, 1fr);
grid-template-rows: 1fr 2fr 3fr;
gap: 1em;
}
效果圖
還可以這樣寫
grid-gap: 1em 2em;
1em是行之間的間隙，2em是列之間的間隙
效果圖
4. grid-template-areas
在網格布局中規定區域
上代碼
點擊查看代碼
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>display:flex</title>
<style>
.item1 {
grid-area: myArea1;
}
.item5 {
grid-area: myArea5;
}
.item8 {
grid-area: myArea8;
}
.grid-box {
width: 100%;
background-color: lightseagreen;
display: grid;
grid-template-areas:
'myArea1 myArea1 . . '
'myArea5 myArea8 . . '
'myArea5 myArea8 . . ';
}
.grid-box>div {
background-color: lightskyblue;
text-align: center;
border: 1px solid red;
}
</style>
</head>
<body>
<div class="grid-box">
<div class="item1">1</div>
<div class="item2">2</div>
<div class="item3">3</div>
<div class="item4">4</div>
<div class="item5">5</div>
<div class="item6">6</div>
<div class="item7">7</div>
<div class="item8">8</div>
</div>
</body>
</html>
效果圖
myArea1 myArea1 . .表示4列，一個點表示1列
item1占1行2列（第1行的第1列和第2列）
item5占2行1列（第1列的第2行和第3行）
item8占2行1列（第2列的第2行和第3行）
4. justify-items
縱軸上的對齊方式
上代碼
點擊查看代碼
.grid-box {
width: 100%;
height: 600px;
background-color: lightseagreen;
display: grid;
grid-template-columns: repeat(3, 1fr);
}
效果圖
justify-items: flex-start;（默認值）
效果圖
justify-items: center;
效果圖
justify-items: flex-end;
效果圖
4. align-items
橫軸上的對齊方式
上代碼
點擊查看代碼
.grid-box {
width: 100%;
height: 600px;
background-color: lightseagreen;
display: grid;
grid-template-columns: repeat(3, 1fr);
}
效果圖
align-items: flex-start;（默認值）
效果圖
align-items: center;
效果圖
align-items: flex-end;
效果圖
本文摘自 ：https://www.cnblogs.com/
更多科技新聞 ......