网格布局

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

网格布局

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

基本概念

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

基本使用

demo1

  • 效果：
  • 说明：特殊的布局
    <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

  • 效果：
  • 说明：一个九宫格，里面每个单元格之间的间距都是一样的
    <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>