html - 大屏幕布局中grid-template-column第二部分的空白空间

enter image description here

因此，我正在尝试为大屏幕（最小宽度：768px）创建布局。但是，当我将grid-template-columns设置为1fr 1fr时，两个div的第二列中都有空白。

/* about */

.about-container{
    padding: 3rem;
    max-width: 90vw;
    margin: 2rem auto;
    display: grid;
    grid-row-gap: 2rem;
}

@media screen and (min-width:768px){
    .about{
        display: grid;
        grid-template-columns: 1fr 1fr;
    }
}

.about_picture_1{
    width: 100%;
display: block;
height: 100%;
border-radius: 0.25rem;
}

<div class="about-container">
<div class="about">
  <div class="column_about_1">
    <h2>Our Story</h2>
      <p class="about_text">Lorem ipsum dolor sit amet consectetur adipisicing elit. Excepturi, minus. Animi adipisci perspiciatis, quae aspernatur fugiat odit incidunt officia nemo enim consequuntur quas cupiditate obcaecati hic, doloremque corrupti labore quidem?</p>
      <div class="about_picture">
        <img src="img/bravo.jpg" class="about_picture_1" alt="">
      </div>


      <div class="column_about_2">
      <h2>Our Story</h2>
      <p class="about_text">Lorem ipsum dolor sit amet consectetur adipisicing elit. Excepturi, minus. Animi adipisci perspiciatis, quae aspernatur fugiat odit incidunt officia nemo enim consequuntur quas cupiditate obcaecati hic, doloremque corrupti labore quidem?</p>
      <img src="img/pizzafork.jpg" class="about_picture_1" alt="">
    </div>
   </div>
  </div>

最佳答案

我认为您应该将display：grid css规则移至媒体查询之外的“ about”类中，然后将网格区域设置为768px，然后将大屏幕设置为大屏幕，将网格模板区域设置为2列。这是我制作的示例CSS代码：

.about-container{
    padding: 3rem;
    max-width: 90vw;
    margin: 2rem auto;
    display: grid;
    grid-row-gap: 2rem;
}

.about {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    grid-template-rows: repeat(2, 1fr);
    grid-template-areas:
    "col1 col1"
    "col2 col2";
}

@media screen and (min-width:768px){
    .about{
        grid-template-areas:
        "col1 col2"
        "col1 col2";
    }
}

.about_picture_1{
    width: 100%;
    display: block;
    height: 100%;
    border-radius: 0.25rem;
}

.column_about_1 {
    grid-area: col1;
}

.column_about_2 {
    grid-area: col2;
}