scss mixin的gridify.scss

Posted 2021-05-18

// Make elements align in a grid, regardless of height
// Apply to elements you want as grid items
// $cols = how many columns you want
// $margin-right = margin-right, should be in percent
// $ie8-height = an explicit height for all the elements, "off" by default, only applied to IE
@mixin gridify($cols, $margin-right: 5%, $ie8-height: auto) {
  // Math for widths, margins, and clears
  $width: (100% / $cols) - $margin-right + ($margin-right / $cols);
  $ie-width: (100% / $cols) - $margin-right;
  $clearnum: $cols + 1;

  // Default styles for each grid item
  clear: none;
  display: block;
  float: left;
  margin-right: $margin-right;
  width: $width;

  // Resetting from any previous uses of this mixin
  &:nth-child(odd),
  &:nth-child(even) {
    clear: none;
    margin-right: $margin-right;
  }

  // Clear the rows
  &:nth-child(#{$cols}n+#{$clearnum}) {
    clear: left;
  }
  // Remove margin-right from last column
  &:nth-child(#{$cols}n+#{$cols}) {
    margin-right: 0;
  }

  // Fix for IE8 since it can't handle :nth-child()
  .lt-ie9 & {
    height: $ie8-height;
    width: $ie-width;
  }
}