Почему есть пустые места справа и внизу сетки, даже если все элементы сетки имеют размер с использованием fr?

#javascript #css #css-grid

Вопрос:

Я создал квадратный контейнер div с переменным числом дочерних элементов square div. При использовании grid предполагалось, что эти divs должны были заполнить весь контейнер div, и они были рассчитаны с использованием column-template-columns: repeat(#divs per side of square, 1fr) and grid auto rows: 1fr , при этом всего было #divs на сторону квадрата ^ 2 дочерних элемента div.

Проблема возникает, когда в контейнер добавляется определенное количество divs. По сути, справа и внизу контейнера появляется странный пробел, так что divs не полностью заполняют контейнер, несмотря на то, что все размеры указаны с использованием единиц fr. Например, это происходит, когда в контейнер добавляется 71 ^ 2 divs.

Вот код:

 const INITIAL_SIZE = 71;
const container = document.querySelector(".container");

for (let i = 0; i < INITIAL_SIZE * INITIAL_SIZE; i  ) {
  const newDiv = document.createElement("div");
  newDiv.classList.add("drawing-div");
  container.appendChild(newDiv);
}

 .container {
  display: inline-grid;
  grid-template-columns: repeat(71, 1fr);
  grid-auto-rows: 1fr;
  align-content: stretch;
  justify-content: stretch;
  width: 10rem;
  height: 10rem;
  background-color: red;
}

.drawing-div {
  box-sizing: border-box;
  background-color: gray;

}

 <div class="container">

</div>

Развернуть фрагмент

Я уже проверил поля / отступы / границы / и т.д.: ни один из divs в контейнере не имеет ничего подобного — похоже, это проблема с размерами, поскольку ширина всех внутренних divs, сложенных вместе, не равна ширине контейнера div для определенного количества внутренних divs. Почему это так?

1. удалите фиксированную ширину

2. Я ничего не вижу, когда запускаю ваш код.

3. @Barmar мой плохой — забыл его раскрасить

4. Я просто вижу серый квадрат без каких-либо пробелов.

5. @Barmar кажется, что он появляется и исчезает в зависимости от размера области просмотра и масштабирования.

Ответ №1:

 const INITIAL_SIZE = 71;
const container = document.querySelector(".container");

for (let i = 0; i < INITIAL_SIZE * INITIAL_SIZE; i  ) {
  const newDiv = document.createElement("div");
  newDiv.classList.add("drawing-div");
  container.appendChild(newDiv);
}

 .container {
  display: grid;
  grid-template-columns: repeat(71, 1fr);
  grid-auto-rows: 1fr;
  grid-gap:2px;
  align-content: stretch;
  justify-content: stretch;
  border-radius: 1.5rem;
  background-color: RGB(255, 255, 255);
}

.drawing-div {
  box-sizing: border-box;
  transition: background-color 0.15s;
  background:blue;
  padding-top:100%;
}

 <div class="container">

</div>

Развернуть фрагмент

1. Не могли бы вы помочь уточнить, что было не так с моим исходным фрагментом?

2. @tqtqtwtw ты не проверяешь его css?

3. @tqtqtwtw вы определяете фиксированную ширину / высоту, и я удалил их, чтобы получить адаптивный блок

4. @MisterJojo Я сделал, просто не уверен, как это решает проблему концептуально. Я неправильно понимаю, как работает fr, или есть какой-то другой пробел в моем понимании?

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