如何使网格中的列响应

Question

我正在scss中建立网格，就像Bootstarp中那样。谁能告诉我如何使它具有响应性？我尝试了很多方法，但没有用。

     //Grid.scss



    // Container width
       $width: 100%;

    // Array of columns
       $cols: (
         "wide": 16,
         "base": 12,
         "small": 8
       );


    // Grid container 
       .grid {
         margin: 0 auto;
         width: $width;
         display: grid;
         grid-gap: 1vw;
         grid-template-columns: repeat(auto-fill, minmax(350px, 1fr));

         &:not(last-of-type) {
            margin-bottom: 1vw;
         }

     @each $col, $i in $cols {
         &.grid_#{$i} {
          grid-template-columns: repeat($i, 1fr);

      .col {
        color: white;
        padding: .1vw;
        //background: gray;
        text-align: center;
        font-size: 2vw;
        &:nth-child(even) {
          //background: blueviolet;
        }

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

  

所以我可以使用下面的代码来形成网格

<div class="grid grid_16">
  <div class="col col-1">01</div>
</div>

虽然生成的网格很好，但只需使其具有响应性

Answer 1

删除grid-template-columns: repeat($i, 1fr);

我用代码笔（https://codepen.io/omergal/pen/yLBJzOX）

书写

 //Grid.scss
    // Container width
       $width: 100%;
    // Array of columns
       $cols: (
         "wide": 16,
         "base": 12,
         "small": 8
       );
    // Grid container 
       .grid {
         background-color: #9ac4e8;
         margin: 0 auto;
         width: $width;
         display: grid;
         grid-gap: 1vw;
         grid-template-columns: repeat(auto-fill, minmax(350px, 1fr));

         &:not(last-of-type) {
            margin-bottom: 1vw;
         }

     @each $col, $i in $cols {
         &.grid_#{$i} {
          // grid-template-columns: repeat($i, 1fr);

      .col {
        height: 50px;
        background-color: #2182e8;
        color: white;
        padding: .1vw;
        //background: gray;
        text-align: center;
        font-size: 2vw;
        &:nth-child(even) {
          //background: blueviolet;
        }

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

<div class="grid grid_16">
  <div class="col col-1">01</div>
  <div class="col">02</div>
  <div class="col">03</div>
  <div class="col">04</div>
  <div class="col">05</div>
  <div class="col">06</div>
  <div class="col">07</div>
  <div class="col">08</div>
  <div class="col">09</div>
  <div class="col">10</div>
  <div class="col">11</div>
  <div class="col">12</div>
  <div class="col">13</div>
  <div class="col">14</div>
  <div class="col">15</div>
  <div class="col">16</div>
  <div class="col">17</div>
</div>