【万能CSS】 N 宫格自适应布局、0.5像素的线等

宫格布局第一种：
.template-list {

            width: 100%;
            border-radius: 4px;
            height: 202px;
         
            display: grid;
            grid-template-columns: repeat(4, 94px);
            gap: 8px;
            overflow-y: scroll;
            overflow-x: hidden;
        }

宫格布局第二种：
.content {
    display: flex;
    flex-flow: row wrap;
    align-content: flex-start;
    width: 93.4%;
    margin:0 auto;
    height: 520px;
    overflow-y: auto;
  }

.one {
    flex: 0 0 32.74%;
    height: 174px;
    margin-top: 8px;
    margin-right: 0.8%;
}

.one:nth-child(3n) {
    margin-right: 0;
  }

 

0.5像素的线

.divider {
  height: 1px;
  transform: scaleY(0.5);
  transform-origin: top;
  margin-bottom: -0.5px;
  background-color: gray;
}

 

transform 设置后z-index 失效

非transform 等 元素 设置z-index:auto 取消创建上下文

创建上下文：

• 根元素(HTML)
• 设置了position为absolute或relative，且z-index不是auto的元素
• 设置了z-index，且不为auto的流动元素
• 设置了opacity，且不为1的元素
• 设置了transform，且不为none的元素
• 设置了mix-blend-mode值，且不为normal的元素
• 设置了isolation 为 isolate的元素on mobile WebKit and Chrome 22+,
• 设置position为fixed的元素

transform 元素

  解决方案

1. 避免使用transform属性，改为使用margin-left:(-width/2)属性来实现元素居中；

2. 给使用transform元素的父级增加transform-style: preserve-3d;

3. 给使用了transform元素显示的设置perspective()

4. 元素里再创建一个标签，应用新标签的before伪类，设置定位，以原来的元素为基准，top、bottom、right、left为0，以充满整个容器。注意，z-index的设置与原来元素的before、after中的z-index有关，必须比它的值大。

5. 使用pointer-events属性做穿透处理。

 

transform可以通过它的translateZ() 来改变元素的层叠顺序，其值越大，越在顶层，离屏幕越近。不过通过transform:translateZ() 改变元素z轴的层级，

必须在元素的父元素中显示的设置transform-style:preserver-3d 或者在transform中显示的设置perspective()