CSS基础测试15 - 网格状布局

[JaimeCheng]

题目：

原issue

回答：

/* 我的回答 7分 */
.grid-box {
  display: grid;
  width: fit-content;
  margin: 20px;
  background: #5f5750;
  list-style: none;
  grid-template-columns: repeat(3, minmax(120px, 1fr));
  overflow: hidden;
}
.grid-box a {
  color: #fff;
  font-size: 16px;
  padding: 20px 0;
  display: block;
  text-decoration: none;
}
.grid-box li {
  text-align: center;
  padding: 10px;
  position: relative;
}
.grid-box li:before {
  content: "";
  position: absolute;
  top: 10px;
  right: -1px;
  width: 1px;
  height: calc(100% - 20px);
  background-color: #9B9692;
}
.grid-box li:after {
  content: "";
  position: absolute;
  bottom: -1px;
  left: 10px;
  width: calc(100% - 20px);
  height: 1px;
  background-color: #9B9692;
}

<ul class="grid-box">
  <li><a href=""><i class="iconfont"></i>选购手机</a></li>
  <li><a href=""><i class="iconfont"></i>企业团购</a></li>
  <li><a href=""><i class="iconfont"></i>一元活动</a></li>
  <li><a href=""><i class="iconfont"></i>限时秒杀</a></li>
  <li><a href=""><i class="iconfont"></i>以旧换新</a></li>
  <li><a href=""><i class="iconfont"></i>话费充值</a></li>
</ul>

优秀回答： grid | flex | @media | box-shadow

总结：

1. 考虑健壮性：不修改css的情况下html结构能按需自适应；
2. 线的绘制，多种方案，不要拘泥与border一种。

> 在线demo <

[JaimeCheng]

zxx: 本期要点

1. grid-template-columns: repeat(auto-fill, minmax(150px, 1fr))。auto-fill：自动填充（列表个数动态），minmax()是一个只用在grid布局中的函数，尺寸范围，最小150px，最大1整个格子填满整行。
2. flex实现了类似的效果，子项：flex: 1 1 33%; min-width: 140px; 可以添加的额外的占位，这样最后的比例都是一致的。
3. 使用查询语句@media screen and (min-width: 600px) {} 没有任何问题，兼容IE9+，更普世的实现，PC移动通用。也可以和flex布局结合（IE10+）。
4. 线的隐藏。流派1：宽高个数固定的实现使用树结构伪类匹配，准确匹配需要绘制分隔线的元素。流派2：隐藏，overflow隐藏，还有一种是实色覆盖（适合容易不能overflow:hidden的场景）。
5. 线的绘制。4种。1. 伪元素宽高1像素填色，或者1px边框。2. border+clip-path；3. border-radius > border；4. box-shadow负值，box-shadow: 16px 0 0 -15px;
6. inset: 1px ==> left: 1px; top: 1px; right: 1px; bottom: 1px;