As someone new to CSS Grid, I am encountering a problem where the boxes are appearing in the correct positions but with incorrect pixel sizes. The main container is showing up at around 1500px instead of the intended 1200px, and all the row dimensions seem to be off as well.
#container {
width: 1200px;
display: grid;
grid-gap: 10px;
grid-template-columns: 2fr 1fr 1fr;
grid-template-rows: 225px 175px 225px 160px;
}
.feature {
grid-row: 1 / 5;
}
.vertical {
grid-row-end: span 2;
}
.im_picture {
background-color: #336;
}
.im_picture img {}
.button {
background-color: #808000;
grid-column: 2 / 4;
}<div id="container">
<div class="im_picture feature"></div>
<div class="im_picture vertical"></div>
<div class="im_picture"></div>
<div class="im_picture vertical"></div>
<div class="im_picture"></div>
<div class="button">book a session</div>