html - 如何使网格容器缩小以适合内容？

Question

我正在尝试制作一款带有网格的游戏。我有 x 个 div，里面有 x 个 div，用于创建网格。

问题是我希望所有这些的容器 div 只需要它需要的那么大(比如，每个 25px 的 5x5 正方形 = 125px x 125px 容器 div)。高度很好，但宽度一直延伸到尽头。每个框为 25px。

我试过 grid-template-rows: repeat(auto-fill, 25px) 似乎不起作用。我无法将它设置为特定宽度 (125px)，因为方 block 的数量将是动态的(但始终是一个平方数)。

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

#start {
  position: relative;
  width: auto;
  margin: 50px auto;
  display: grid;
  grid-template-rows: repeat(auto-fill, 25px);
}

.row {
  display: grid;
  grid-template-columns: repeat(auto-fill, 25px);
}

.gameNode {
  margin: 0px;
  height: 25px;
  width: 25px;
}

.even {
  background-color: #666;
}

.odd {
  background-color: #999;
}

<div id="start">
  <div id="row_0" class="row">
    <div class="gameNode odd" id="node_1"></div>
    <div class="gameNode even" id="node_2"></div>
    <div class="gameNode odd" id="node_3"></div>
    <div class="gameNode even" id="node_4"></div>
    <div class="gameNode odd" id="node_5"></div>
  </div>
  <div id="row_1" class="row">
    <div class="gameNode even" id="node_6"></div>
    <div class="gameNode odd" id="node_7"></div>
    <div class="gameNode even" id="node_8"></div>
    <div class="gameNode odd" id="node_9"></div>
    <div class="gameNode even" id="node_10"></div>
  </div>
  <div id="row_2" class="row">
    <div class="gameNode odd" id="node_11"></div>
    <div class="gameNode even" id="node_12"></div>
    <div class="gameNode odd" id="node_13"></div>
    <div class="gameNode even" id="node_14"></div>
    <div class="gameNode odd" id="node_15"></div>
  </div>
  <div id="row_3" class="row">
    <div class="gameNode even" id="node_16"></div>
    <div class="gameNode odd" id="node_17"></div>
    <div class="gameNode even" id="node_18"></div>
    <div class="gameNode odd" id="node_19"></div>
    <div class="gameNode even" id="node_20"></div>
  </div>
  <div id="row_4" class="row">
    <div class="gameNode odd" id="node_21"></div>
    <div class="gameNode even" id="node_22"></div>
    <div class="gameNode odd" id="node_23"></div>
    <div class="gameNode even" id="node_24"></div>
    <div class="gameNode odd" id="node_25"></div>
  </div>
</div>

我预计容器 div 只占用与正方形一样多的空间，但它横跨整个页面。高度好像还可以。

这是它正在做的事情的截图:

它创建了一堆额外的方 block ，填充空间而不是只填充实际的 div。

我是否正确处理了这个问题，或者我应该以不同的方式格式化我的 HTML 以获得预期的效果？

Answer 1

网格在这种情况下不起作用。你需要使用 flexbox。切换到主容器上的 display: inline-flex。

---

显示:网格

您不能使用 display: grid，因为这会创建一个 block 级容器，默认情况下，它会占据父级的整个宽度。由于您无法定义宽度，因为:

I can't set it to a specific width because the amount of squares is going to be dynamic...

...那么你就不能使用 block 级容器了。这就是您现在所处的位置:

#start {
  display: grid;
  border: 2px solid red;
}

.row {
  display: grid;
  grid-template-columns: repeat(auto-fill, 25px);
  grid-auto-rows: 25px;
}

