CSS Grid 布局示例 - 圣杯布局

最新推荐文章于 2023-11-23 18:32:08 发布

UIEngineer

最新推荐文章于 2023-11-23 18:32:08 发布

阅读量962

点赞数 3

分类专栏： HTML5/CSS3

本文链接：https://blog.csdn.net/zjsfdx/article/details/89231684

版权

HTML5/CSS3 专栏收录该内容

35 篇文章 0 订阅

订阅专栏

浏览示例时建议拖动窗口大小，有些是响应式布局。

圣杯布局

说到布局，首先肯定是经典的三列圣杯布局。来看实现：

<!DOCTYPE html>
<html class="no-js">
    <head>
        <meta charset="utf-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <title></title>
        <meta name="description" content="">
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <link rel="stylesheet" href="">

        <style>
            .grid{
                display: grid;
                grid-template-columns:150px auto 150px;
                grid-template-rows: repeat(3,100px);
                grid-gap:1em;
            }

            header,
            aside,
            article,
            footer{
                background: #eaeaea;
                padding:1em;
            }
            
            header,footer{
                grid-column: 1 / 4;/* grid-column-start和grid-column-end的简写 */
            }

            /* 演示特定样式 */
            body{
                margin: 0 auto;
                max-width: 56em;
                padding: 1em 0;
            }

            .grid > *{
                display: flex;
                align-items: center;
                justify-content: center;
            }

        </style>

    </head>
    <body>
        
        <div class="grid">
            <header>Header</header>
            <aside class="sidebar-left">Left Sidebar</aside>
            <article >Article</article>
            <aside class="sidebar-right">Right Sidebar</aside>
            <footer>Footer</footer>
        </div>

    </body>
</html>

在这里插入图片描述
当然，现在移动端访问已经超过桌面端，所以我们无法绕过响应式布局，加上媒体查询，轻松搞定：

<!DOCTYPE html>
<html class="no-js">
    <head>
        <meta charset="utf-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <title></title>
        <meta name="description" content="">
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <link rel="stylesheet" href="">

        <style>
            .grid{
                display: grid;
                grid-template-columns:150px auto 150px;
                grid-gap: 1em;
            }

            header,footer{
                grid-column:1 / 4;
            }

            body{
                margin: 0 auto;
                max-width: 56em;
                padding: 1em 0;
            }

            @media all and (max-width:700px){
                aside,
                article{
                    grid-column: 1 / 4;
                }
            }
            
            header,
            aside,
            article,
            footer{
                background: #eaeaea;
                display: flex;
                align-items: center;
                justify-content: center;
                height: 25vh;
            }
        </style>

    </head>
    <body>
        
        <div class="grid">
            <header>Header</header>
            <aside class="sidebar-left">Left Sidebar</aside>
            <article >Article</article>
            <aside class="sidebar-right">Right Sidebar</aside>
            <footer>Footer</footer>
        </div>

    </body>
</html>

在这里插入图片描述