Masonry Grid Style 5

HTML

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Masonary Template 5</title>

  </head>
  <body>
    <!-- Masonary Grid -->
    <section class="masonary-grid-5">
      <div class="masonary-grid-5-wrap">

        <!-- Heading -->
        <div class="masonary-grid-title">
          <h1 class="">Masonry Grid</h1>
        </div>
        <!-- Headding end -->

        <!-- Row -->
        <div class="masonary-grid-5-row masonary-grid">

          <!-- Item -->
          <div class="masonary-grid-5-item large">
            <div class="masonary-grid-5-card">
              <a href="#" class="masonary-grid-5-image-link">
                <img src="https://img.freepik.com/free-photo/wide-angle-shot-single-tree-growing-clouded-sky-during-sunset-surrounded-by-grass_181624-22807.jpg?t=st=1700828300~exp=1700828900~hmac=8eaad81f3e3a100826b217fcfa37f9e819c5b88b35b00c450dfe621a7e0764e9" alt="" />
              </a>
              <div class="masonary-grid-5-content">
                <div class="masonary-grid-5-meta">
                  <span class="time"> Times Now </span>
                </div>
                <a href="#">
                <h2 class="masonary-grid-5-title">Explained: Why Was Glenn Maxwell Not Permitted A Runner In Mumbai Despite...</h2>
                </a>
                <p class="masonary-grid-5-desc">Australian allrounder Glenn Maxwell on Tuesday pulled off a heist over Afghanistan, scoring an unbeaten 201 in a chase of 292 to script history at script history  script history </p>
              </div>
            </div>
          </div>
          <!-- Item End -->

          <!-- Item -->
          <div class="masonary-grid-5-item medium">
            <div class="masonary-grid-5-card">
              <a href="#" class="masonary-grid-5-image-link">
              <img src="https://img.freepik.com/free-photo/lake-mountains_1204-502.jpg?t=st=1700828300~exp=1700828900~hmac=d09951e77537e873a0eea8cd6fef8d0c3702d350ff224266823ed7156dba27fe" alt="" />
              </a>
              <div class="masonary-grid-5-content">
                <div class="masonary-grid-5-meta">
                  <span class="time"> Times Now </span>
                </div>
                <a href="#">
                <h2 class="masonary-grid-5-title">Explained: Why Was Glenn Maxwell Not Permitted A Runner In Mumbai Despite...</h2>
                </a>
                <p class="masonary-grid-5-desc">Australian allrounder Glenn Maxwell on Tuesday pulled off a heist over Afghanistan, scoring an unbeaten 201 in a chase of 292 to script history at</p>
              </div>
            </div>
          </div>
          <!-- Item End -->

          <!-- Item -->
          <div class="masonary-grid-5-item long">
            <div class="masonary-grid-5-card">
              <a href="#" class="masonary-grid-5-image-link">
              <img src="https://img.freepik.com/free-photo/colorful-beautiful-flowers-background-blossom-floral-bouquet-decoration-garden-flowers-plant-vertical-pattern-wallpapers-greeting-cards-postcards-design-wedding-invites_90220-1099.jpg?t=st=1700828300~exp=1700828900~hmac=383830de6ee05118a254f65c17292c801c10ea74f3f1153b2fe2c4583964ee7c" alt="" />
              </a>
              <div class="masonary-grid-5-content">
                <div class="masonary-grid-5-meta">
                  <span class="time"> Times Now </span>
                </div>
                <a href="#">
                <h2 class="masonary-grid-5-title">Explained: Why Was Glenn Maxwell Not Permitted A Runner In Mumbai Despite...</h2>
                </a>
                <p class="masonary-grid-5-desc">Australian allrounder Glenn Maxwell on Tuesday pulled off a heist over Afghanistan, scoring an unbeaten 201 in a chase of 292 to script history at...</p>
              </div>
            </div>
          </div>
          <!-- Item End -->

          <!-- Item -->
          <div class="masonary-grid-5-item medium">
            <div class="masonary-grid-5-card">
              <a href="#" class="masonary-grid-5-image-link">
              <img src="https://img.freepik.com/free-photo/sky-clouds-cinematic-clouds-wallpaper-5_1562-742.jpg?t=st=1700828300~exp=1700828900~hmac=7242b829a4c9c55868287ef7b99398694e5c023c3115cda044dd04cecd32b9f2" alt="" />
              </a>
              <div class="masonary-grid-5-content">
                <div class="masonary-grid-5-meta">
                  <span class="time"> Times Now </span>
                </div>
                 <a href="#">
                <h2 class="masonary-grid-5-title">Explained: Why Was Glenn Maxwell Not Permitted A Runner In Mumbai Despite...</h2>
                </a>
                <p class="masonary-grid-5-desc">Australian allrounder Glenn Maxwell on Tuesday pulled off a heist over Afghanistan, scoring an unbeaten 201 in a chase of 292 to script history at...</p>
              </div>
            </div>
          </div>
          <!-- Item End -->

          <!-- Item -->
          <div class="masonary-grid-5-item small">
            <div class="masonary-grid-5-card">
              <a href="#" class="masonary-grid-5-image-link">
              <img src="https://img.freepik.com/free-photo/aerial-beautiful-shot-seashore-with-hills-background-sunset_181624-24143.jpg?t=st=1700828300~exp=1700828900~hmac=ea09c702662a61518bf975541ccf4ac5ba3e171a77c043692ecce32add4b96a1" alt="" />
              </a>
              <div class="masonary-grid-5-content">
                <div class="masonary-grid-5-meta">
                  <span class="time"> Times Now </span>
                </div>
                 <a href="#">
                <h2 class="masonary-grid-5-title">Explained: Why Was Glenn Maxwell Not Permitted A Runner In Mumbai Despite...</h2>
                </a>
                <p class="masonary-grid-5-desc">Australian allrounder Glenn Maxwell on Tuesday pulled off a heist over Afghanistan, scoring an unbeaten 201 in a chase of 292 to script history at...</p>
              </div>
            </div>
          </div>
          <!-- Item End -->

          <!-- Item -->
          <div class="masonary-grid-5-item small">
            <div class="masonary-grid-5-card">
              <a href="#" class="masonary-grid-5-image-link">
              <img src="https://img.freepik.com/free-photo/wide-angle-shot-single-tree-growing-clouded-sky-during-sunset-surrounded-by-grass_181624-22807.jpg?t=st=1700828300~exp=1700828900~hmac=8eaad81f3e3a100826b217fcfa37f9e819c5b88b35b00c450dfe621a7e0764e9" alt="" />
              </a>
              <div class="masonary-grid-5-content">
                <div class="masonary-grid-5-meta">
                  <span class="time"> Times Now </span>
                </div>
                 <a href="#">
                <h2 class="masonary-grid-5-title">Explained: Why Was Glenn Maxwell Not Permitted A Runner In Mumbai Despite...</h2>
                </a>
                <p class="masonary-grid-5-desc">Australian allrounder Glenn Maxwell on Tuesday pulled off a heist over Afghanistan, scoring an unbeaten 201 in a chase of 292 to script history at...</p>
              </div>
            </div>
          </div>
          <!-- Item End -->

          <!-- Item -->
          <div class="masonary-grid-5-item large">
            <div class="masonary-grid-5-card">
              <a href="#" class="masonary-grid-5-image-link">
              <img src="https://img.freepik.com/free-photo/vestrahorn-mountains-stokksnes-iceland_335224-667.jpg?t=st=1700828300~exp=1700828900~hmac=f3293887e8ede66d16f27cf4ddde97ca336eff6641406ebb2e1182236e22113e" alt="" />
              </a>
              <div class="masonary-grid-5-content">
                <div class="masonary-grid-5-meta">
                  <span class="time"> Times Now </span>
                </div>
                 <a href="#">
                <h2 class="masonary-grid-5-title">Explained: Why Was Glenn Maxwell Not Permitted A Runner In Mumbai Despite...</h2>
                </a>
                <p class="masonary-grid-5-desc">Australian allrounder Glenn Maxwell on Tuesday pulled off a heist over Afghanistan, scoring an unbeaten 201 in a chase of 292 to script history at...</p>
              </div>
            </div>
          </div>
          <!-- Item End -->

          <!-- Item -->
          <div class="masonary-grid-5-item wide">
            <div class="masonary-grid-5-card">
              <a href="#" class="masonary-grid-5-image-link">
              <img src="https://img.freepik.com/free-photo/leaf-nature-backgrounds-pattern-illustration-plant-backdrop-design-abstract-vibrant-green-nature-wallpaper-illustration-generative-ai_188544-12680.jpg?t=st=1700828300~exp=1700828900~hmac=b2bd2305ae513f46d599c6a77cb33e1472c2395d9aaf855490ea43875c20ad15" alt="" />
              </a>
              <div class="masonary-grid-5-content">
                <div class="masonary-grid-5-meta">
                  <span class="time"> Times Now </span>
                </div>
                <a href="#">
                <h2 class="masonary-grid-5-title">Explained: Why Was Glenn Maxwell Not Permitted A Runner In Mumbai Despite...</h2>
                </a>
                <p class="masonary-grid-5-desc">Australian allrounder Glenn Maxwell on Tuesday pulled off a heist over Afghanistan, scoring an unbeaten 201 in a chase of 292 to script history at...</p>
              </div>
            </div>
          </div>
          <!-- Item End -->

        </div>
      </div>
    </section>

    <script src="assets/js/main.js"></script>
  </body>
