网格布局

最近看张鑫旭前辈的博客,感觉又找回最开始学习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>