如何使网格容器收缩以适合内容？ [英] How to make a grid container shrink to fit the content?
本文介绍了如何使网格容器收缩以适合内容？的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
我正在尝试用网格制作游戏。我有x div，其中有x div来创建网格。
问题是我希望所有这些的容器div只能像需要的一样大（例如，每个25px的5x5正方形= 125px x 125px容器div）。高度可以，但宽度可以延伸到末端。每个框应为25px。
我尝试了 grid-template-rows：repeat（auto-fill，25px）似乎无效。我无法将其设置为特定的宽度（125px），因为正方形的数量将是动态的（但始终是正方形）。
* {margin：0px;填充：0px; box-sizing：border-box;}＃start {位置：相对；宽度：自动；边距：50px自动;显示：网格； grid-template-rows：repeat（auto-fill，25px）;}。row {display：grid; grid-template-columns：repeat（auto-fill，25px）;}。gameNode {margin：0px;高度：25px； width：25px;}。even {background-color：＃666;}。odd {background-color：＃999;}
< div id = start> < div id = row_0 class = row> < div class = gameNode奇数 id = node_1>< / div> < div class = gameNode even id = node_2>< / div> < div class = gameNode奇数 id = node_3>< / div> < div class = gameNode even id = node_4>< / div> < div class = gameNode奇数 id = node_5>< / div> < / div> < div id = row_1 class = row> < div class = gameNode even id = node_6>< / div> < div class = gameNode奇数 id = node_7>< / div> < div class = gameNode even id = node_8>< / div> < div class = gameNode奇数 id = node_9>< / div> < div class = gameNode even id = node_10>< / div> < / div> < div id = row_2 class = row> < div class = gameNode奇数 id = node_11>< / div> < div class = gameNode even id = node_12>< / div> < div class = gameNode奇数 id = node_13>< / div> < div class = gameNode even id = node_14>< / div> < div class = gameNode奇数 id = node_15>< / div> < / div> < div id = row_3 class = row> < div class = gameNode even id = node_16>< / div> < div class = gameNode奇数 id = node_17>< / div> < div class = gameNode even id = node_18>< / div> < div class = gameNode奇数 id = node_19>< / div> < div class = gameNode even id = node_20>< / div> < / div> < div id = row_4 class = row> < div class = gameNode奇数 id = node_21>< / div> < div class = gameNode even id = node_22>< / div> < div class = gameNode奇数 id = node_23>< / div> < div class = gameNode even id = node_24>< / div> < div class = gameNode奇数 id = node_25>< / div> < / div>< / div>
我希望容器div仅占用正方形的空间，但它会延伸到整个页面。高度似乎很好。
以下是其操作的屏幕截图：
它正在创建一堆额外的正方形，填充了空间，而不是仅填充了实际的div。
我正确处理了这个问题，还是应该以不同的方式格式化HTML以获得所需的效果？
解决方案
在这种情况下，网格将无法工作。您需要使用flexbox。切换到主容器上的显示：inline-flex 。
显示：网格
您不能使用 显示：网格 ，因为这会创建一个块级容器，默认情况下，该容器会占据父级的整个宽度。由于您无法定义宽度，原因是：
我无法将其设置为特定宽度，因为正方形数量将会是动态的...
...那么您将无法使用块级容器。因此，您现在所处的位置是：
#start {display：grid; border：2像素红色；}。row {display：grid;网格模板列：重复（自动填充，25像素）； grid-auto-rows：25px;}。even {background-color：＃666; } .odd {background-color：＃999; }
< div id = start> < div id = row_0 class = row> < div class = gameNode奇数 id = node_1>< / div> < div class = gameNode even id = node_2>< / div> < div class = gameNode奇数 id = node_3>< / div> < div class = gameNode even id = node_4>< / div> < div class = gameNode奇数 id = node_5>< / div> < / div> < div id = row_1 class = row> < div class = gameNode even id = node_6>< / div> < div class = gameNode奇数 id = node_7>< / div> < div class = gameNode even id = node_8>< / div> < div class = gameNode奇数 id = node_9>< / div> < div class = gameNode even id = node_10>< / div> < / div> < div id = row_2 class = row> < div class = gameNode奇数 id = node_11>< / div> < div class = gameNode even id = node_12>< / div> < div class = gameNode奇数 id = node_13>< / div> < div class = gameNode even id = node_14>< / div> < div class = gameNode奇数 id = node_15>< / div> < / div> < div id = row_3 class = row> < div class = gameNode even id = node_16>< / div> < div class = gameNode奇数 id = node_17>< / div> < div class = gameNode even id = node_18>< / div> < div class = gameNode奇数 id = node_19>< / div> < div class = gameNode even id = node_20>< / div> < / div> < div id = row_4 class = row> < div class = gameNode奇数 id = node_21>< / div> < div class = gameNode even id = node_22>< / div> < div class = gameNode奇数 id = node_23>< / div> < div class = gameNode even id = node_24>< / div> < div class = gameNode奇数 id = node_25>< / div> < / div>< / div>
显示：内联网格
您不能使用 display：inline-grid ，因为所有项目都将垂直堆叠。
#start {display：inline-grid; border：2像素红色；}。row {display：grid;网格模板列：重复（自动填充，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奇数 id = node_1>< / div> < div class = gameNode even id = node_2>< / div> < div class = gameNode奇数 id = node_3>< / div> < div class = gameNode even id = node_4>< / div> < div class = gameNode奇数 id = node_5>< / div> < / div> < div id = row_1 class = row> < div class = gameNode even id = node_6>< / div> < div class = gameNode奇数 id = node_7>< / div> < div class = gameNode even id = node_8>< / div> < div class = gameNode奇数 id = node_9>< / div> < div class = gameNode even id = node_10>< / div> < / div> < div id = row_2 class = row> < div class = gameNode奇数 id = node_11>< / div> < div class = gameNode even id = node_12>< / div> < div class = gameNode奇数 id = node_13>< / div> < div class = gameNode even id = node_14>< / div> < div class = gameNode奇数 id = node_15>< / div> < / div> < div id = row_3 class = row> < div class = gameNode even id = node_16>< / div> < div class = gameNode奇数 id = node_17>< / div> < div class = gameNode even id = node_18>< / div> < div class = gameNode奇数 id = node_19>< / div> < div class = gameNode even id = node_20>< / div> < / div> < div id = row_4 class = row> < div class = gameNode奇数 id = node_21>< / div> < div class = gameNode even id = node_22>< / div> < div class = gameNode奇数 id = node_23>< / div> < div class = gameNode even id = node_24>< / div> < div class = gameNode奇数 id = node_25>< / div> < / div>< / div>
#start {display ：内联网格； grid-template-columns：repeat（5，auto）; border：2像素红色；}。row {display：grid;网格模板列：重复（自动填充，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奇数 id = node_1>< / div> < div class = gameNode even id = node_2>< / div> < div class = gameNode奇数 id = node_3>< / div> < div class = gameNode even id = node_4>< / div> < div class = gameNode奇数 id = node_5>< / div> < / div> < div id = row_1 class = row> < div class = gameNode even id = node_6>< / div> < div class = gameNode奇数 id = node_7>< / div> < div class = gameNode even id = node_8>< / div> < div class = gameNode奇数 id = node_9>< / div> < div class = gameNode even id = node_10>< / div> < / div> < div id = row_2 class = row> < div class = gameNode奇数 id = node_11>< / div> < div class = gameNode even id = node_12>< / div> < div class = gameNode奇数 id = node_13>< / div> < div class = gameNode even id = node_14>< / div> < div class = gameNode奇数 id = node_15>< / div> < / div> < div id = row_3 class = row> < div class = gameNode even id = node_16>< / div> < div class = gameNode奇数 id = node_17>< / div> < div class = gameNode even id = node_18>< / div> < div class = gameNode奇数 id = node_19>< / div> < div class = gameNode even id = node_20>< / div> < / div> < div id = row_4 class = row> < div class = gameNode奇数 id = node_21>< / div> < div class = gameNode even id = node_22>< / div> < div class = gameNode奇数 id = node_23>< / div> < div class = gameNode even id = node_24>< / div> < div class = gameNode奇数 id = node_25>< / div> < / div>< / div>
显示：inline-flex
使用flexbox，块级容器（显示：flex ）不能以上述 display：grid 部分中所述的相同原因工作。
但是， display：inline-flex 之所以有效，是因为
#start {display：inline-flex; border：2像素红色；}。row {display：grid;网格模板列：重复（自动填充，25像素）； grid-auto-rows：25px;}。even {background-color：＃666; } .odd {background-color：＃999; }
< div id = start> < div id = row_0 class = row> < div class = gameNode奇数 id = node_1>< / div> < div class = gameNode even id = node_2>< / div> < div class = gameNode奇数 id = node_3>< / div> < div class = gameNode even id = node_4>< / div> < div class = gameNode奇数 id = node_5>< / div> < / div> < div id = row_1 class = row> < div class = gameNode even id = node_6>< / div> < div class = gameNode奇数 id = node_7>< / div> < div class = gameNode even id = node_8>< / div> < div class = gameNode奇数 id = node_9>< / div> < div class = gameNode even id = node_10>< / div> < / div> < div id = row_2 class = row> < div class = gameNode奇数 id = node_11>< / div> < div class = gameNode even id = node_12>< / div> < div class = gameNode奇数 id = node_13>< / div> < div class = gameNode even id = node_14>< / div> < div class = gameNode奇数 id = node_15>< / div> < / div> < div id = row_3 class = row> < div class = gameNode even id = node_16>< / div> < div class = gameNode奇数 id = node_17>< / div> < div class = gameNode even id = node_18>< / div> < div class = gameNode奇数 id = node_19>< / div> < div class = gameNode even id = node_20>< / div> < / div> < div id = row_4 class = row> < div class = gameNode奇数 id = node_21>< / div> < div class = gameNode even id = node_22>< / div> < div class = gameNode奇数 id = node_23>< / div> < div class = gameNode even id = node_24>< / div> < div class = gameNode奇数 id = node_25>< / div> < / div>< / div>
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>
I expected the container div to take up only as much space as the squares, but it stretches across the entire page. The height seems fine.
Here is a screenshot of what it's doing:
It's creating a bunch of extra squares, filling the space rather than only filling the actual divs.
Am I handling this correctly, or should I be formatting my HTML differently to get the desired effect?
解决方案
Grid won't work in this case. You need to use flexbox. Switch to display: inline-flex on the primary container.
display: grid
You can't use display: grid because that creates a block level container which, by default, occupies the full width of the parent. Since you can't define a width because:
I can't set it to a specific width because the amount of squares is going to be dynamic...
...then you can't use a block-level container. So that's where you stand now:
#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
You can't use display: inline-grid because all items will stack vertically.
#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>
This happens because the default value for grid-auto-columns (and, ipso facto, grid-template-columns) is auto, meaning a single column sized to fit content.
In order to make your layout work using display: inline-grid, you would need to define columns, which doesn't appear to be acceptable in your layout.
#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>
display: inline-flex
With flexbox, a block level container (display: flex) won't work for the same reason described in the display: grid section above.
However, display: inline-flex works because the default value of flex-basis is auto, meaning that items are sized to fit content, and, unlike grid layout, there is no default setting forcing the items to stack into a single column.
#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>
这篇关于如何使网格容器收缩以适合内容？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
