移动端九宫格实现直接上代码

直接上代码
<!DOCTYPE html>
<html>

<head>
    <style>
        html,
        body {
            height: 100%;
            margin: 0;
        }
        
        .box {
            width: 90%;
            height: 50vh;
            position: relative;
            margin: 0 auto;
        }
        
        .page {
            display: flex;
            flex-wrap: wrap;
            box-sizing: border-box;
            padding-left: 30px;
            padding-right: 30px;
        }
        
        .list {
            padding-bottom: calc((100% - 40px)/3);
            height: 0;
            width: calc((100% - 40px)/3);
            margin-right: 20px;
            margin-bottom: 20px;
            border-radius: 6px;
            overflow: hidden;
            background-color: #47c947;
        }
        
        .list:nth-child(3n) {
            margin-right: 0;
        }
    </style>
</head>

<body>
    <div class="box">
        <div class="page">
            <div class="list" data-index="1">
            </div>
            <div class="list" data-index="2">
            </div>
            <div class="list" data-index="3">
            </div>
            <div class="list" data-index="4">
            </div>
            <div class="list" data-index="5">
            </div>
            <div class="list" data-index="6">
            </div>
            <div class="list" data-index="7">
            </div>
            <div class="list" data-index="8">
            </div>
            <div class="list" data-index="9">
            </div>
        </div>
    </div>
</body>
<script>
</script>

</html>
效果图如下：