grid布局之-子项放置2

syt_10132025-12-12 8:23
xml 复制代码
<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;
        /* box-sizing: border-box; */
        height:500px;
        overflow: auto;

        display:grid;
        grid-template-rows: repeat(3,1fr);
        grid-template-columns:repeat(2,200px);
        gap:10px;

        /* 控制子项放置顺序,默认是按照行 */
        grid-auto-flow:column;
        /* 控制隐式网格的宽度 */
        grid-auto-columns:100px;

        grid-template-areas:
        'a b'
        'a b';

       }
       .a{
        grid-area:a;
       }
       .b{
        grid-area:b;
       }
       
    </style>
</head>
<body>
    <div class="container">
        <div class="item a">a</div>
        <div class="item b">b</div>
        <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>
</body>