英文:
CSS Grid - child elements going over the width of the parent container
问题
我想使用CSS Grid来实现上面的效果 - 如果宽度无法容纳所有内容，子项目应该向下流动。然而，我得到的结果是子元素超出了父容器的设置宽度。
（项目的宽度需要是 120px 而不是动态宽度）
以下是我的代码：
<div style="width: 50%;">
<div style="display: grid; grid-template-columns: repeat(auto-fit, minmax(120px, 1fr)); grid-gap: 10px;">
<div style="width: 120px; border: 1px solid blue;">Item</div>
<div style="width: 120px; border: 1px solid blue;">Item</div>
<div style="width: 120px; border: 1px solid blue;">Item</div>
<div style="width: 120px; border: 1px solid blue;">Item</div>
<div style="width: 120px; border: 1px solid blue;">Item</div>
<div style="width: 120px; border: 1px solid blue;">Item</div>
<div style="width: 120px; border: 1px solid blue;">Item</div>
<div style="width: 120px; border: 1px solid blue;">Item</div>
<div style="width: 120px; border: 1px solid blue;">Item</div>
<div style="width: 120px; border: 1px solid blue;">Item</div>
<div style="width: 120px; border: 1px solid blue;">Item</div>
<div style="width: 120px; border: 1px solid blue;">Item</div>
<div style="width: 120px; border: 1px solid blue;">Item</div>
<div style="width: 120px; border: 1px solid blue;">Item</div>
<div style="width: 120px; border: 1px solid blue;">Item</div>
<div style="width: 120px; border: 1px solid blue;">Item</div>
<div style="width: 120px; border: 1px solid blue;">Item</div>
<div style="width: 120px; background: red; font: #fff; grid-column-start: -1; grid-row-start: -1;">Act</div>
</div>
</div>
排列的结果应该看起来像这样：
英文:
I want to achieve the effect above using CSS Grid - child items should flow downwards if the width can't contain everything. However what I am getting instead is the child elements going over the set width of the parent container.
(The width of the Item needs to be 120px instead of dynamic width)
Below is my code:
<div style="width: 50%;">
<div style="display: grid; grid-template-columns: repeat(auto-fit, minmax(120px, 1fr)); grid-gap: 10px;">
<div style="width: 120px; border: 1px solid blue;">Item</div>
<div style="width: 120px; border: 1px solid blue;">Item</div>
<div style="width: 120px; border: 1px solid blue;">Item</div>
<div style="width: 120px; border: 1px solid blue;">Item</div>
<div style="width: 120px; border: 1px solid blue;">Item</div>
<div style="width: 120px; border: 1px solid blue;">Item</div>
<div style="width: 120px; border: 1px solid blue;">Item</div>
<div style="width: 120px; border: 1px solid blue;">Item</div>
<div style="width: 120px; border: 1px solid blue;">Item</div>
<div style="width: 120px; border: 1px solid blue;">Item</div>
<div style="width: 120px; border: 1px solid blue;">Item</div>
<div style="width: 120px; border: 1px solid blue;">Item</div>
<div style="width: 120px; border: 1px solid blue;">Item</div>
<div style="width: 120px; border: 1px solid blue;">Item</div>
<div style="width: 120px; border: 1px solid blue;">Item</div>
<div style="width: 120px; border: 1px solid blue;">Item</div>
<div style="width: 120px; border: 1px solid blue;">Item</div>
<div style="width: 120px; background: red; font: #fff; grid-column-start: -1; grid-row-start: -1;">Act</div>
</div>
</div>
The arrangement outcome should look something like this:
答案1
得分: 0
找到答案：我应该使用grid-column-end: -1而不是grid-column-start: -1。
我认为通过使用后者，它创建了一个额外的列，这一点一开始并未考虑到。
英文:
Found the answer: I should have used grid-column-end: -1 instead of grid-column-start: -1.
I think by using the latter, it was creating an additional column not considered to begin with.
通过集体智慧和协作来改善编程学习和解决问题的方式。致力于成为全球开发者共同参与的知识库，让每个人都能够通过互相帮助和分享经验来进步。
评论