grid+scss实现bootstrap栅格系统

grid + scss 20行代码实现 bootstrap 栅格系统

vscode插件

html文件的热加载

sass编译

栅格核心

style.scss

.row {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  gap: 10px;
}

@media screen and (max-width:768px) {
  @import "./sm.scss";
}

@media screen and (min-width:768px) and (max-width:1000px) {
  @import "./md.scss";
}

@media screen and (min-width:1000px) {
  @import "./lg.scss";
}

sm.scss

@for $i from 1 through 12 {
  .col-md-#{$i} {
    grid-column: span #{$i};
  }
}

md.scss

@for $i from 1 through 12 {
  .col-md-#{$i} {
    grid-column: span #{$i};
  }
}

lg.scss

@for $i from 1 through 12 {
  .col-md-#{$i} {
    grid-column: span #{$i};
  }
}

完整程序

https://github.com/withwz/grid-with-grid…

转：
https://www.yuque.com/wuzhao/kb/bogxdw