# 基本 Grid 應用 ![](https://i.imgur.com/HfG1BDg.png) ### html ``` <body> <div class="container"> <header> <img src="starburst.jpg" alt=""> <nav> <ul> <li>導航1</li> <li>導航2</li> <li>導航3</li> </ul> </nav> <button>按鈕1</button> </header> <aside class="sibebar"> aside </aside> <section class="main"> section </section> <footer> footer </footer> </div> </body> ``` ### css ``` body { margin: 0; } .container { display: grid; margin: 10px; grid-template-columns: 1fr 3fr; grid-template-rows: auto 1000px 100px; grid-template-areas: "header header" "sidebar main" "footer footer"; gap: 10px; } header { grid-area: header; display: grid; grid-template-columns:auto 1fr auto; border: 2px dashed black; border-radius: 10px; align-items: center; padding: 10px 15px; } header img { width: 70px; height: 70px; } header nav ul li { display: inline-block; margin-right: 10px; } button { padding: 10px; font-size: large; background-color: skyblue; border: 2px solid skyblue; border-radius: 5px; } aside { grid-area: sidebar; font-size: 36px; border: 2px dashed black; border-radius: 10px; text-align: center; line-height: 1000px; } section { grid-area: main; font-size: 36px; border: 2px dashed black; border-radius: 10px; text-align: center; line-height: 1000px; } footer { grid-area: footer; font-size: 36px; border: 2px dashed black; border-radius: 10px; text-align: center; line-height: 100px; } ```