Some of the css grid is not fitting in to the lines

Question

Hi my css grid isn't working.. the red section fits in the first square, but the rest seem to just be out of the flow of the grid.. I'm completely new to this what am i missing?? I've tried everything but can't find the simple solution im sure..

<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;
  }
}

Answer 1

I may not be sure of your question but, if you want to align your grids horizontaly like your red grid. First of all, define how many columns you want

 &__event {
    height: 200px;
    width: 500px;
    position: relative;
    display: grid;
    grid-template-columns: 30% 30% 40%; //If you want to divide equally : 1fr 1fr 1fr;
    grid-template-rows: 20%; // You'll have to play around with this until it satisfies your needs
  }

&__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;
  }

  &__event-body {
    background-color: green;
  }