.even { background-color: #666; }
.odd  { background-color: #999; }

<div id="start">
  <div id="row_0" class="row">
    <div class="gameNode odd" id="node_1"></div>
    <div class="gameNode even" id="node_2"></div>
    <div class="gameNode odd" id="node_3"></div>
    <div class="gameNode even" id="node_4"></div>
    <div class="gameNode odd" id="node_5"></div>
  </div>
  <div id="row_1" class="row">
    <div class="gameNode even" id="node_6"></div>
    <div class="gameNode odd" id="node_7"></div>
    <div class="gameNode even" id="node_8"></div>
    <div class="gameNode odd" id="node_9"></div>
    <div class="gameNode even" id="node_10"></div>
  </div>
  <div id="row_2" class="row">
    <div class="gameNode odd" id="node_11"></div>
    <div class="gameNode even" id="node_12"></div>
    <div class="gameNode odd" id="node_13"></div>
    <div class="gameNode even" id="node_14"></div>
    <div class="gameNode odd" id="node_15"></div>
  </div>
  <div id="row_3" class="row">
    <div class="gameNode even" id="node_16"></div>
    <div class="gameNode odd" id="node_17"></div>
    <div class="gameNode even" id="node_18"></div>
    <div class="gameNode odd" id="node_19"></div>
    <div class="gameNode even" id="node_20"></div>
  </div>
  <div id="row_4" class="row">
    <div class="gameNode odd" id="node_21"></div>
    <div class="gameNode even" id="node_22"></div>
    <div class="gameNode odd" id="node_23"></div>
    <div class="gameNode even" id="node_24"></div>
    <div class="gameNode odd" id="node_25"></div>
  </div>
</div>

---

显示:内联网格

您不能使用 display: inline-grid，因为所有元素都会垂直堆叠。

#start {
  display: inline-grid;
  border: 2px solid red;
}

.row {
  display: grid;
  grid-template-columns: repeat(auto-fill, 25px);
  grid-auto-rows: 25px;
}

.even { background-color: #666; }
.odd  { background-color: #999; }

<div id="start">
  <div id="row_0" class="row">
    <div class="gameNode odd" id="node_1"></div>
    <div class="gameNode even" id="node_2"></div>
    <div class="gameNode odd" id="node_3"></div>
    <div class="gameNode even" id="node_4"></div>
    <div class="gameNode odd" id="node_5"></div>
  </div>
  <div id="row_1" class="row">
    <div class="gameNode even" id="node_6"></div>
    <div class="gameNode odd" id="node_7"></div>
    <div class="gameNode even" id="node_8"></div>
    <div class="gameNode odd" id="node_9"></div>
    <div class="gameNode even" id="node_10"></div>
  </div>
  <div id="row_2" class="row">
    <div class="gameNode odd" id="node_11"></div>
    <div class="gameNode even" id="node_12"></div>
    <div class="gameNode odd" id="node_13"></div>
    <div class="gameNode even" id="node_14"></div>
    <div class="gameNode odd" id="node_15"></div>
  </div>
  <div id="row_3" class="row">
    <div class="gameNode even" id="node_16"></div>
    <div class="gameNode odd" id="node_17"></div>
    <div class="gameNode even" id="node_18"></div>
    <div class="gameNode odd" id="node_19"></div>
    <div class="gameNode even" id="node_20"></div>
  </div>
  <div id="row_4" class="row">
    <div class="gameNode odd" id="node_21"></div>
    <div class="gameNode even" id="node_22"></div>
    <div class="gameNode odd" id="node_23"></div>
    <div class="gameNode even" id="node_24"></div>
    <div class="gameNode odd" id="node_25"></div>
  </div>
</div>

发生这种情况是因为 default value for grid-auto-columns是 auto，表示单个列的大小适合内容。

为了使您的布局能够使用 display: inline-grid，您需要定义列，这在您的布局中似乎是 Not Acceptable 。

#start {
  display: inline-grid;
  grid-template-columns: repeat(5, auto);
  border: 2px solid red;
}

.row {
  display: grid;
  grid-template-columns: repeat(auto-fill, 25px);
  grid-auto-rows: 25px;
}

.even { background-color: #666; }
.odd  { background-color: #999; }

<div id="start">
  <div id="row_0" class="row">
    <div class="gameNode odd" id="node_1"></div>
    <div class="gameNode even" id="node_2"></div>
    <div class="gameNode odd" id="node_3"></div>
    <div class="gameNode even" id="node_4"></div>
    <div class="gameNode odd" id="node_5"></div>
  </div>
  <div id="row_1" class="row">
    <div class="gameNode even" id="node_6"></div>
    <div class="gameNode odd" id="node_7"></div>
    <div class="gameNode even" id="node_8"></div>
    <div class="gameNode odd" id="node_9"></div>
    <div class="gameNode even" id="node_10"></div>
  </div>
  <div id="row_2" class="row">
    <div class="gameNode odd" id="node_11"></div>
    <div class="gameNode even" id="node_12"></div>
    <div class="gameNode odd" id="node_13"></div>
    <div class="gameNode even" id="node_14"></div>
    <div class="gameNode odd" id="node_15"></div>
  </div>
  <div id="row_3" class="row">
    <div class="gameNode even" id="node_16"></div>
    <div class="gameNode odd" id="node_17"></div>
    <div class="gameNode even" id="node_18"></div>
    <div class="gameNode odd" id="node_19"></div>
    <div class="gameNode even" id="node_20"></div>
  </div>
  <div id="row_4" class="row">
    <div class="gameNode odd" id="node_21"></div>
    <div class="gameNode even" id="node_22"></div>
    <div class="gameNode odd" id="node_23"></div>
    <div class="gameNode even" id="node_24"></div>
    <div class="gameNode odd" id="node_25"></div>
  </div>
</div>

---

显示:inline-flex

对于 flexbox， block 级容器 (display: flex) 将无法工作，原因与上面 display: grid 部分所述相同。

但是，display: inline-flex 起作用是因为 default value of flex-basis是 auto，这意味着元素的大小适合内容，并且与网格布局不同，没有强制元素堆叠到单个列中的默认设置。

#start {
  display: inline-flex;
  border: 2px solid red;
}

.row {
  display: grid;
  grid-template-columns: repeat(auto-fill, 25px);
  grid-auto-rows: 25px;
}


.even { background-color: #666; }
.odd  { background-color: #999; }

<div id="start">
  <div id="row_0" class="row">
    <div class="gameNode odd" id="node_1"></div>
    <div class="gameNode even" id="node_2"></div>
    <div class="gameNode odd" id="node_3"></div>
    <div class="gameNode even" id="node_4"></div>
    <div class="gameNode odd" id="node_5"></div>
  </div>
  <div id="row_1" class="row">
    <div class="gameNode even" id="node_6"></div>
    <div class="gameNode odd" id="node_7"></div>
    <div class="gameNode even" id="node_8"></div>
    <div class="gameNode odd" id="node_9"></div>
    <div class="gameNode even" id="node_10"></div>
  </div>
  <div id="row_2" class="row">
    <div class="gameNode odd" id="node_11"></div>
    <div class="gameNode even" id="node_12"></div>
    <div class="gameNode odd" id="node_13"></div>
    <div class="gameNode even" id="node_14"></div>
    <div class="gameNode odd" id="node_15"></div>
  </div>
  <div id="row_3" class="row">
    <div class="gameNode even" id="node_16"></div>
    <div class="gameNode odd" id="node_17"></div>
    <div class="gameNode even" id="node_18"></div>
    <div class="gameNode odd" id="node_19"></div>
    <div class="gameNode even" id="node_20"></div>
  </div>
  <div id="row_4" class="row">
    <div class="gameNode odd" id="node_21"></div>
    <div class="gameNode even" id="node_22"></div>
    <div class="gameNode odd" id="node_23"></div>
    <div class="gameNode even" id="node_24"></div>
    <div class="gameNode odd" id="node_25"></div>
  </div>
</div>