文章目录
页面效果
代码 (HTML + CSS)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>网格布局 grid layout demo wuyujin1997</title>
<style>
* {
outline: auto;
}
.fill_parent {
min-height: 60vh;
max-width: 90%;
}
.grid_container > div {
background-color: pink;
/* 左右居中 */
text-align: center;
/* 上下居中 */
align-content: center;
}
.item_header { grid-area: a; }
.item_left_menu { grid-area: c; }
.item_main_content { grid-area: d; }
.item_right { grid-area: e; }
.item_footer { grid-area: b; }
.grid_container {
display: grid;
/* grid 或 grid-template-areas 都可以 */
grid-template-areas:
'a a a a a'
'c d d d e'
'c d d d e'
'b b b b b'
;
grid-gap: 10px;
background-color: gray;
}
</style>
</head>
<body>
<p>start p</p>
<div class="grid_container fill_parent">
<div class="item_header"><span>header content</span></div>
<div class="item_left_menu"><span>left_menu content</span></div>
<div class="item_main_content"><span>main_content content</span></div>
<div class="item_right"><span>right content</span></div>
<div class="item_footer"><span>footer content</span></div>
</div>
<p>end p</p>
</body>
</html>
参考