Question

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


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

intended for acting as part of another application, rather than being directly accessed by end-users

Answer 1

我认为您应该将display：grid css规则移至媒体查询之外的“ about”类中，并在外部设置网格区域，然后设置768px，在大屏幕上设置网格模板区域，设置为两列。这是我制作的示例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;
}

Answer 2

这是您更新/修复的html结构。

<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>
       <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>
            <div>
              <img src="img/pizzafork.jpg" class="about_picture_1" alt="">
            </div>
        </div>
    </div>
</div>

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

2 个答案: