Question

我正在页面上创建一个断点（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;
      }
    }
  }
}

Answer 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/

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

1 个答案: