动手

在common.less中添加

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

在big.less中添加

  2. .col-lg-12{
  3.     grid-column: span 12;
  4. }
  5. .col-lg-11{
  6.     grid-column: span 11;
  7. }
  8. .col-lg-10{
  9.     grid-column: span 10;
  10. }
  11. .col-lg-9{
  12.     grid-column: span 9;
  13. }
  14. .col-lg-8{
  15.     grid-column: span 8;
  16. }
  17. .col-lg-7{
  18.     grid-column: span 7;
  19. }
  20. .col-lg-6{
  21.     grid-column: span 6;
  22. }
  23. .col-lg-5{
  24.     grid-column: span 5;
  25. }
  26. .col-lg-4{
  27.     grid-column: span 4;
  28. }
  29. .col-lg-3{
  30.     grid-column: span 3;
  31. }
  32. .col-lg-2{
  33.     grid-column: span 2;
  34. }
  35. .col-lg-1{
  36.     grid-column: span 1;
  37. }

在medium.less:

  2. .col-md-12{
  3.     grid-column: span 12;
  4. }
  5. .col-md-11{
  6.     grid-column: span 11;
  7. }
  8. .col-md-10{
  9.     grid-column: span 10;
  10. }
  11. .col-md-9{
  12.     grid-column: span 9;
  13. }
  14. .col-md-8{
  15.     grid-column: span 8;
  16. }
  17. .col-md-7{
  18.     grid-column: span 7;
  19. }
  20. .col-md-6{
  21.     grid-column: span 6;
  22. }
  23. .col-md-5{
  24.     grid-column: span 5;
  25. }
  26. .col-md-4{
  27.     grid-column: span 4;
  28. }
  29. .col-md-3{
  30.     grid-column: span 3;
  31. }
  32. .col-md-2{
  33.     grid-column: span 2;
  34. }
  35. .col-md-1{
  36.     grid-column: span 1;
  37. }

就可以在index.html：

  1.     <div class="container">
  2.         <div class="row">
  3.             <div class="col-lg-4 col-md-6">a</div>
  4.             <div class="col-lg-4 col-md-6">a</div>
  5.             <div class="col-lg-4 col-md-6">a</div>
  6.         </div>
  8.     </div>

如此调用 以达到效果

同理在samll.less small-x.less中添加类似代码col-sm-n col-xx-n
想要全部都有类似的格子大小 也可以直接在common.less中定义col-n

栅格系统的目的

在后续有改动时不用再修改css直接修改调用class的名称即可
手写的目的:理解原理,以后调用库时也明白.