时间戳

首页 > 解决方案 > 为什么即使所有网格元素都使用 fr 调整大小，网格的右侧和底部仍有空白？

javascript - 为什么即使所有网格元素都使用 fr 调整大小，网格的右侧和底部仍有空白？

问题描述

我创建了一个方形容器 div，其中包含可变数量的方形 div 子项。使用网格，这些 div 应该填满整个容器 div，并且使用column-template-columns: repeat(#divs per side of square, 1fr)and来调整它们的大小grid auto rows: 1fr，每边有 #divs ^ 2 个 div 子项。

将特定数量的 div 添加到容器时会出现此问题。基本上，容器的右侧和底部出现了一个奇怪的间隙，因此尽管所有内容都使用 fr 单位调整大小，但 div 并未完全填满容器。例如，当有 71 ^ 2 个 div 添加到容器时会发生这种情况。

这是代码：

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>

我已经检查了边距/填充/边框/等：容器中的所有 div 都没有 - 这似乎是一个尺寸问题，所有内部 div 的宽度加在一起不等于宽度某些数量的内部 div 的容器 div。为什么是这样？

标签： javascriptcsscss-grid

解决方案

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>

推荐阅读