Grid 布局示例Grid 布局参考张鑫旭的https://www.zhangxinxu.com/wordpress

Grid 布局
参考张鑫旭的www.zhangxinxu.com/wordpress/2…
实际效果：

<style>
    * {
        margin: 0;
    }

    ::-webkit-scrollbar {
        width: 0.5rem;
    }

    ::-webkit-scrollbar-track {
        border-radius: 5px;
        background-color: #F5F5F5;
    }

    ::-webkit-scrollbar-thumb {
        border-radius: 5px;
        background-color: silver;
    }

    .layout {
        display: grid;
        width: 100%;
        height: calc(100vh);
        grid-template-columns: 260px 1fr;
    }

    .left {
        background-color: slategrey;
    }

    .right {
        display: grid;
        grid-template-rows: 60px calc(100vh - 100px) 40px;
    }

    .header {
        background: lightsteelblue;
    }

    .footer {
        background: lightgray;
    }

    .gallery {
        display: grid;
        grid-template-columns: repeat(auto-fill, 200px);
        justify-content: space-around;
        grid-auto-rows: 210px;
        overflow-y: auto;
    }

    .gallery>div {
        margin: 0.25rem;
        background-color: rgba(0, 0, 255, .2);
    }

    @media screen and (max-width: 550px) {
        .layout {
            grid-template-columns: 1fr;
        }

        .layout .left {
            display: none;
        }
    }
</style>

<body class="layout">
    <div class="left">navigation</div>
    <div class="right">
        <div class="header">Title: Grid Layout</div>
        <div class="gallery">
            <div>IMG</div>
            <div></div>
            <div></div>
            <div></div>
            <div></div>
            <div></div>
            <div></div>
            <div></div>
            <div></div>
            <div></div>
            <div></div>
            <div></div>
            <div></div>
            <div></div>
            <div></div>
            <div></div>
            <div></div>
            <div></div>
        </div>
        <div class="footer">©copyright</div>
    </div>
</body>

Grid 布局 示例

Grid 布局示例