Блог

Адаптивная ширина и высота для группы квадратов

Я создаю сетку из квадратов 1: 1. Пользователь может продолжать добавлять квадраты, и я хочу, чтобы размер квадратов сохранялся в их соотношении сторон, но изменялся соответствующим образом. Сложная часть в том, что я хочу, чтобы квадрат всегда был виден на странице, то есть чтобы не было прокрутки, а веб-страница реагировала на ширину и высоту.

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

 setInterval(() => {
  console.log(document.getElementsByClassName('square-container')[0]);
  document.getElementsByClassName('square-container')[0].innerHTML  = (" <div class = 'square' > < /div>");
}, 1000);  

 .square-container {
  display: flex;
  flex-wrap: wrap;
}

.square {
  position: relative;
  flex-basis: calc(33.333% - 10px);
  margin: 5px;
  box-sizing: border-box;
  background: red;
  transition: background 1s;
}

.square::before {
  content: "";
  display: block;
  padding-top: 100%;
}  

 <div class="square-container">
  <div class="square"></div>
</div>  

Я не использую никаких библиотек пользовательского интерфейса, таких как bootstrap, только ванильный html, css и javascript.

Одним из способов было бы автоматически прокручивать экран вниз по мере добавления каждого квадрата. Я добавил эту строку window.scrollTo(0,document.body.scrollHeight); в ваш код, который заставляет его прокручиваться вниз при создании новой строки.

 setInterval(() => {
  //console.log(document.getElementsByClassName('square-container')[0]);
  document.getElementsByClassName('square-container')[0].innerHTML  = (" <div class = 'square' > < /div>");
  window.scrollTo(0,document.body.scrollHeight);
}, 1000);  

 .square-container {
  display: flex;
  flex-wrap: wrap;
}

.square {
  position: relative;
  flex-basis: calc(33.333% - 10px);
  margin: 5px;
  box-sizing: border-box;
  background: red;
  transition: background 1s;
}

.square::before {
  content: "";
  display: block;
  padding-top: 100%;
}  

 <div class="square-container">
  <div class="square"></div>
</div>  

В противном случае, если вы имели в виду, что хотите изменить размер квадратов так, чтобы все они соответствовали высоте окна, это было бы по-другому. Я огляделся, чтобы посмотреть, можно ли сделать что-то подобное, но не смог понять это.