我有一個容器和一個孩子
.container {
display: grid;
grid-template-columns: repeat(21, 1fr);
gap: 20px;
width: 100%;
}
.container .child {
grid-column: 1/ 4;
}
有沒有辦法將.child下一個帶到第 5 列（所以到第 4 列加上20px）
uj5u.com熱心網友回復：
根據MDN 檔案：
在網格大小方面，間隙就像是規則的網格軌道，但是不能在間隙中放置任何東西。間隙的作用就像該位置的網格線已經獲得了額外的大小，因此放置在該線之后的任何網格專案都從間隙的末尾開始。
因此，您必須將您的內容重疊在該差距之上margin-right: -20px
.container {
background: green;
display: grid;
height: 200px;
grid-template-columns: repeat(21, 1fr);
gap: 20px;
width: 100%;
}
.container .child {
grid-column: 1/ 4;
background: orange;
margin-right: -20px;
}<div class="container">
<div class="child" />
</div>uj5u.com熱心網友回復：
如果你想在ie.child旁邊加上你提到的。column 5column 420px
簡單的方法是添加margin-right: -20px到child
希望能幫助到你！
轉載請註明出處，本文鏈接：https://www.uj5u.com/houduan/494658.html
上一篇：如何限制行內錨元素的寬度？
下一篇：在右下角對齊單獨區域的按鈕欄