scss CSS网格w / Block网格回退

Posted 2021-05-17

  ul {
    @include block-grid(1);
    @include breakpoint(em(580)) {
      @include block-grid(3);
    }
  }

  @supports (display: grid) {
    ul {
      margin: 0;
      display: grid;
      grid-gap: 20px;
      grid-template-columns: repeat(1, 1fr);

      @include breakpoint(em(580)) {
        grid-template-columns: repeat(3, 1fr);
      }

      &::after {
        content: none;
      }
    }

    ul > li {
      width: auto;
      padding: 0;
      float: none;
    }
  }

  li + li {
    margin-top: 0;
  }