标签 grid 下的文章

Grid 布局


Grid 布局是什么?

它是一个二维的网格布局。

两个核心部分:父元素和子元素

二维有:行 (row)、列 (column)

直接贴代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Gird</title>
</head>
<body>

    <div class="wrapper">
        <div class='letter'>
            A
        </div>
        <div class='letter'>
            B
        </div>
        <div class='letter'>
            C
        </div>
        <div class='letter'>
            D
        </div>
        <div class='letter'>
            E
        </div>
        <div class='letter'>
            F
        </div>
        <div class='letter'>
            G
        </div>
        <div class='letter'>
            H
        </div>
        <div class='letter'>
            I
        </div>
    </div>

    <div class="footer">
        <div class="item">J</div>
        <div class="item">K</div>
        <div class="item">L</div>
    </div>

    <style>
        body,html {
            padding: 0;
            margin: 0;
        }

        .wrapper {
            width: 600px;
            margin: 0 auto;
            display: grid;
            grid-template-columns: 1fr 1fr 1fr;
            grid-template-rows: 1fr 1fr 1fr;
            grid-column-gap: 1px; /* 列的网格线间的间距 1px */
            grid-row-gap: 1px; /* 行的网格线间的间距 1px */
            background-color: black;
        }

        .footer{
            display: grid;
            grid-template-columns: 1fr 1fr 1fr; /* 这里应该用 grid-template-columns: repeat(3, 1fr); 的。这样更简洁 */
            grid-template-rows: 1fr;
            grid-column-gap: 1px; 
            position: fixed;
            bottom: 0;
            width: 100%;
        }

        .letter,.item {
            background-color: #0069b3;
            display: flex;
            justify-content: center;
            align-items: center;
            padding: 20px;
            font-size: 70px;
            color: white;
            line-height: 1;
            font-family: 'hobeaux-rococeaux-background', Helvetica;
            font-weight: 200;
            cursor: pointer;
            transition: all .3s ease;
        }
    </style>
</body>
</html>