对齐CSS网格元素

Question

我开始学习如何使用CSS网格。我正在建立一个网格looking like this。我需要项目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

应该进行一些更改。首先，将grid-gap上的wrapper从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>