适用于移动端块状入口门板布局，多行

应该更适用于PC端，自适应浏览器，拉伸缩小，布局改变

一、效果

二、示例

1、示例1

第一种示例只需要在父级写grid布局即可
列2端对齐、中间列居中
中间行边距设值

  • html
  • 外层css
.parent{
    display: grid;
    grid-template: auto auto auto / auto auto auto;
    grid-row-gap: 36rpx;
    
    justify-content: space-between;
    justify-items: center;
    
    align-items: center;
}
  • 内层css

2、示例2

第二种示例父级、子级都要写grid布局
列间距设值
行间距设值
第一个子项占2列

  • 外层css
parent{
    display: grid;
    grid-template: auto auto auto / auto auto auto;
    grid-row-gap: 20rpx;
    grid-column-gap: 20rpx;
}
  • 内层css
child-item {
    ...
    &:first-child {
        grid-column-start: 1;
        grid-column-end: 3;
    }
}

三、PC端示例

不止布局在自适应，单个item也在自适应(flex等自适应方案难做到)


PC端掘金博客
minmax属性

另外单位：1fr
等同于flex布局的flex: 1;

如有建议和疑问可联系
QQ：1017386624
邮箱：1017386624@qq.com