flexible CSS grid tiles移除维持宽高比SVG的替代实现方案

以下两种方案均可在不改动原有grid布局逻辑、移除tile内SVG的前提下实现1:1宽高比，兼容性都优于aspect-ratio属性：

方案1：伪元素padding兼容方案 #

这是目前行业内使用最广泛的宽高比实现方案，兼容性可覆盖IE9及以上所有浏览器，适配所有场景。
实现原理：CSS中padding的百分比取值默认相对于父元素的宽度计算，用100%的上padding即可撑起和宽度相等的高度。
修改后的CSS代码如下：

body>div {
  display: grid;
  grid-gap: 10px;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  min-width: 700px
}

div div {
  background: red;
  position: relative;
}

/* 新增伪元素撑起1:1高度 */
div div::before {
  content: "";
  display: block;
  padding-top: 100%;
}

/* 若tile内需要放置内容，可添加以下规则让内容占满tile区域，无内容可省略 */
div div > * {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

HTML部分直接删除所有tile内部的<svg viewBox="0 0 1 1"></svg>标签即可，其余结构不需要改动。

方案2：Grid行高匹配方案 #

如果不需要兼容IE10及更低版本的浏览器，可直接通过grid自身的行配置实现，代码更简洁，不需要额外添加伪元素。
实现原理：grid的grid-auto-rows属性设置为和列宽规则一致的minmax(200px, 1fr)，即可让行高和列宽自动保持同步，实现正方形效果。
修改后的CSS代码如下：

body>div {
  display: grid;
  grid-gap: 10px;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  grid-auto-rows: minmax(200px, 1fr); /* 新增行配置，和列宽规则保持一致 */
  min-width: 700px
}

div div {
  background: red;
}

HTML部分同样直接删除所有tile内的SVG标签即可。

内容的提问来源于stack exchange，提问作者Conkuist