CSS踩坑记录

grid 自适应布局

div.r-main-content
  div.r-m-c-wrapper
    div.r-m-c-box(v-for="i in 13")

.r-main-content
  width 100%
  height calc(100% - 60px)
  .r-m-c-wrapper
    width 100%
    height 100%
    padding-bottom 5px
    overflow-y auto
    display grid
    grid-template-columns repeat(auto-fill, 32.5%)
    //grid-template-rows repeat(auto-fill, 31%)
    grid-auto-rows:31%;
    grid-row-gap: 14px;
    justify-content space-between
    justify-items center
    align-items center
    .r-m-c-box
      width 100%
      height 100%
      border: 1px solid #EEEEEE;

效果

全局美化滚动条样式

/*滚动条凹槽的颜色，还可以设置边框属性 */
*::-webkit-scrollbar-track-piece {
	background-color:#f8f8f8;
	-webkit-border-radius: 2em;
	-moz-border-radius: 2em;
	border-radius: 2em;
}
/*滚动条的宽度*/
*::-webkit-scrollbar {
	width:9px;
}
/*滚动条的设置*/
*::-webkit-scrollbar-thumb {
	background-color:#dddddd;
	background-clip:padding-box;
	-webkit-border-radius: 2em;
	-moz-border-radius: 2em;
	border-radius: 2em;
}
/*滚动条鼠标移上去*/
*::-webkit-scrollbar-thumb:hover {
	background-color:#bbb;
}

![image.png](https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/f48f98976ad0403e9a57e7ef75553bc0~tplv-k3u1fbpfcp-watermark.image?)

效果