CSS3之grid网页布局 css div 网页布局技术教程-文章教程-杰人编程网

grid是css3推出的新的布局方式，相比flex，它更适合二维布局，使代码简洁、方便。

以下代码便是由grid定义的布局示例

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
        <title>css之grid布局</title>
        <style type="text/css">
            .layout {
                display: grid;
                gap: 12px;
                grid-template-rows: 48px 5fr 1fr;
                grid-template-columns: 1fr 3fr 1fr;
                grid-template-areas: 
                'header header header'
                'nav article aside'
                'nav footer footer';
            }
            header, footer, nav, article, aside {
                background-color: cadetblue;
                color: chartreuse;
                border: 2px solid cornflowerblue;
                border-radius: 8px;
                padding: 12px;
            }
            header {
                grid-area: header;
            }
            nav {
                grid-area: nav;
            }
            article {
                grid-area: article;
            }
            aside {
                grid-area: aside;
            }
            footer {
                grid-area: footer;
            }
        </style>
    </head>
    <body>
        <div class="layout">
            <header>Header</header>
            <nav>Nav</nav>
            <article>Article</article>
            <aside>Aside</aside>
            <footer>Footer</footer>
        </div>
    </body>
</html>

效果如图所示

要使用grid布局，首先设置display为grid，使用如下所示：

.layout {
    display: grid;
}

gap是grid布局网格的间隙，使用如下所示：

.layout {
    gap: 12px;
}

这里的间隙为12px

grid-template-rows是定义grid布局网格每行的高度，使用如下所示：

.layout {
    grid-template-rows: 48px 5fr 1fr;
}

grid-template-columns是定义grid布局网格每列的宽度，使用如下所示：

.layout {
    grid-template-columns: 1fr 3fr 1fr;
}

注：

px是像素，是一绝对单位
fr是grid网关布局中，引入的一种新的长度单位fraction，它表示grid布局中剩余空间的一部分
1fr表示100%的剩余空间
1fr 3fr 6fr 分别表示10% 30% 60%的的剩余空间
grid-area是对grid网格元素的命名，grid-template-areas是对grid网格元素的布局，两则配合使用，使用如下所示

css部分

.layout {
    grid-template-areas: 
        'header header header'
        'nav article aside'
        'nav footer footer';
}
header {
    grid-area: header;
}
nav {
    grid-area: nav;
}
article {
    grid-area: article;
}
aside {
    grid-area: aside;
}
footer {
    grid-area: footer;
}

html部分

<div class="layout">
    <header>Header</header>
    <nav>Nav</nav>
    <article>Article</article>
    <aside>Aside</aside>
    <footer>Footer</footer>
</div>