Сергей delphinpro

но не пойму, как 4 блок перенести в 3 колонку сначала?
Использовал данные стили, но 4 блок был на месте 5, и последующие не заполняли свободные ячейки

.box:nth-child(3n) {
 grid-column: span 2
}

У вас повтор идет через пять блоков. Значит должно стоять 5n – каждый пятый
Но применяться должно к 4-му блоку в этой пятерке. Значит нужно добавить смещение + 4
Итог:

.box:nth-child(5n + 4) {
    grid-column: span 2;
}

vw/vh - это довольно специфичный кейс для указания размера шрифта. Он не всегда и не везде нужен.
А вот за использование пикселей надо уже наказывать =)

Самое простое - ну хотя бы rem использовать.
Как?

Ну опять же самое простое решение, это задать для корня размер 62,5%

:root{
  font-size: 62.5%
}

Это даст вам базовый размер шрифта в 10 пикселей (1rem = 10px) и вам будет удобно, без вычислений, задавать любые размер в rem.

body { font-size: 1.4rem; /* 14px */ }
h1 { font-size: 3.2rem; /* 32px */ }

Ну логика понятна, надеюсь.

Если используете препроцессор, то можно написать функцию для пересчета пикселей в ремы и использовать ее везде.

@function toRem($px) {
  /* 16px – это значение шрифта по умолчанию в большинстве агентов */
  @return $px / 16px * 1rem;
}

body { font-size: toRem(14px); }
h1 { font-size: toRem(32px); }

const select = document.querySelector('select');// Берем первый селект на странице
select.addEventListener('change', () => {
  switch (select.value) {
    case 1:
      select.style.border = '1px solid red';
      break;
    case 2:
      select.style.border = '1px solid green';
      break;
    case 3:
      select.style.border = '1px solid blue';
      break;
  }
})

Обрабатываем все селекты

document.querySelectorAll('select').forEach(select => {
  select.addEventListener('change', () => {
    switch (select.value) {
      case 1:
        select.style.border = '1px solid red';
        break;
      case 2:
        select.style.border = '1px solid green';
        break;
      case 3:
        select.style.border = '1px solid blue';
        break;
    }
  })
})

для .container установлен min-height:100vh
вот он и становится равным 100vh

Да это же самое простое. Я по заголовку вопроса думал тут реально интересная раскладка =((

<div class="grid">
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
  ...
</div>

.grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
}
.item:nth-child(3n + 3) {
  grid-column: span 2;
}

правильно

56,25% берется не от ширины самого элемента, а от ширины его родителя.
Обычно в этом хаке используют внутренний псевдоэлемент. У него родителем как раз будет сам элемент.

.services-card:hover .card__title { color: red; }
.services-card:hover .card__text { color: green; }