<!DOCTYPEhtml><htmllang="en"><head><metacharset="UTF-8"><metaname="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><divclass="grid_container fill_parent"><divclass="item_header"><span>header content</span></div><divclass="item_left_menu"><span>left_menu content</span></div><divclass="item_main_content"><span>main_content content</span></div><divclass="item_right"><span>right content</span></div><divclass="item_footer"><span>footer content</span></div></div><p>end p</p></body></html>
