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

【问题标题】：empty space in the second fraction of grid-template-column in big screen layout大屏幕布局中grid-template-column第二部分的空白
【发布时间】：2019-07-14 01:58:24
【问题描述】：

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>

【问题讨论】：

你想把2列垂直还是水平？

标签： html css

【解决方案1】：

我认为您应该将 display:grid css 规则移到媒体查询之外的“关于”类中，然后将网格区域设置为 768 像素，然后为大屏幕设置 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;
}

【讨论】：

我复制了您的代码并修复了 html 结构。我现在工作正常。
@derek 嗨，我认为您还需要重新构建您的 html，这就是为什么它不能在您的终端上运行？发现您错过了关闭 div。

【解决方案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>

【讨论】：