CSS Grid实现圣杯布局

什么是圣杯布局？

一个header
一个footer
三列等高的body，两个侧边栏+主内容区域

image

定义HTML结构：

  
header
  
aside left
  
main
  

  

定义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

image