Why do captions break my responsive img grid?-CodePudding

Blockquote Hello, I'm trying to make a responsive img grid with the following : 2 imgs at the top, sharing 50% of the space, and 4 imgs underneath with the same aspect ratio.

The grid works just fine, until I've decided to add a small caption. What am I doing wrong ?

Thank you, have a nice one,

Kieran.

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

CodePudding user response：

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

CodePudding user response：

Try this:

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