grid布局之-子项放置4

syt_10132025-12-13 19:58
这个可以用做表格布局
xml 复制代码
 <style>
        .item{
            display:flex;
            justify-content: center;
            align-items: center;
        }
       .container{
        background-color:rgba(250, 175, 101, 0.829);
        color:#fff;
        display:grid;
        grid-template-columns:repeat(2,1fr);
        gap:20px;
        grid-template-rows:100px;
        grid-auto-rows:50px;

        /* 统一控制子项格子横向的排列方式 */
        justify-items: start;
        justify-items: end;
        justify-items: stretch;
        justify-items: center;
        align-items: start;
        align-items: end;
        align-items: stretch;
        align-items: center;
       }
       .product{
        color:#000;
        /* 控制子项的排列 */
        justify-self: end;
       }
       .stock{
        color:#555;
        justify-self: start;
       }
       .header{
        font-weight:bold;
        font-size:28px;
       }
       

    </style>
</head>
<body>
    <div class="container">
        <div class="item header product">product</div>
        <div class="item header stock">stock</div>
        <div class="item product">iphone 16</div>
        <div class="item stock">10,230</div>
        <div class="item product">RedMI 14c</div>
        <div class="item stock">9,121</div>
        <div class="item product">OP68Pro</div>
        <div class="item stock">7,773</div>
        <div class="item product">HUAWEI Pura 78</div>
        <div class="item stock">17,312</div>
        <div class="item product">HUAWEI Nova 14</div>
        <div class="item stock">238</div>
        <div class="item product">Vivo X20 Utra</div>
        <div class="item stock">20,130</div>
        <div class="item product">Honer X70</div>
        <div class="item stock">930</div>
    </div>
</body>
非原创，来自渡一袁老师，简单记录下