对齐CSS网格元素

Question

我开始学习使用CSS网格。 我正在制作一个网格， 看起来像这样 。 我需要项目3和4与项目1水平对齐。

所有项目的高度应为700px，以便该部分合适。 我在想我是否在有关行和列的代码中做错了什么？

 .wrapper { display: grid; grid-template-columns: repeat(11, 1fr); grid-gap: 1em; } .wrapper>div { background-color: #eee; padding: 1em; } .wrapper>div:nth-child(odd) { background-color: #ddd; } .item1 { grid-row: 1 / 3; grid-column: 1/6; height: 700px; } .item2 { grid-row: 1 / 1; grid-column: 6/12; height: 340px; } .item3 { grid-row: 2 / 3; grid-column: 6/9; height: 350px; } .item4 { grid-row: 2/3; grid-column: 9/12; height: 350px; } 

 <div class="wrapper"> <div class="item1"> This is item 1 </div> <div class="item2"> This is item 2 </div> <div class="item3"> This is item 3 </div> <div class="item4"> This is item 4 </div> </div> 

Answer 1

进行一些更改应该会有所帮助。 首先，将wrapper上的grid-gap从1em更改为10px 。 这有助于解决间隙问题，默认情况下1em通常为16px。 然后只需添加box-sizing: border-box; 到.wrapper > div 。

这是一个工作示例：

 .wrapper { display:grid; grid-template-columns:repeat(11,1fr); grid-gap: 10px; } .wrapper > div { background-color: #eee; padding: 1em; box-sizing: border-box; } .wrapper > div:nth-child(odd) { background-color: #ddd; } .item1 { grid-row: 1 / 3; grid-column: 1/6; height: 700px; } .item2 { grid-row: 1 / 1; grid-column: 6/12; height: 340px; } .item3 { grid-row: 2 / 3; grid-column: 6/9; height: 350px; } .item4 { grid-row:2/3; grid-column: 9/12; height: 350px; } 

 <div class="wrapper"> <div class="item1"> This is item 1 </div> <div class="item2"> This is item 2 </div> <div class="item3"> This is item 3 </div> <div class="item4"> This is item 4 </div> </div> 

Answer 2

您的问题是每个网格元素上的padding:1em 。 这使它们比您预期的要大。

我在下面修改了您的示例。 我希望这有帮助 ：-）

 .wrapper { display: grid; grid-template-columns: repeat(11, 1fr); grid-gap: 1em; } .wrapper > div { background-color: #eee; padding: 1em; } .wrapper > div:nth-child(odd) { background-color: #ddd; } .item1 { grid-row: 1 / 3; grid-column: 1/6; height: 700px; } .item2 { grid-row: 1 / 1; grid-column: 6/12; } .item3 { grid-row: 2 / 3; grid-column: 6/9; } .item4 { grid-row: 2/3; grid-column: 9/12; } 

 <div class="wrapper"> <div class="item1">This is item 1</div> <div class="item2">This is item 2</div> <div class="item3">This is item 3</div> <div class="item4">This is item 4</div> </div>