CSS基础测试15：网格导航布局

[wingmeng]

题目：

我的回答：

> 在线 Demo <

html {font-size: calc(16 / 375 * 100vw);}

.grid-nav {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  overflow: hidden;  /* 隐藏溢出的 box-shadow */
  background: #524940;
}

.grid-nav-item {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  padding: calc((100% - 1rem * 1.15 - 2rem - .5rem) / 2) 0;  /* 正方形容器 */
  line-height: 1.15;
  color: #f7f1ee;
  box-shadow: 16px 0 0 -15px rgba(255, 255, 255, .5),  /* 单侧投影 */
              0 16px 0 -15px rgba(255, 255, 255, .5);
  text-decoration: none;
}

.grid-nav-item > .iconfont {
  margin-bottom: .5rem;
  font-size: 2rem;
  line-height: 1;
}

<nav class="grid-nav">
  <a href="#" class="grid-nav-item">
    <i class="iconfont icon-clock" aria-hidden="true"></i>
    <span>商品秒杀</span>
  </a>
  <a href="#" class="grid-nav-item">
    <i class="iconfont icon-business" aria-hidden="true"></i>
    <span>企业团购</span>
  </a>
  <a href="#" class="grid-nav-item">
    <i class="iconfont icon-private" aria-hidden="true"></i>
    <span>私码通道</span>
  </a>
  <a href="#" class="grid-nav-item">
    <i class="iconfont icon-sim-card" aria-hidden="true"></i>
    <span>铁粉卡</span>
  </a>
  <a href="#" class="grid-nav-item">
    <i class="iconfont icon-exchange" aria-hidden="true"></i>
    <span>以旧换新</span>
  </a>
  <a href="#" class="grid-nav-item">
    <i class="iconfont icon-phone-bill" aria-hidden="true"></i>
    <span>话费充值</span>
  </a>
</nav>