似乎是一項簡單的任務，我想在幾個小時內完成。我無法正確垂直對齊我的網格元素。請看一下小提琴來了解一下。也許有人可以幫我解決這個問題。
HTML
<section class="top"> <div></div> <div></div> </section> <section class="bottom"> <div></div> <div></div> <div></div> </section>
CSS
section { display: grid;
grid-template-rows:auto;
margin: 40px 0 0 0
}
section.top { grid-template-columns:2fr 1fr; grid-column-gap: 50px;
}
section.bottom { grid-template-columns:1fr 1fr 1fr; grid-column-gap: 50px;
}
section div { background:lightblue; height:400px
}好吧，經過一些思考和計算，這個就可以了
CSS
section.top { grid-template-columns:calc(66% + 2vw) 34%; grid-column-gap: 2vw;}section.bottom { grid-template-columns:33% 33% 34%; grid-column-gap: 2vw;}我知道這是一個老問題......但我遇到了類似的問題，我想我會與其他需要幫助的人分享我的解決方案。
這個評論幫助我朝著正確的方向前進
但是您使用 fr 單位劃分空間，這僅適用于容器中的可用空間。底部的可用空間比頂部少 50px。所以他們不能以這種方式對齊
由于布局需要考慮列之間的間隙，我發現最好將問題框起來，因為它需要占用 3 列布局中的 2 列，而不是認為它需要占用 3fr 布局中的 2fr。
有用的網格允許我們指定一個元素可以跨越多少列grid-column: span 2;
使用問題中的 html，我們可以在頂部的第一個 div 上使用 span：
section { display: grid;
margin: 40px 0 0 0; grid-template-columns: repeat(3, minmax(0, 1fr)); grid-column-gap: 50px;}section.top div:first-child { grid-column: span 2;}
如果你只想用 1 個父元素來做，這可能是一個解決方案：
.wrapper { display: grid; grid-template-columns: auto auto auto auto; grid-row-gap: 50px; grid-column-gap: 10px; grid-template-areas: 'item1 item1 item1 item1 item2' 'item3 item3 item4 item4 item5'; } .wrapper > div { background: red; height: 400px; } .item1 { grid-area: item1; } .item2 { grid-area: item2; } .item3 { grid-area: item3; } .item4 { grid-area: item4; } .item5 { grid-area: item5; }<div class="wrapper"> <div class="item1"></div> <div class="item2"></div> <div class="item3"></div> <div class="item4"></div> <div class="item5"></div> </div>
一個非常簡單的解決方案是更改grid-column-gapby margin（如果兩側有空間不是問題）：
HTML
<section class="top"> <div></div> <div></div></section><section class="bottom"> <div></div> <div></div> <div></div></section>
CSS
section { display: grid;
grid-template-rows:auto;
margin: 4px 0 0 0
}
section.top { grid-template-columns:2fr 1fr;
}
section.bottom { grid-template-columns:1fr 1fr 1fr;
}
section div {
background:lightblue; height:400px; margin: 5px;
}下一篇vuE Fulham