Часть сетки CSS не вписывается в линии

Question

Привет, моя сетка css не работает ... красная часть помещается в первом квадрате, но остальные, кажется, просто выходят за пределы сетки ... Я совершенно новичок в этом, чего мне не хватает??Я попробовал все, но не могу найти простое решение, я уверен ..

<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

Я, возможно, не уверен в вашем вопросе, но, если вы хотите выровнять свои сетки горизонтально, как ваша красная сетка.Прежде всего, определите, сколько столбцов вы хотите

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