我可以使用 mixins 删除网格模板列吗？答案

【问题标题】：Can I remove a grid-template-column using mixins?我可以使用 mixins 删除网格模板列吗？
【发布时间】：2019-11-03 15:30:51
【问题描述】：

我正在我的页面上创建一个断点 (360x640)，我想从我的网格模板中删除一列并添加一行。我有 3 列和 3 行 - 我想要 2 列和 4 行。我添加了应该可以完成工作的mixin，但它只添加了行，没有删除列。你能看出问题出在哪里吗？一般来说，是否可以使用 mixins 删除东西？

我的html

<div class='c-counter'>

    <div class='count-column c1'>
            <img src="./images/office-block.png" alt='biurowiec'>
            <h3><span class="counter">135</h3>
                <p>lokalizacji w Polsce</p>
    </div>

    <div class='count-column c2'>
        <img src="./images/customer.png" alt='zadowolony klient'>
            <h3><span class="counter">96778</h3>
                <p>zadowolonych klientów</p>
    </div>

    <div class='count-column c3'>
            <img src="./images/work-team.png" alt='partnerzy biznesowi'>
            <h3><span class="counter">26</h3>
                <p>partnerów biznesowych</p>
    </div>

</div>

还有scss

.c-counter {
  @extend %gradient;
  @extend %shadow-component;
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  grid-template-rows: 1fr 6fr 1fr;
  .count-column {
    grid-row-start: 2;
    grid-row-end: 3;
    text-align: center;
    color: $bisque;
  }
  @media screen and (max-width: 360px) {
    grid-template-columns: 1fr 1fr;
    grid-template-rows: 1fr 6fr 6fr 1fr;
    .count-column {
      grid-row-start: 1;

      & + .c3 {
        grid-row-start: 3;
        grid-column-start: 1;
        grid-column-end: 2;
      }
    }
  }
}

【问题讨论】：

标签： css sass grid css-grid mixins

【解决方案1】：

据我所知，您可以使用 @mixin 覆盖样式，但不能完全删除它，要接近它，您可以将样式设置为 unset，但我不这么认为这就是你需要的。

尝试将此添加到您的 count-column 类中，它应该将列数和行数与窗口大小相匹配。

  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));

你可以在这里阅读： https://css-tricks.com/auto-sizing-columns-css-grid-auto-fill-vs-auto-fit/

【讨论】：