时间戳

首页 > 解决方案 > 如何使网格容器缩小以适应内容？

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

问题描述

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

问题是我希望所有这些的容器 div 只需要它需要的那么大（例如，5x5 正方形，每个 25px = 125px x 125px 容器 div）。高度很好，但宽度延伸到最后。每个框为 25px。

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

* {
  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 以获得预期的效果？

标签： htmlcssflexboxcss-grid

解决方案

在这种情况下，网格将不起作用。你需要使用弹性盒子。切换到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>

显示：inline-flex

使用 flexbox，块级容器 ( display: flex) 将无法工作，原因与上display: grid一节所述相同。

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

推荐阅读