如何解决如何使我的CSS网格中的最后一个项目以相等的间距拉伸全宽?
我是使用CSS网格的新手,偶然发现了一个我无法在线找到答案的问题。我要实现的是7列布局,其余项目的宽度均等地延伸以填充剩余空间。
我尝试使用网上发现的自动填充和自动调整功能,但这不能解决我的问题。我不确定这是否可以在CSS网格中实现,并且我可能必须使用flexbox?
我希望“八”,“九”和“十”拉伸全宽以与上面的行保持一致。
.wrapper {
display: grid;
grid-template-columns: repeat(7,1fr);
grid-auto-rows: auto;
}
* {
box-sizing: border-box;
}
.wrapper {
border: 2px solid #f76707;
border-radius: 5px;
background-color: #fff4e6;
}
.wrapper>div {
border: 2px solid #ffa94d;
border-radius: 5px;
background-color: #ffd8a8;
padding: 1em;
color: #d9480f;
}
<div class="wrapper">
<div>One</div>
<div>Two</div>
<div>Three</div>
<div>Four</div>
<div>Five</div>
<div>Six</div>
<div>Seven</div>
<div>Eight</div>
<div>Nine</div>
<div>Ten</div>
</div>
解决方法
由于以下原因,无法使用网格自动完成:
- Aligning grid items across the entire row/column (like flex items can)
- Place wrapping items in the center of the grid
与这个常见问题相反:
使用flex可能会实现。
.wrapper {
display: flex;
flex-wrap: wrap;
}
.wrapper > div {
flex: 1 0 14%;
border: 2px solid #ffa94d;
border-radius: 5px;
background-color: #ffd8a8;
padding: 1em;
color: #d9480f;
}
.wrapper {
border: 2px solid #f76707;
border-radius: 5px;
background-color: #fff4e6;
}
* {
box-sizing: border-box;
}
<div class="wrapper">
<div>One</div>
<div>Two</div>
<div>Three</div>
<div>Four</div>
<div>Five</div>
<div>Six</div>
<div>Seven</div>
<div>Eight</div>
<div>Nine</div>
<div>Ten</div>
</div>
,
如果您希望 8、9 和 10 在下方拉伸全宽,那么您可以使用 grid-column 并使这 3 个成为网格的全宽(填充空间)。
向 div 8、9 和 10 添加一个 .stretch 类。
然后就是这样:
.stretch { 网格列:1 / -1 }
简单易行!
我可能会根据问题和小提琴误解布局要求,但这可能会让你得到你想要的......
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。