用到了三个grid布局的属性
display: grid 网格布局(父元素设置)
gird-template-areas 每一个网格项 (父元素设置)
grid-area 网格区域(子元素设置)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style >
/*用到了三个grid布局的属性*/
/*display: grid 网格布局（父元素设置）*/
/*gird-template-areas 每一个网格项，可以任意名称,但必须与网格区域名称对应。“ . ”代表空白网格项。 (父元素设置)*/
/*grid-area 网格区域(Grid Area)。 (子元素设置)*/
.ccc{
display: grid;
grid-template-areas:
". . . . a . . e . . . ."
". . b . . . . . . f . ."
". . . . g . . h . . . ."
". . . . c . . d . . . .";
}
</style>
</head>
<body>
<div class="ccc">
<div style="grid-area: a">a</div>
<div style="grid-area: b">b</div>
<div style="grid-area: c">c</div>
<div style="grid-area: d">d</div>
<div style="grid-area: h">h</div>
<div style="grid-area: g">g</div>
<div style="grid-area: f">f</div>
<div style="grid-area: e">e</div>
</div>
</body>
</html>
646
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
