ベンド加工グリッドの練習

13453 ワード
テキストリンク
HTML
<body>
    <section>
        <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>
        <div class="pay-container">
            <div class="pay-item">1</div>
            <div class="pay-item">2</div>
            <div class="pay-item">3</div>
            <div class="pay-item">4</div>
            <div class="pay-item">5</div>
            <div class="pay-item">6</div>
        </div>
    </section>
</body>
CSS
 <style>
        section{
            width: 360px;
            height: 545px;
            background-color: skyblue;
            display: inline-block;
        }

        .container{
            display: grid;
            grid-template-rows: repeat(2,130px);
            grid-template-columns: repeat(3,94px) ;
            grid-gap: 12px;
            margin: 31px 27px 0;
            background-color: blue;
        }

        .item{
            background-color: white;
        }

        .pay-container{
            display: grid;
            grid-template-rows: 32px 32px 106px ;
            grid-template-columns: repeat(3, 94px);
            grid-gap: 12px;
            margin: 20px 27px 0px;
            background-color: blue;
        }

        .pay-item{
            background-color: white;
        }

        .pay-item:nth-child(1){
            grid-column: 1/3;
        }

        .pay-item:nth-child(3){
            grid-column: 1/3;
        }

        .pay-item:nth-child(5){
            grid-column: 1/3;
        }
        
        .pay-item:nth-child(6){
            grid-column: 3/4;
        }

2つのグリッドを使用する理由


両方のグリッドはgrid−gapによって12 pxに同期した.
グリッド間の間隔は20 px!
メッシュで一番難しいのはrow column混同です^.^
row columnはいつおなじみですか?
コードオーバーライド率テストおよびGitHub自動化統合
ReactとVue状態変化機構の違い