CSS Grid实现圣杯布局

最新推荐文章于 2023-05-17 16:57:26 发布

weixin_34092370

最新推荐文章于 2023-05-17 16:57:26 发布

阅读量192

点赞数

原文链接：https://juejin.im/post/5abcb93e5188255c946bc06e

版权

本文介绍了一种名为圣杯布局的设计方案，该方案通过CSS Grid实现一个包含顶部、底部及三列等高主体区域的网页布局。文章详细展示了如何定义HTML结构，并通过CSS Grid设置网格区域、列宽和行高等属性来构建布局。此外，还提供了响应式设计的代码示例。

摘要由CSDN通过智能技术生成

什么是圣杯布局？

一个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

转载于:https://juejin.im/post/5abcb93e5188255c946bc06e