为什么标题会破坏我的响应img网格

Question

blockquote你好，我正在尝试制作一个具有以下内容的响应img网格：顶部有2个img，共享50%的空间，下面有4个img。

网格工作得很好，直到我决定添加一个小标题。我做错了什么？

谢谢，祝你愉快，

基兰。

body {
padding: 0px;
font-family: sans-serif;
background: #f2f2f2;
height: 100%;
}
.first-row {
border: 3px solid green;
float:left; 
width: 100%;
}
.grid-container1 h3 {
font-size: 1rem;
padding: 5px;
float: bottom;
}

.grid-container1  {
border: 1px solid red;
}
.grid-container1 img {
display:inline-block;
vertical-align:middle;
width: 50%;
padding: 5px;
}
.grid-container2 img {
vertical-align: top;
width: 25%;
float: left;
padding: 5px;
}
.grid-container3 img {
vertical-align: top;
width: 33.33%;
float: left;
padding: 5px;
}

<div class="grid-container1">
<a href="#">
<img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/210284/san-fransisco-768x432.jpg" alt="san francisco">  
</a>
<h3>lorem ipsum</h3>
</div>
<div class="grid-container1">
<a href="#">
<img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/210284/san-fransisco-768x432.jpg" alt="san francisco">    
</a>
<h3>lorem ipsum</h3>
</div>

<div class="grid-container2">
<a href="#">
<img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/210284/san-fransisco-768x432.jpg" alt="san francisco">
</a>
<h3>lorem ipsum</h3>
</div>
<div class="grid-container2">
<a href="#">
<img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/210284/san-fransisco-768x432.jpg" alt="san francisco">
</a>
<h3>lorem ipsum</h3>
</div>
<div class="grid-container2">
<a href="#">
<img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/210284/san-fransisco-768x432.jpg" alt="san francisco">
</a>
<h3>lorem ipsum</h3>
</div>
<div class="grid-container2">
<a href="#">
<img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/210284/san-fransisco-768x432.jpg" alt="san francisco">
</a>
<h3>lorem ipsum</h3>
</div>

Answer 1

body {
padding: 0px;
font-family: sans-serif;
background: #f2f2f2;
height: 100%;
}
.grid-container {
display: grid;
border: 1px solid red;
grid-template-columns: repeat(4, 1fr);
grid-template-rows: 1fr, 1fr;
padding: 5px;
gap: 5px;
}
.grid-container figure {
margin: 0;
}
.grid-container figure:nth-child(1) {
grid-column: 1 / 3;
}
.grid-container figure:nth-child(2) {
grid-column: 3 / 5;
}
.grid-container img {
display: block;
width: 100%;
height: auto;
}

<div class="grid-container">
<figure>
<a href="#"><img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/210284/san-fransisco-768x432.jpg" alt="san francisco"></a>
<figcaption>lorem ipsum</figcaption>
</figure>
<figure>
<a href="#"><img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/210284/san-fransisco-768x432.jpg" alt="san francisco"></a>
<figcaption>lorem ipsum</figcaption>
</figure>
<figure>
<a href="#"><img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/210284/san-fransisco-768x432.jpg" alt="san francisco"></a>
<figcaption>lorem ipsum</figcaption>
</figure>
<figure>
<a href="#"><img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/210284/san-fransisco-768x432.jpg" alt="san francisco"></a>
<figcaption>lorem ipsum</figcaption>
</figure>
<figure>
<a href="#"><img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/210284/san-fransisco-768x432.jpg" alt="san francisco"></a>
<figcaption>lorem ipsum</figcaption>
</figure>
<figure>
<a href="#"><img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/210284/san-fransisco-768x432.jpg" alt="san francisco"></a>
<figcaption>lorem ipsum</figcaption>
</figure>
</div>

Answer 2

试试这个：

body {
padding: 0px;
font-family: sans-serif;
background: #f2f2f2;
height: 100%;
}
.first-row {
border: 3px solid green;
float:left; 
width: 100%;
}
.grid-container1, .grid-container2 {
display: flex;
}
.grid-container1 figcaption {
font-size: 1rem;
padding: 5px;
float: bottom;
}

.grid-container1  {
border: 1px solid red;
}
.grid-container1 img {
display:inline-block;
vertical-align:middle;
width: 100%;
}
.grid-container2 img {
vertical-align: top;
width: 100%;
float: left;
}

<div class="grid-container1">
<figure>
<img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/210284/san-fransisco-768x432.jpg" alt="san francisco">  
<figcaption>lorem ipsum</figcaption>
</figure>
<figure>
<img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/210284/san-fransisco-768x432.jpg" alt="san francisco">    
<figcaption>lorem ipsum</figcaption>
</figure>
</div>         
<div class="grid-container2">
<figure>
<img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/210284/san-fransisco-768x432.jpg" alt="san francisco">
<figcaption>lorem ipsum</figcaption>
</figure>
<figure>
<img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/210284/san-fransisco-768x432.jpg" alt="san francisco">
<figcaption>lorem ipsum</figcaption>
</figure>
<figure>
<img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/210284/san-fransisco-768x432.jpg" alt="san francisco">
<figcaption>lorem ipsum</figcaption>
</figure>
<figure>
<img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/210284/san-fransisco-768x432.jpg" alt="san francisco">
<figcaption>lorem ipsum</figcaption>
</figure>
</div>