CSS Grid實現聖盃佈局

什麼是聖盃佈局？

一個header
一個footer
三列等高的body，兩個側邊欄+主內容區域

定義HTML結構：

<div class="container">
  <header class="header">header</header>
  <aside class="aside-left">aside left</aside>
  <main class="main">main</main>
  <aside class="aside-right"></aside>
  <footer class="footer"></footer>
</div>
複製程式碼

定義Grid:

.header{
  grid-area: header;
}
.footer{
  grid-area: footer; 
}
.main{
  grid-area: main;
}
.aside-left{
  grid-area: aside-left;
}
.aside-right{
  grid-area: aside-right;
}
.container{
  display: grid;
  grid-template-areas: 
          'header header header'
          'aside-left main aside-right'
          'footer footer footer';
  min-height: 100vh;
}
複製程式碼

定義列的寬度：

.container{
  grid-template-columns: 200px 1fr 200px;
}
複製程式碼

定義行的高度：

.container{
  grid-template-rows: 50px 1fr 50px;
}
複製程式碼

新增響應式：

@media screen and (max-width: 600px) {
  .container{
    grid-template-areas: 
      'header' 
      'aside-left'
      'main'
      'aside-right'
      'footer';
    grid-template-columns: 100%;
    grid-template-rows: 50px 50px minmax(300px, auto) 50px 80px;
  }
  .aside-left,.aside-right,.main{
    display:flex;
    align-items:center;
    justify-content: center;
  }
}
複製程式碼

檢視效果：holy grail layout

關於聖盃佈局：holygrail

CSS Grid瀏覽器支援：css grid browser support