1. 經典三列布局 · 前端教學筆記[更新中...]

# 經典的三列布局 > 三列布局是基礎, 可以方便的擴展為二列或多列 ## 最終效果圖 ![](https://img.kancloud.cn/5a/e4/5ae4404f2240837c824418f282fd82f7_1400x1304.jpg) --- ## HTML結構 ```html <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <link rel="stylesheet" href="style.css"> <title>簡單的三列布局</title> </head> <body> <header class="header">頭部</header> <aside class="left">左邊欄</aside> <main class="content">主體內容區</main> <aside class="right">右邊欄</aside> <footer class="footer">底部</footer> </body> </html> ``` --- ## CSS代碼 ```css /* style.css */ body { /*設置body元素采用網格布局*/ display: grid; /*行模板: 第一行60px,第二行750px, 第三行60px*/ grid-template-rows: 60px 750px 60px; /*列模板: 第一列200px,第2列自動擴展, 第3列200px*/ grid-template-columns: 200px auto 200px; /*設置行間距:10px*/ grid-row-gap: 10px; /*設置列間距: 10px*/ grid-column-gap: 10px; } .header { /*網格區域命名*/ grid-area: my-header; /*參考背景色*/ background-color: lightgreen; } .footer { /*網格區域命名*/ grid-area: my-footer; /*參考背景色*/ background-color: lightgreen; } .left { /*網格區域命名*/ grid-area: my-left; /*參考背景色*/ background-color: lightblue; } .right { /*網格區域命名*/ grid-area: my-right; /*參考背景色*/ background-color: lightblue; } .content { /*網格區域命名*/ grid-area: my-content; /*參考背景色*/ background-color: coral; } /*設置網格區域: 非常直觀*/ body { /*網格區域名稱相同, 意味著合并*/ grid-template-areas: "my-header my-header my-header" "my-left my-content my-right" "my-footer my-footer my-footer" } ``` **看到這里不禁老淚縱橫,世間萬物都有輪回, 誰能料到,江湖上失傳近20年的表格布局大法,會以這種方式回歸**