snippetcssTip

Responsive image mosaic

Submitted by: @import:30-seconds-of-code·Mar 2, 2026·

Viewed 0 times

mosaicimageresponsivecss

Problem

CSS grid is one of the most powerful tools in modern web design. It allows you to create complex layouts with ease, making it perfect for creating image mosaics.
By using display: grid, you can create a responsive grid layout that adapts to different screen sizes. You can also use grid-row: span 2 / auto and grid-column: span 2 / auto to create items that span two rows or two columns respectively. Finally, you can wrap these styles in a media query to avoid applying them on small screen sizes, making sure your layout looks great on all devices.
https://codepen.io/chalarangelo/pen/XWvbQjz

Solution

.image-mosaic {
  display: grid;
  gap: 1rem;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  grid-auto-rows: 240px;
}

@media screen and (min-width: 600px) {
  .card-tall {
    grid-row: span 2 / auto;
  }

  .card-wide {
    grid-column: span 2 / auto;
  }
}

https://codepen.io/chalarangelo/pen/XWvbQjz

Code Snippets

.image-mosaic {
  display: grid;
  gap: 1rem;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  grid-auto-rows: 240px;
}

@media screen and (min-width: 600px) {
  .card-tall {
    grid-row: span 2 / auto;
  }

  .card-wide {
    grid-column: span 2 / auto;
  }
}

Context

From 30-seconds-of-code: image-mosaic

Revisions (0)

No revisions yet.