I like how this layout works across mobile, tablet and desktop. I think minmax is going to be a favorite layout friend. Oh yea, I'm also using CSS multi-column layout.

View Layout 6: Walt Disney Concert Hall

Code sample

<style type="text/css">
      body {
        font-family: 'Noto Sans', sans-serif;
        display: grid;
        grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
        grid-gap: 2vw;
        max-height: 100%;
      }


      /* media break at 600px; */
      @media (min-width: 37.5em) {
        header {
          grid-row: 1;
          grid-column: 2 / -1;
        }

        .top {
          column-count: 3;
          column-gap: 2vw;
          column-width: 300px;
          grid-row: 3 / 4;
          grid-column: 2 / -1;
        }

        .bottom {
          column-count: 3;
          column-gap: 2vw;
          column-width: 300px;
          grid-row: 7 / 8;
          grid-column: 2 / -1;
        }
      }

      figure {
        display: grid;
        grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
        grid-gap: 1vw;
        margin: 0;
      }

      @media (min-width: 37.5em) {
        figure {
          grid-row: 4 / 6;
          grid-column: 1 / -1;
          margin: 0;
          display: grid;
          grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
          grid-gap: 1vw;
        }
      }

     
      }

    </style>