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

一些CSS网格不适合这些行

1 个答案: