Как сделать так, чтобы отступ между колонками не менялся?

Question

[Raul Abdullin]

Делаю верстку на гридах. Задача: сделать блок с преимуществами состоящий из 3х колонок с отступом между колонками 30px и максимальной шириной каждой колонки 300 пикселей, т.е. на больших экранах данный блок с преимуществами должен быть по центру экрана компьютера. В gap я прописал 30px, в ширине каждой колонки задал значение max width 300px. Но почему-то на больших экранах gap пропорционально увеличивается и становится в разы больше, чем 30px, а мне нужен фиксированный. Подскажите как это сделать?

Answer 1

[Сергей delphinpro]

.grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 30px;
  max-width: calc(300px * 3 + 30px * 2);
  margin: auto;
}

Comments

[Raul Abdullin]

спасибо огромное