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;
        }
   .........完整代码请登录后点击上方下载按钮下载查看