网格布局

最近看张鑫旭前辈的博客,感觉又找回最开始学习HTML&CSS时候的感觉,好玩有趣;然后就想起了一直听过但没写过的网格布局,记录一下。

网格布局

  • 和弹性盒子(flex)一样官方提供的方便布局的新属性 display:grid
  • 如名字一样,开启该属性后会将目标dom设置成由一个一个单元格组成的一个布局容器

基本概念

  • 容器:开启了grid的dom;内部由数个单元格组成
  • 行:单元格水平排列
  • 列:单元格纵向排列
  • 网格线:容器下的每个项目都分布在每个单元格中,开发这模式可以看到该线

基本使用

demo1

  • 效果:
  • 说明:特殊的布局
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    29
    30
    31
    32
    33
    34
    35
    36
    37
    38
    39
    40
    <style>
    #app {
    width: 500px;
    height: 500px;
    margin: 0 auto;
    /* 开启网格布其 */
    display: grid;
    /* 定义单元格名称以及在容器中的分布 */
    grid-template-areas: 'a a b''a a c''d e c';
    }
    #app>div:nth-child(1) {
    /* 定义当前单元格在容器中的分布区域 */
    grid-area: a;
    }

    #app>div:nth-child(2) {
    grid-area: b;
    }

    #app>div:nth-child(3) {
    grid-area: c;
    }

    #app>div:nth-child(4) {
    grid-area: d;
    }

    #app>div:nth-child(5) {
    grid-area: e;
    }
    </style>
    <body>
    <div id="app">
    <div style="background-color: lightblue;">1</div>
    <div style="background-color: lightcoral;">2</div>
    <div style="background-color: lightgoldenrodyellow;">3</div>
    <div style="background-color: lightgrey;">4</div>
    <div style="background-color: lightsalmon;">5</div>
    </div>
    </body>

demo2

  • 效果:
  • 说明:一个九宫格,里面每个单元格之间的间距都是一样的
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    29
    30
    31
    32
    33
    34
    35
    36
    37
    38
    <style>
    #app {
    width: 420px;
    height: 420px;
    padding: 20px;
    margin: 0 auto;
    /* 开启grid */
    display: grid;
    /* 设置有几行 每一行的宽度 */
    /* repeat是提供的一个方便书写的函数 第一个参数为设置几行(列)第二个参数为具体的值 */
    grid-template-rows: repeat(3, 140px);
    /* 同理 列 */
    grid-template-columns: repeat(3, 140px);
    /* 设置单元格内的元素排列方式 和flex类似 */
    align-items: center;
    border: 1px solid lightsalmon;
    }

    #app>div {
    width: 100px;
    height: 100px;
    margin: 0 auto;
    background-color: lightsalmon;
    }
    </style>
    <body>
    <div id="app">
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    </div>
    </body>