</html>

CSS

* {
    margin: 0;
    padding: 0;
    box-sizing:border-box;
}

body {
    background-color: #f4f4f4;
}

.masonary-grid-title {
    margin-bottom: 3rem;
    font-size: 48px;
    line-height: 1.2;
    font-family: 'Inter', sans-serif;
    font-weight: 600;
}

.masonary-grid-5-wrap {
    max-width: 1320px;
    margin: auto;
}

.masonary-grid-5 {
    padding-block:3rem;

    --gird-accent-color:#E60000;
    --grid-primary-color:#000;
    --grid-secondary-color:#000;
}

.masonary-grid-5-wrap {
    padding-inline:1rem;
}

.masonary-grid-5-row.masonary-grid {
    display: grid;
    grid-template-columns: repeat(3 , 1fr);
    grid-template-rows: 200px;
    grid-auto-rows: 200px;
    gap: 40px;    
    font-family: 'Inter', sans-serif;

    .masonary-grid-5-item {
        background-color: #f4f4f4;
        grid-row: span 2;
        overflow: hidden;
        border-radius: 30px;
        box-shadow:0px 0px 16px -5px rgba(0, 0, 0, 0.24);
        position: relative;
        z-index: 1;
    
        .masonary-grid-5-content {
            padding: 1rem 20px;  
            display: grid;
            align-content: center;
        }

        .masonary-grid-5-content a {
            text-decoration: none;

            &:hover .masonary-grid-5-title {
                color: var(--gird-accent-color);
            }
        }

        .masonary-grid-5-image-link {
            overflow: hidden;
        }

        .masonary-grid-5-desc {
            font-family: 'Inter', sans-serif;
            color: var(--grid-secondary-color);
            font-size: 16px;
        }

        .masonary-grid-5-meta {
            font-family: 'Inter', sans-serif;
            font-size: 16px;
            font-weight: 400;
            color: var(--gird-accent-color);
        }

        .masonary-grid-5-title {
            margin-block: .5rem .75rem;
            font-family: 'Inter', sans-serif;
            color:var(--grid-primary-color);
            font-size: 28px;
            line-height: 1.3;
            font-weight: 600;
            transition: .25s;
        }

        & img {
            height: 100%;
            width: 100%;
            object-fit: cover;
            filter: brightness(0.8);
            transition: .5s;
            display:block;
        }

        & img:hover {
            scale: 1.05;
        }

        .masonary-grid-5-card {
            height: 100%;
        }
    }

    /* Wide Column */
    .masonary-grid-5-item.wide {
        grid-column: span 3;
        grid-row: span 2;

        .masonary-grid-5-content {
            position: absolute;
            bottom: .5rem;
            max-width: 65%;
        }

        .masonary-grid-5-title {
             display: -webkit-box;
            -webkit-line-clamp: 2;
            overflow: hidden;
            -webkit-box-orient: vertical;
            color: #fff;
        }

        .masonary-grid-5-desc {
            display: -webkit-box;
            -webkit-line-clamp: 2;
            overflow: hidden;
            -webkit-box-orient: vertical;
            color: #fff;
        }

        .masonary-grid-5-meta {
            color: #bdbdbd;   
        }

        .masonary-grid-5-content a:hover .masonary-grid-5-title {
            color: #bdbdbd;
        }
 
    }

    /* Long Column */
    .masonary-grid-5-item.long {
        grid-row: span 4;

        .masonary-grid-5-card {
            display: grid;
        }
    }

    /* Large Column */
    .masonary-grid-5-item.large {
        grid-column: span 2;
        grid-row: span 2;

        .masonary-grid-5-title {
            display: -webkit-box;
            -webkit-line-clamp: 6;
            overflow: hidden;
            -webkit-box-orient: vertical;
        }

        .masonary-grid-5-desc {
            display: -webkit-box;
            -webkit-line-clamp: 5;
            overflow: hidden;
            -webkit-box-orient: vertical;
        }

        .masonary-grid-5-card {   
            display: grid;
            grid-template-columns: 65% 35%;
        }

    }

    /* Medium Column */
    .masonary-grid-5-item.medium {
        grid-row: span 2;

         .masonary-grid-5-title {
            display: -webkit-box;
            -webkit-line-clamp: 2;
            overflow: hidden;
            -webkit-box-orient: vertical;
            margin-bottom: 0;
        }

        .masonary-grid-5-desc {
            display: none;
        }

        .masonary-grid-5-card {
            display: grid;
            grid-template-rows: 65% 35%;
        }
    }

    /* Small Column */
    .masonary-grid-5-item.small {
        grid-row: span 1;

        .masonary-grid-5-meta {
            display: none;
        }

        .masonary-grid-5-desc {
            display: none;
        }

        .masonary-grid-5-content {
            position: absolute;
            bottom: 0;
            left: 0;
            width: 100%;
            padding-inline:25px;
        }

        .masonary-grid-5-title {
             display: -webkit-box;
            -webkit-line-clamp: 2;
            overflow: hidden;
            -webkit-box-orient: vertical;
            color: #fff;
        }

        .masonary-grid-5-content a:hover .masonary-grid-5-title {
            color: #bdbdbd;
        }
        
    }

}

/* Tablet */
@media only screen and (max-width:1200px) {
    .masonary-grid-5-row.masonary-grid .masonary-grid-5-item .masonary-grid-5-title {
        font-size: 24px;
    }

    .masonary-grid-5-row.masonary-grid {
        gap: 20px;
    }
}

/* Mobile Responsive */
@media only screen and (max-width:767px) {
    .masonary-grid-5-row.masonary-grid {
        display: block;
    }

    .masonary-grid-5-row.masonary-grid .masonary-grid-5-item.large .masonary-grid-5-card {
        display: block;
    }

    .masonary-grid-5-row.masonary-grid .masonary-grid-5-item.wide .masonary-grid-5-content {
        width: 100%;
        max-width: 100%;
    }

    .masonary-grid-5-row.masonary-grid .masonary-grid-5-item {
        margin-bottom: 3rem;
    }
}

Links

 <!-- Font Family -->
    <link rel="preconnect" href="https://fonts.googleapis.com">
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
    <link href="https://fonts.googleapis.com/css2?family=Inter:wght@100;200;300;400;500;600;700;800;900&display=swap" rel="stylesheet">