scss 内联块网格

Posted 2021-05-17

/*
    grid
*/

.grid-row {
    font-size: 0;
    letter-spacing: -0.4em;

    // add gutter padding
    @for $i from 1 to 10 {
        $step: $i * 5;
        &.grid-row-gutter-#{$step} {
            [class^="grid-col-"] {
                padding: 0 ($step * 1px);
            }
        }
    }

    // delete edge padding
    &.grid-row-fit-edge {
        [class^="grid-col-"] {
            &:first-of-type {
                padding-left: 0;
            }

            &:last-of-type {
                padding-right: 0;
            }
        }
    }
}

@for $i from 1 to 13 {
   @for $j from 1 to 13{
    @if $i >= $j {
      .grid-col-#{$j}-#{$i} {
        display: inline-block;
        width: percentage($j / $i);
        vertical-align: top;
        letter-spacing: normal;
        font-size: 14px;
        font-size: 1rem;
      }
    }
  }
}