宫格布局

1.before|after

** 效果**

image.png

思路：算出每个的宽；before偏移一个item的宽，给一个宽度，然后正好居中，然后给左右边框，再给item下边框就好
代码：

<template>
  <div>
    <div class="hot">
      <div class="hot-title">热门城市</div>
      <ul class="hot-list">
        <li class="hot-li">北京</li>
        <li class="hot-li">北京</li>
        <li class="hot-li">北京</li>
        <li class="hot-li">北京</li>
        <li class="hot-li">北京</li>
        <li class="hot-li">北京</li>
        <li class="hot-li">北京</li>
        <li class="hot-li">北京</li>
        <li class="hot-li">北京</li>
      </ul>
      <div class="hot-title">热门城市</div>
    </div>
  </div>
</template>
<script>
export default {};
</script>
<style lang='scss' scoped>
.hot-title {
  font-size: 0.26rem;
  color: #212121;
  padding: 0.3rem;
  background: #dbdcdc36;
}
.hot-list::before {
  content: "";
  position: absolute;
  height: 100%;
  width: 33.33%;
  left: 33.33%;
  border-right: solid #ddd 0.02rem;
  border-left: solid #ddd 0.02rem;
}
.hot-list {
  overflow: hidden;
  position: relative;
  .hot-li {
    float: left;
    width: 33.33%;
    height: 0.9rem;
    line-height: 0.9rem;
    text-align: center;
    border-bottom: solid #ddd 0.02rem;
  }
}
  .hot-list .hot-li:nth-last-child(-n+3){
  border-bottom: solid #fff 0.02rem !important;
}
</style>

2.border

image.png

代码：

<template>
  <div>
    <div class="citylist-header">A</div>
    <ul class="citylist-grid">
      <li class="li hidden1">阿富汗</li>
      <li class="li hidden1">阿富汗</li>
      <li class="li hidden1">阿富汗</li>
      <li class="li hidden1">阿富汗</li>
      <li class="li hidden1">阿富汗</li>
      <li class="li hidden1">阿富汗</li>
    </ul>
  </div>
</template>
<script>
export default {};
</script>
<style  lang='scss' scoped>
.citylist-header {
  background: #dbdcdc36;
  padding: 0.3rem;
}
.citylist-grid {
  overflow: hidden;
  .li {
   box-sizing: border-box;
    line-height: 0.9rem;
    text-align: center;
    width: 25%;
    height: 0.9rem;
    float: left;
    border-bottom: 0.02rem solid #ddd;
    border-right: 0.02rem solid #ddd;
      &:nth-last-child(-n+2) {
      border-bottom: none;
    }
    &:nth-child(4n) {
      border-right: none;
    }
  }

}
</style>