Desktop view

Mobile view

HTML

<div class="gallery">
  <figure>
      <img
              src="assets/images/central-park.jpg"
              alt="View of the lake of Central Park with trees" />
      <figcaption>View of the lake of Central Park with trees</figcaption>
  </figure>
  <figure>
      <img
              src="assets/images/central-park.jpg"
              alt="View of the lake of Central Park with trees" />
      <figcaption>View of the lake of Central Park with trees</figcaption>
  </figure>
  <figure>
      <img
              src="assets/images/central-park.jpg"
              alt="View of the lake of Central Park with trees" />
      <figcaption>View of the lake of Central Park with trees</figcaption>
  </figure>
  <figure>
      <img
              src="assets/images/central-park.jpg"
              alt="View of the lake of Central Park with trees" />
      <figcaption>View of the lake of Central Park with trees</figcaption>
  </figure>
  <figure>
      <img
              src="assets/images/central-park.jpg"
              alt="View of the lake of Central Park with trees" />
      <figcaption>View of the lake of Central Park with trees</figcaption>
  </figure>
  <figure>
      <img
              src="assets/images/central-park.jpg"
              alt="View of the lake of Central Park with trees" />
      <figcaption>View of the lake of Central Park with trees</figcaption>
  </figure>
  <figure>
      <img
              src="assets/images/central-park.jpg"
              alt="View of the lake of Central Park with trees" />
      <figcaption>View of the lake of Central Park with trees</figcaption>
  </figure>
  <figure>
      <img
              src="assets/images/central-park.jpg"
              alt="View of the lake of Central Park with trees" />
      <figcaption>View of the lake of Central Park with trees</figcaption>
  </figure>
  <figure>
      <img
              src="assets/images/central-park.jpg"
              alt="View of the lake of Central Park with trees" />
      <figcaption>View of the lake of Central Park with trees</figcaption>
  </figure>

</div>

CSS

.gallery {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    column-gap: 10px;
    row-gap: 5px;
    justify-content: center;

    margin-top: 30px;
    margin-bottom: 30px;
    margin-right: 10px;
    margin-left: 10px;

}
.gallery figure {
    width: 35%;
    @media (max-width: 437px) {
        width: 100%;
    }
    min-width: 200px;
}
.gallery figcaption {
    font-family: "Roboto", sans-serif;
    font-optical-sizing: auto;
    font-weight: 100;
    font-style: normal;
    font-variation-settings: "wdth" 100;
    font-size: 0.5em;
    padding-left: 5px;
}