Масштабирование div элементов

Question

Доброй ночи! Вынужден просить совета, т.к. сам вряд ли разберусь. Собственно, имеется следующая структура:

div {
    border: 1px solid black;
}

.window {
    width: 100%;
    height: 100%;
    position: fixed;
    top: 0;
    left: 0;
    display: flex;
    align-items: center;
    align-content: center;
    justify-content: center;
}

.items {
    display: flex;
    flex-wrap: wrap;
    flex-direction: row;
    justify-content: center;
    overflow: hidden;
    width: 628px;
    height: 632px;
    padding: 4px;
}

.items>div {
    width: 200px;
    height: 200px;
    margin: 4px;
}

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="./style.css">
    <title></title>
</head>

<body>
    
    <div class="window">
        <div class="items">
            <div class="item_1">1</div>
            <div class="item_2">2</div>
            <div class="item_3">3</div>
            <div class="item_4">4</div>
            <div class="item_5">5</div>
            <div class="item_6">6</div>
            <div class="item_7">7</div>
            <div class="item_8">8</div>
            <div class="item_9">9</div>
        </div>
    </div>

</body>

</html>

Контейнер window, за счет которого достигается позиционирование контейнера items по центру окна, сам items имеет фиксированный размер 628px на 632px. В items находится 9 div'ов, так же с фиксированными высотой и шириной в 200px. Задача выглядит следующим образом: нужно сделать так, что бы при уменьшении размеров окна браузера, items и его дочерние div'ы уменьшались, сохраняя структуру 3х3 со всеми отступами. А после, при увеличении окна браузера, наоборот, достигали максимального размера и дальше не увеличивались. Т.е. как-то так:

Разбираюсь с этой задачей 3-й день, особого прогресса нет. Удавалось сделать так, что бы все это масштабировалось по ширине и то, не совсем так, как нужно. Такие дела, буду благодарен за помощь и подсказки, в каком направлении копать.

Answer 1

Если правильно понял условия задачи, то вот ваше решений.

* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

div {
  border: 1px solid black;
}

.window {
  width: 100%;
  height: 100%;
  position: fixed;
  top: 0;
  left: 0;
  display: flex;
  align-items: center;
  justify-content: center;
}

.items {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;

  /* Базовый размер и максимальные ограничения */
  max-width: 628px;
  max-height: 632px;
  width: 100vw;
  height: 100vw;

  padding: 4px;

  /* Минимальное уменьшение размеров */
  aspect-ratio: 628 / 632;
}

.item {
  flex: 1 1 calc(33.333% - 8px);
  /* 3 элемента в ряду с учетом отступов */
  max-width: 200px;
  margin: 4px;
  aspect-ratio: 1 / 1;
  background-color: #f0f0f0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.5rem;
}

<div class="window">
  <div class="items">
    <div class="item item_1">1</div>
    <div class="item item_2">2</div>
    <div class="item item_3">3</div>
    <div class="item item_4">4</div>
    <div class="item item_5">5</div>
    <div class="item item_6">6</div>
    <div class="item item_7">7</div>
    <div class="item item_8">8</div>
    <div class="item item_9">9</div>
  </div>
</div>

*это что поле для крестики/нолики на мобильном устройстве или что-то из гембливской штуки ?

БЛОГ НА HUSL

Масштабирование div элементов

Ответы (1 шт):