css瀑布流布局-html代码-BFW代码库

css瀑布流布局

代码语言：html

所属分类：瀑布流

下面为部分代码预览，完整代码请点击下载或在bfwstudio webide中打开

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">

    <title> - Grid Usages</title>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/meyer-reset/2.0/reset.min.css">
    <style>
        body {
            display: grid;
            grid-template-columns: 50vw;
            justify-content: center;
            overflow-x: hidden;
            margin-bottom: 3em;
        }
        h2 {
            justify-self: center;
            margin: 3em 0;
            font: 1em monospace;
        }
        .waterfall {
            display: grid;
            grid-template-columns: repeat(auto-fill, minmax(133px, 1fr));
            grid-gap: 0.25em;
            grid-auto-flow: row dense;
            grid-auto-rows: 20px;
        }
        .waterfall .item {
            width: 100%;
            background: #222;
            color: #ddd;
        }
        .waterfall .item:nth-of-type(3n+1) {
            grid-row: auto / span 5;
        }
        .waterfall .item:nth-of-type(3n+2) {
            grid-row: auto / span 6;
        }
        .waterfall .item:nth-of-type(3n+3) {
            grid-row: auto / span 8;
        }
        .brickwall {
            display: grid;
            grid-gap: 0.25em;
            grid-auto-flow: row dense;
            grid-auto-rows: minmax(133px, 20vmin);
            grid-template-columns: 1fr;
        }
@media (min-width: 512px) {
            .brickwall {
                grid-template-columns: repeat(7, 1fr);
            }
            .brickwall .item:nth-of-type(9n + 9) {
                grid-column: auto / span 2;
            }
            .brickwall .item:nth-of-type(9n + 8) {
                grid-column: auto / span 2;
            }
            .brickwall .item:nth-of-type(9n + 7) {
                grid-column: auto / span 3;
            }
            .brickwall .item:nth-of-type(9n + 6) {
                grid-column: auto / span 2;
            }
            .brickwall .item:nth-of-type(9n + 5) {
                grid-column: auto / span 3;
            }
            .brickwall .item:nth-of-type(9n + 4) {
                grid-column: auto / span 2;
            }
            .brickwall .item:nth-of-type(9n + 3) {
                grid-column: auto / span 3;
            }
            .brickwall .item:nth-of-type(9n + 2) {
                grid-column: auto / span 2;
            }
            .brickwall .item:nth-of-type(9n + 1) {
                grid-column: auto / span 2;
            }
        }
@media (min-width: 512px) and (min-width: 1024px) {
            .brickwall {
                grid-template-columns: repeat(14, 1fr);
            }
            .brickwall .item:nth-of-type(15n + 15) {
                grid-column: auto / span 3;
            }
            .brickwall .item:nth-of-type(15n + 14) {
                grid-column: auto / span 3;
            }
            .brickwall .item:nth-of-type(15n + 13) {
                grid-column: auto / span 2;
            }
            .brickwall .item:nth-of-type(15n + 12) {
                grid-column: auto / span 3;
            }
            .brickwall .item:nth-of-type(15n + 11) {
                grid-column: auto / span 3;
            }
            .brickwall .item:nth-of-type(15n + 10) {
                grid-column: auto / span 2;
            }
            .brickwall .item:nth-of-type(15n + 9) {
                grid-column: auto / span 3;
            }
            .brickwall .item:nth-of-type(15n + 8) {
                grid-column: auto / span 3;
            }
            .brickwall .item:nth-of-type(15n + 7) {
                grid-column: auto / span 3;
            }
            .brickwall .i.........完整代码请登录后点击上方下载按钮下载查看