CSS 网格布局(grid)-常用页面布局(九)

洲_
154 阅读2分钟
  • 在开发管理系统的时候，我们一般会实现一个页面级别的 Layout，这个 Layout 会将页面分为几个区域
  • 一般情况下会包含这几个区域: 头部（header）、导航（nav）、侧栏（aside）、内容/主区域（main）和底部等
  • 其实用网格布局实现这一个效果是非常简单的，那今天我们就来尝试一下

实现页面布局

127.0.0.1_5500_test.html (3).png

<div class="app">
    <header>header</header>
    <nav>nav</nav>
    <aside>aside</aside>
    <main>main</main>
    <footer>footer</footer>
</div>

.app {
    display: grid;
    gap: 4px;
    grid-template-columns: 100px 1fr;
    grid-template-areas:
        "header header"
        "nav    nav"
        "aside  main"
        "footer footer";
    grid-template-rows: 50px 30px 1fr 50px;
    min-height: 100vh;
    color: #fff;
}

.app>* {
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: #4c84ff;
}

header {
    grid-area: header;
}

nav {
    grid-area: nav;
}

aside {
    grid-area: aside;
}

main {
    grid-area: main;
}

footer {
    grid-area: footer;
}
  • 这是一个简单的示例, 你也可以根据实际需求对页面进行区域进行调整
  • 这个示例没有做固定头部, 如果你需要也是可以实现的, 例如设置: position: fixed;
  • 文中使用的都是以前讲过的知识点, 感兴趣的可以看以前的文档

响应式布局

  • 假如页面需要在移动端使用, 可以根据宽度自动调整区域的位置吗? 当然可以
  • 增加下面的这段代码, 让宽度小于 500px 时, 每个区域的宽度都是 100% 127.0.0.1_5500_test.html.png
@media (max-width: 500px) {
    .app {
        grid-template-columns: 1fr;
        grid-template-areas:
            "header"
            "nav"
            "aside"
            "main"
            "footer";
        grid-template-rows: 50px 30px 50px 1fr 50px;
    }
}
  • 是不是在处理响应式布局时也是很简单呢?

代码示例

  • 上面写的比较简单, 但是可以根据这个简单的创建复杂的场景
  • 我在上面示例的基础上做了一下优化, 写了一个简单的示例, 感兴趣的话可以看一下这个的实现过程

小结

  • 通过网格布局我们可以很容易的实现一个页面的基础布局
  • 在基础布局的基础上通过 @media 实现响应式布局

相关文档

参考文档

avatar
文章
阅读
粉丝