How to make a grid container shrink to fit the content?

Question

I'm trying to make a game with a grid. I have x divs with x divs inside them, to create the grid.

The problem is that I want the container div for all of this to only be as big as it needs to be (say, 5x5 squares at 25px each = 125px x 125px container div). The height is fine, but the width stretches to the end. Each box is to be 25px.

I've tried grid-template-rows: repeat(auto-fill, 25px) which doesn't seem to work. I can't set it to a specific width (125px) because the amount of squares is going to be dynamic (but always a square number).

* {
  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 只占用与正方形一样多的空间，但它延伸到整个页面。身高看起来还不错。

这是它正在执行的操作的屏幕截图：

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

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

Answer 1

在这种情况下，网格将不起作用。您需要使用弹性盒。切换到display: inline-flex主容器。

display: grid

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

我无法将其设置为特定宽度，因为方块的数量将是动态的......

...那么你就不能使用块级容器。这就是你现在所处的位置：

#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

您无法使用，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>

发生这种情况是因为的默认值为grid-auto-columnsauto，这意味着单个列的大小适合内容。

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

#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>

显示：内联柔性

对于 Flexbox，块级容器 ( display: flex) 将无法工作，原因与display: grid上一节中描述的相同。

但是，它display: inline-flex是有效的，因为 的默认值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>