圣杯布局（网格布局）

最新推荐文章于 2025-08-12 15:50:47 发布

原创最新推荐文章于 2025-08-12 15:50:47 发布 · 519 阅读

0 ·

CC 4.0 BY-SA版权

H5 专栏收录该内容

28 篇文章

订阅专栏

本文深入讲解了CSS Grid布局的使用方法，通过一个实例展示了如何利用grid-row和grid-column属性来创建响应式网页布局，使布局既简洁又易于理解。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
        *{
            margin:0;
            padding:0;
        }
        body{
            display: grid;
        }
        .header{
            grid-row: 1;
            grid-column:1/5;
            background:orange;
        }
        .footer{
            grid-row:3;
            grid-column:1/5;
            background:orange;
        }
        .left{
            grid-row:2;
            grid-column:1/2;
            background:gold;
        }
        .center{
            grid-row: 2;
            grid-column: 2/4;
            background:palevioletred;
        }
        .right{
            grid-row:2;
            grid-column: 4/5;
            background: saddlebrown;
        }
    </style>
</head>
<body>
    <div class="header">1</div>
    <div class="left">2</div>
    <div class="center">3</div>
    <div class="right">4</div>
    <div class="footer">5</div>
</body>
</html>

首先给最外层的body设成display:grid。当然，是外层父级元素即可，不一定是body。

grid-row就是说由上到下，#header占据第1格，#left,#middle,#right占据第2格，#footer占据第3格。

而grid-column表示，在横向从左向右，分成了五格。其中#header和#footer占据全部。#left占据第1格，#middle占据第2到第4格，#right占据第5格。

不管是实现起来还是理解起来都很方便。