css里display:grid

display:flex我们都很熟悉了，今天偶然看到到了一个新的属性，display:grid，很陌生，百度查了一下，它-CSS Grid布局 （又名"网格"），是一个基于二维网格布局的系统，主要目的是改变我们基于网格设计的用户接口方式。不过目前还未普及，先学着呗！

主要属性：

grid-template-columns：//竖向排列
grid-template-rows：//横向排列

直接上🌰-自适应九宫格：

<style type="text/css">
        .content {
          padding: 10px;
          display: grid;
          grid-template-columns: auto auto auto;/*有几列，每列有多大*/
          grid-template-rows: auto auto auto; /*有几行，每行有多大*/
          grid-template-rows: auto 1fr auto;/*每一份（1fr）是网格容器宽度的几之一*/
          height: 780px;  
          background-color: #000;
          grid-gap: 10px;/*上下左右间隔*/
        }
        .b {
          background-color: red;
        }
      </style>
<div class="content">
                <div class="box">1</div>
                <div class="box">2</div>
                <div class="box">3</div>
                <div class="box">4</div>
                <div class="box">5</div>
                <div class="box">6</div>
                <div class="box">7</div>
                <div class="box">8</div>
                <div class="box">9</div>
</div>

image.png

常见属性：

• justify-items：
  start：将内容对齐到网格区域(grid area)的左侧
  end：将内容对齐到网格区域的右侧
  center：将内容对齐到网格区域的中间（水平居中）
  stretch：填满网格区域宽度（默认值）
• align-items：
  start：将内容对齐到网格区域(grid area)的顶部
  end：将内容对齐到网格区域的底部
  center：将内容对齐到网格区域的中间（垂直居中）
  stretch：填满网格区域高度（默认值）
• justify-items：
  start：将网格对齐到 网格容器(grid container) 的左边
  end：将网格对齐到 网格容器 的右边
  center：将网格对齐到 网格容器 的中间（水平居中）
  stretch：调整 网格项(grid items) 的宽度，允许该网格填充满整个 网格容器 的宽度
  space-around：在每个网格项之间放置一个均匀的空间，左右两端放置一半的空间
  space-between：在每个网格项之间放置一个均匀的空间，左右两端没有空间
  space-evenly：在每个栅格项目之间放置一个均匀的空间，左右两端放置一个均匀的空间
• align-content：
  start：将网格对齐到 网格容器(grid container) 的顶部
  end：将网格对齐到 网格容器 的底部
  center：将网格对齐到 网格容器 的中间（垂直居中）
  stretch：调整 网格项(grid items) 的高度，允许该网格填充满整个 网格容器 的高度
  space-around：在每个网格项之间放置一个均匀的空间，上下两端放置一半的空间
  space-between：在每个网格项之间放置一个均匀的空间，上下两端没有空间
  space-evenly：在每个栅格项目之间放置一个均匀的空间，上下两端放置一个均匀的空间

案例：使用grid布局实现sticky footer

<style>
.wrap{
            min-height: 100%;
            display: grid;
            grid-template-rows: auto 1fr auto;
        }
        .wrap div{
            border: 1px solid #000;
            min-height: 100px;
        }
</style>
<div class="wrap">
        <div class="header">header</div>
        <div class="content">content</div>
        <div class="footer">footer</div>
</div>

image.png

本文参考
强大的display:grid