Align CSS grid elements - html

Question

I start learning working with the CSS grid. I am making a grid there is looking like this. I need the item 3 and 4 to align with item 1 horizontally.
The height on all items should give 700px, so that part should fit. I am thinking if I am doing something wrong in the code regarding the rows and columns?
.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

A couple of changes should help. Firstly, change the grid-gap on the wrapper from 1em to 10px. This helps with the gap issue with 1em usually being 16px by default. Then just add box-sizing: border-box; to the .wrapper > div.
Here's a working example:
.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

Your problem was the padding:1em on each of the grid elements. This makes them bigger than you expect.
I've amended your example below. I hope this helps :-)
.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>