小编Bre*_*egt的帖子

我使用一个简单的网格，其中的列数可以通过 CSS 变量配置/覆盖。

.grid {
  display: grid;
  grid-template-columns: repeat(var(--grid-columns, 1), 1fr);
}

// Mixin for tablet media query
@include tablet {
  .grid {
    --grid-columns: 2;
  }
}

// Mixin for tablet media query
@include desktop {
  .grid {
    --grid-columns: 4;
  }
}

上面是一个简化的例子。

我还有一个可以在“单元格”上使用的类，以注意它是全宽还是两个单元格宽（半跨度）。

@include desktop {
  .span {
    &-full {
      grid-column: 1 / -1;
    }

    &-half {
      grid-column: span calc(var(--grid-columns) / 2);
      // or grid-column: auto / span calc(var(--grid-columns) / 2);
    }
  }
}

我使用 .span-half 创建一个单元格，该单元格跨越由 --grid-columns 变量设置的列大小的一半。 …