display：grid；网格布局
display：grid；网格布局，可自适应布局
·
网格布局是二维面，像坐标系的x轴、y轴一样。
grid-area为每个网格区域取别名；
grid-template-columns设置网格有多少列，可以设置固定像素也可以设置比例，比例为fr单位；
（eg：grid-template-columns：1fr 1fr 2fr;表示总宽度分为三列，其宽度分别为1/4、1/4、1/2。）
grid-template-rows设置网格行数。
grid-gap设置各网格间距，单独设置行列间距（列：grid-column-gap，行：grid-row-gap）。
例1：代码如下：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>grid02</title>
<style type="text/css">
.dv{
width: 400px;
height: 300px;
padding: 10px;
text-align: center;
display: grid; // 设置网格布局
background-color: violet;
grid-template-columns: 1fr 1fr 1fr; // 列的比例分布，分成三例，每列占比总宽度的1/3
grid-gap: 10px; // 各网格间距为10px
grid:
"dv1 dv1 dv1"
"dv2 dv2 dv4"
"dv2 dv2 dv4"
"dv3 dv3 dv4"; // 网格
}
.dv1{
grid-area: dv1; // 网格区域的别名为dv1，此别名在grid属性中用到
background-color: skyblue;
}
.dv2{
grid-area: dv2;
background-color: skyblue;
}
.dv3{
grid-area: dv3;
background-color: skyblue;
}
.dv4{
grid-area: dv4;
background-color: skyblue;
}
</style>
</head>
<body>
<div class="box">
<div class="dv">
<div class="dv1">dv1</div>
<div class="dv2">dv2</div>
<div class="dv3">dv3</div>
<div class="dv4">dv4</div>
</div>
</div>
</body>
</html>效果如下：
例2：代码如下：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>grid01</title>
<style type="text/css">
.dv{
width: 400px;
height: 300px;
padding: 10px;
text-align: center;
display: grid;
background-color: violet;
grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr;
grid-gap: 10px;
grid:
"dv1 dv1 dv1 dv1 dv1 dv1"
"dv2 dv3 dv3 dv3 dv4 dv4"
"dv2 dv5 dv5 dv5 dv5 dv5"
"dv2 dv6 dv6 dv7 dv7 dv7";
}
.dv1{
grid-area: dv1;
background-color: skyblue;
}
.dv2{
grid-area: dv2;
background-color: skyblue;
}
.dv3{
grid-area: dv3;
background-color: skyblue;
}
.dv4{
grid-area: dv4;
background-color: skyblue;
}
.dv5{
grid-area: dv5;
background-color: skyblue;
}
.dv6{
grid-area: dv6;
background-color: skyblue;
}
.dv7{
grid-area: dv7;
background-color: skyblue;
}
</style>
</head>
<body>
<div class="box">
<div class="dv">
<div class="dv1">dv1</div>
<div class="dv2">dv2</div>
<div class="dv3">dv3</div>
<div class="dv4">dv4</div>
<div class="dv5">dv5</div>
<div class="dv6">dv6</div>
<div class="dv7">dv7</div>
</div>
</div>
</body>
</html>
效果如下：
为开发者提供学习成长、分享交流、生态实践、资源工具等服务，帮助开发者快速成长。
更多推荐
0
0- 0
已为社区贡献2条内容
所有评论(0)