I'm having trouble with my CSS grid. The red section fits in the first square, but the rest of the content seems to be out of place in the grid. I'm new to all this and I can't figure out what I'm missing. I've tried everything but can't seem to find a simple solution.
<section class="pastevnts">
<div class="pastevents__container">
<div class="pastevents__title">
PAST EVENTS
</div>
<div class="pastevents__event">
<div class="pastevents__event-date">
17<span>Feb</span><br>2019
</div>
<div class="pastevents__event-title">
ELECTRIC LOVE PARADE
</div>
<div class="pastevents__event-body">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus aliquam purus in fringilla semper. In laoreet, urna ut porttitor cursus, lectus dolor ultrices ligula, sit amet tincidunt massa sem eget dui. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi vehicula dolor
</div>
</div>
</div>
</section>
//pastevents
.pastevents {
min-height: 100vh;
background-color: #000;
&__event {
height: 200px;
width: 500px;
position: relative;
display: grid;
grid-template-columns: 30% 70%;
grid-template-rows: 20% 80%;
}
&__event-date {
background-color: red;
grid-column: 1 / span 1;
grid-row: 1 / span 1;
}
&__event-title {
background-color: blue;
grid-column: 2 / span 1;
grid-row: 1 / span 1;
}
&__event-body {
background-color: green;
grid-column: 2 / span 1;
grid-row: 2 / span 1;
}
}