Можно ли удалить сетку-шаблон-столбец с помощью миксинов? - PullRequest
Новая
       30

Можно ли удалить сетку-шаблон-столбец с помощью миксинов?

0 голосов
/ 20 июня 2019

Я делаю точку останова (360x640) на своей странице и хочу удалить один столбец из шаблона сетки и добавить одну строку.У меня есть 3 столбца и 3 строки - я хочу, чтобы 2 столбца и 4 строки.Я добавил mixin, который должен делать работу, но он только добавил строку, но не удаляет столбец.Вы видите, где проблема?Можно ли вообще удалять вещи с помощью миксинов?

Мой 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;
      }
    }
  }
}

1 Ответ

0 голосов
/ 25 июня 2019

Насколько мне известно, вы можете переопределить стиль с помощью @ mixin , но не удаляйте его полностью, чтобы приблизиться к нему, вы можете установить стиль на unset , но я не думаю, что это так что тебе нужно здесь.

попробуйте добавить это к вашему классу count-column, оно должно соответствовать количеству столбцов и строк по размеру окна. 

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

Вы можете прочитать об этом здесь: https://css -tricks.com / авто-проклейки-колонки-CSS-сетки автоматического заполнения VS-Автоподстройка /

...