grid布局-子项放置3

syt_10132025-12-13 11:10
javascript 复制代码
<style>
        .item{
            border:1px solid red;
            background-color:orange;
            display:flex;
            justify-content: center;
            align-items: center;
        }
       .container{
        background-color:rgb(208, 164, 35);
        padding:50px;
        margin:50px;
        color:#fff;
        display:grid;
        grid-template-columns:repeat(3,1fr);
        grid-auto-rows:80px;
        gap:10px;
        /* 自动填充之前空余的格子 */
        grid-auto-flow: row dense;
       }
       .item:nth-child(-n+3){
        /* 列方向占据两个格子 */
        grid-column:span 2;
       }
       .item:last-child{
        order:-1;
        grid-column:span 2;
       }
    </style>
</head>
<body>
    <div class="container">
        <div class="item">1</div>
        <div class="item">2</div>
        <div class="item">3</div>
        <div class="item">4</div>
        <div class="item">5</div>
        <div class="item">6</div>
        <div class="item">7</div>
        <div class="item">8</div>
        <div class="item">9</div>
        <div class="item">10</div>
        <div class="item">11</div>
        <div class="item">12</div>
        <div class="item">13</div>
        <div class="item">14</div>
        <div class="item">15</div>
        <div class="item">16</div>
        <div class="item">17</div>
        <div class="item">18</div>
        <div class="item">19</div>
        <div class="item">20</div>
        <div class="item">21</div>
        <div class="item">22</div>
    </div>
</body>