不用flex改成grid,div之间只加内边框

之前我习惯于flex布局,但每次遇到产品设计内边框的时候,总得用些特殊的CSS,把最边上的给排除,挺麻烦的。

直到发现了grid居然可以只加内框(当然,外边框也可以加)

不用flex改成grid,div之间只加内边框_第1张图片

于是,像上面这种场景,不用再第三个、第六个取消border-right,第四到第六个取消border-bottom,直接grid搞定:

.list {
  display: grid;
  grid: auto / auto auto auto;
  background-color: #eee;
  grid-gap: 1px;

  >div {
    background-color: #fff;
  }
}

 

你可能感兴趣的:(css,前端,html)