# Grid ( 二維 ) + Flex ( 一維 ) 組合佈局 ![](https://i.imgur.com/plv1e9K.png) ### html ``` <body> <div class="container"> <header> header </header> <div class="hero"> hero </div> <aside class="sidebar"> sidebar </aside> <main> <div class="flex-item">flex item</div> <div class="flex-item">flex item</div> <div class="flex-item">flex item</div> </main> <div class="extra-content"> extra content </div> <div class="related-image"> related image </div> <div class="related-posts"> related posts </div> <footer> footer </footer> </div> </body> ``` ### css ``` html,body { height: 100%; margin: 0 5px; } .container { display: grid; height: 100%; grid-template-columns: 1fr 1fr 1fr; grid-template-rows: 1fr 3fr 1.5fr 1.5fr 1fr 1fr; gap: 10px; font-size: 56 px; text-align: center; } .container > * { padding: 5px; border: 3px dashed black; border-radius: 5px; } header { grid-area: 1/1/2/4; } .hero { grid-area: 2/1/3/2; } .sidebar { grid-area: 3/1/5/2; } main { grid-area: 2/2/4/4; display: flex; justify-content: space-between; align-items: center; } main .flex-item { display: flex; flex: 0; align-items: center; border: 3px solid black; border-radius: 5px; margin: 5px; padding: 5px; } .extra-content { grid-area: 4/2/5/4; } .related-image { grid-area: 5/1/6/3; } .related-posts { grid-area: 5/3/6/4; } footer { grid-area: 6/1/7/4; } ```