• grid layout


    <div class="wrapper">
    <div class="box a">A</div>
    <div class="box b">B</div>
    <div class="box c">C</div>
    <div class="box d">D</div>
    <div class="box e">E</div>
    <div class="box f">F</div>
    <div class="box g">G</div>
    <div class="box h">H</div>
    <div class="box i">I</div>
    <div class="box j">J</div>
    </div>

    css:

    .wrapper {
    display: grid;
    grid-template-columns: 100px 10px 100px 10px 100px 10px 100px;
    grid-template-rows: auto 10px auto 10px auto;
    }
    .a{
    grid-area: 1 / 1 / 2 / 2;
    }
    .b {
    grid-area: 1 / 3 / 2 /4;
    }
    .c { 
    grid-area: 1 / 5 / 2 / 6;
    }
    .d { 
    grid-area: 1 / 7 / 2 / 8;
    }
    .e { 
    grid-area: 3 / 1 / 4 / 2;
    }
    .f {
    grid-area: 3 / 3 / 4 / 4;
    }
    .g {
    grid-area: 3 / 5 / 4 / 6;
    }
    .h {
    grid-area: 3 / 7 / 4 / 8;
    }
    .i {
    grid-area: 5 / 1 / 6 / 2;
    }
    .j {
    grid-area: 5 / 3 / 6 / 4;
    }</font>
    </font>
    grid-column-start: 1;
    grid-column-end: 2; 
    grid-row-start: 1;
    grid-row-end: 2;
    grid-column: 3 / 4; 
    grid-row: 5 / 6;
  • 相关阅读:
    JNUOJ 1187
    JNUOJ 1184
    HDU 4848
    HDU 4849
    哈夫曼树和哈弗曼编码小记
    HDU 5726
    POJ 3368 & UVA 11235
    2016江苏省CPC省赛 I
    POJ 3928
    POJ 3067
  • 原文地址:https://www.cnblogs.com/danranysy/p/4736814.html
Copyright © 2020-2023  润新知