<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <link rel="stylesheet" href="style.css" />
    <title>Responsive Image Mosaic</title>
  </head>
  <body>
    <div class="image-mosaic">
      <div
        class="card card-tall card-wide"
        style="background-image: url('https://picsum.photos/id/564/1200/800')"
      ></div>
      <div
        class="card card-tall"
        style="background-image: url('https://picsum.photos/id/566/800/530')"
      ></div>
      <div
        class="card"
        style="background-image: url('https://picsum.photos/id/575/800/530')"
      ></div>
      <div
        class="card"
        style="background-image: url('https://picsum.photos/id/626/800/530')"
      ></div>
      <div
        class="card"
        style="background-image: url('https://picsum.photos/id/667/800/530')"
      ></div>
      <div
        class="card"
        style="background-image: url('https://picsum.photos/id/678/800/530')"
      ></div>
      <div
        class="card card-wide"
        style="background-image: url('https://picsum.photos/id/695/800/530')"
      ></div>
      <div
        class="card"
        style="background-image: url('https://picsum.photos/id/683/800/530')"
      ></div>
      <div
        class="card"
        style="background-image: url('https://picsum.photos/id/693/800/530')"
      ></div>
      <div
        class="card"
        style="background-image: url('https://picsum.photos/id/715/800/530')"
      ></div>
      <div
        class="card"
        style="background-image: url('https://picsum.photos/id/610/800/530')"
      ></div>
      <div
        class="card"
        style="background-image: url('https://picsum.photos/id/599/800/530')"
      ></div>
    </div>
  </body>
</html>
.image-mosaic {
    display: grid;
    gap: 1rem;
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
    grid-auto-rows: 240px;
  }
  
  .card {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    background: #353535;
    font-size: 3rem;
    color: #fff;
    box-shadow: rgba(3, 8, 20, 0.1) 0px 0.15rem 0.5rem, rgba(2, 8, 20, 0.1) 0px 0.075rem 0.175rem;
    height: 100%;
    width: 100%;
    border-radius: 4px;
    transition: all 500ms;
    overflow: hidden;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    padding: 0;
    margin: 0;
  }
  
  @media screen and (min-width: 600px) {
    .card-tall {
      grid-row: span 2 / auto;
    }
  
    .card-wide {
      grid-column: span 2 / auto;
    }
  }
Run Pen

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.