我有一個這樣定義的 CSS 網格
.grid
width: 100%
height: 500px
background-color: green
display: grid
grid-template-columns: repeat(6, 1fr)
grid-template-rows: repeat(4, 1fr)
gap: 1em
> *
background-color: gray
.doubleWidth
grid-column: span 2
.doubleHeight
grid-row: span 2
在這種情況下，doubleWidth 類將推動一個專案。我寧愿當一個 doubleWidth 或 doubleHeight 專案在網格中時，它會擴展并覆寫相鄰的專案，而不是沿著另一行/列敲擊它。
在此示例中：https : //codepen.io/dredgy/pen/XWaOebV 我希望 doubleHeight 項成為第二行中的第一項，但按原樣，doubleWidth 項將其敲入第二列。
這在網格中可能嗎？我以前使用過 Javascript 和表格，但到目前為止我喜歡這個最小的解決方案。
uj5u.com熱心網友回復：
您可以在網格子元素中放置一個元素，該元素擴展到其父元素的寬度/高度的兩倍
.grid {
width: 100%;
height: 500px;
background-color: green;
display: grid;
grid-template-columns: repeat(6, 1fr);
grid-template-rows: repeat(4, 1fr);
gap: 1em;
}
.grid>* {
background-color: gray;
}
.grid .doubleWidth {
height: 100%;
width: calc(200% 1em);
background-color: gray;
}
.grid .doubleHeight {
width: 100%;
height: calc(200% 1em);
background-color: gray;
}<div class="grid">
<a>
<div class="doubleWidth"></div>
</a>
<a></a>
<a></a>
<a></a>
<a></a>
<a></a>
<a>
<div class="doubleHeight"></div>
</a>
<a></a>
<a></a>
<a></a>
<a></a>
<a></a>
<a></a>
<a></a>
<a></a>
<a></a>
<a></a>
<a></a>
<a></a>
<a></a>
<a></a>
<a></a>
<a></a>
<a></a>
</div>轉載請註明出處，本文鏈接：https://www.uj5u.com/net/360130.html
標籤：css
上一篇：如何使覆寫整個頁面而不僅僅是視口
下一篇：SVG路徑旋轉影片-改變位置