Продолжайте изменять размер Div на определенной шкале размера окна

Question

Итак, пока я кодировал в некоторых медиа-карьерах для своего проекта галереи изображений для начинающих. Я заметил, что мне нужно уменьшать div width, который содержит мой тег img, на 10px каждый раз, когда размер окна уменьшается на 30px, чтобы иметь 3 изображения в одной строке.

Мне было интересно, вместо того, чтобы вводить все это, был ли способ взаимодействовать с CSS и устанавливать способ проверять это каждый раз в цикле. Я не понимаю, как я могу поделиться своей попыткой в ​​этой ситуации.

Хотя я попросил у Google некоторые ответы и из того, что я понимаю, я думаю, что это могло бы быть возможно с препроцессором CSS, таким как SaSSно, честно говоря, я ничего не знаю, и только базовые знания о JavaScript.

Так что я не понимаю, как я могу поделиться своей попыткой в ​​этой ситуации. Я, вероятно, не знаю правильный синтаксис или не смог его найти, так что для меня это больше похоже на теоретический вопрос.

Answer 1

Если я прав, вы хотите поместить 3 изображения в ряд, не исправляя грязный код. Вы можете использовать сетку, чтобы устранить любые проблемы.

Вы можете увеличить размер зазора, изменив grid-gap

.grid-container{
  display: grid;
  grid-template-columns: repeat( 3, minmax(auto, 1fr) );
  grid-gap: 10px;
}

<div class="grid-container">
  <div style="background: lightblue; height: 100px;"></div>
  <div style="background: lightblue; height: 100px;"></div>
  <div style="background: lightblue; height: 100px;"></div>
</div>