网格布局 HTML CSS grid layout demo

文章目录

- 页面效果
- 代码 (HTML + CSS)
- 参考

页面效果

在这里插入图片描述

代码 (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>