Question

我正在尝试使用CSS Grid实现这种布局。

当前，我无法将“子标题”放置在“主标题”下方。

当我将“子标题”放置在“主标题”下方时，会在“子标题”下方添加一吨空白，如下图所示。我评论了导致此错误的代码行。

在不触摸HTML的情况下，如何实现顶部的布局？

* {
  margin: 0; 
  padding: 0;
}


img {
  max-width: 100%;
}


.grid {
  display: grid;
  grid-template-columns: 350px 3fr;
  grid-template-rows: auto 1fr auto;
    
  grid-template-areas:
    "img h1"
    "img p"
      
       
 
/* My attempt of achieving the layout */ 
/* White space is added below the Subtitle for some reason  */

/*   grid-template-areas:
    "img h1"
    "img h2"
    "img p"  */
  
}


img { grid-area: img; }
h1 { grid-area: h1; }
h2 { grid-area: h2; }
p { grid-area: p; }

<div class="grid">

  <img src="https://images.unsplash.com/photo-1593986338340-6f7361d756da?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=881&q=80" alt="Placeholder">

  <h1>Main Title</h1>

  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis vehicula vitae ligula sit amet maximus. Nunc auctor neque ipsum, ac porttitor elit lobortis ac. Vivamus ultrices sodales tellus et aliquam. Pellentesque porta sit amet nulla vitae luctus.
    Praesent quis risus id dolor venenatis condimentum.</p>
    
  <h2>Sub Title</h2>

</div>

Answer 1

grid-template-columns: 350px 3fr;
grid-template-rows: auto 1fr auto;

当您拥有grid-template-areas时，

是多余的，因为它会自动插入所需数量的行和列。

无需触摸html ，就可以在row属性中添加另一行grid-template-areas-

* {
  margin: 0; 
  padding: 0;
}

img {
  max-width: 100%;
}

.grid {
  display: grid;
  grid-template-areas:
    "img h1"
    "img h2"
    "img p"
    "img ."      
}

img { grid-area: img; }
h1 { grid-area: h1; }
h2 { grid-area: h2; }
p { grid-area: p; }

<div class="grid">

  <img src="https://images.unsplash.com/photo-1593986338340-6f7361d756da?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=881&q=80" alt="Placeholder">

  <h1>Main Title</h1>

  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis vehicula vitae ligula sit amet maximus. Nunc auctor neque ipsum, ac porttitor elit lobortis ac. Vivamus ultrices sodales tellus et aliquam. Pellentesque porta sit amet nulla vitae luctus.
    Praesent quis risus id dolor venenatis condimentum.</p>
    
  <h2>Sub Title</h2>

</div>

.插入一个空列，可以很好地完成您的工作。

Answer 2

您可以将内容分成以下两个单独的div示例。

但是，“ Education 4Fun”确实有一个引导点。它使这种事情变得容易得多。链接-----> https://getbootstrap.com/

<!DOCTYPE html>
<html>
<head>
    <title>Test</title>
    <style type="text/css">
        * {
  margin: 0; 
  padding: 0;
}


img {
  max-width: 100%;
}


.grid {
  display: grid;
  grid-template-columns: 350px 3fr;
  grid-template-rows: auto 1fr auto;
    
  grid-template-areas:
    "img h1"
    "img p"
      
       
 
/* My attempt of achieving the layout */ 
/* White space is added below the Subtitle for some reason  */

/*   grid-template-areas:
    "img h1"
    "img h2"
    "img p"  */
  
}


img { grid-area: img; }
h1 { grid-area: h1; }
h2 { grid-area: h2; }
p { grid-area: p; }
    </style>
</head>
<body>
<div class="grid">
    <div id="content1">
        <img src="https://images.unsplash.com/photo-1593986338340-6f7361d756da?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=881&q=80" alt="Placeholder">
    </div>
    <div id="content2">
        <h1>Main Title</h1>

      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis vehicula vitae ligula sit amet maximus. Nunc auctor neque ipsum, ac porttitor elit lobortis ac. Vivamus ultrices sodales tellus et aliquam. Pellentesque porta sit amet nulla vitae luctus.
        Praesent quis risus id dolor venenatis condimentum.</p>
        
      <h2>Sub Title</h2>
    </div>

</div>
</body>
</html>

如何使用CSS Grid实现这种布局？

2 个答案: