19 CSS Image Grids
This collection combines best practices for building responsive image grids using CSS Grid and Flexbox. It leverages grid-auto-flow: dense and spanning techniques to mimic tight Masonry packing, while aspect-ratio prevents layout shifts during loading. For justified galleries, flex-grow logic is applied, allowing images to fill rows completely. All solutions are fully responsive thanks to the minmax() function and ensure perfect cropping via object-fit: cover.
Last updated:
Single Image with Squircle Shape and Inner Shadow
Explore the power of CSS Grid with auto-fit for a responsive layout and SVG filtering techniques to give images a trendy squircle outline and unique shadow effect.
Scroll-Driven Grid Animation with CSS-Doodle
A mesmerizing scroll-driven image grid powered by the cutting-edge animation-timeline: view() CSS property and the <css-doodle> web component.
Pure CSS Responsive Hex Grid
An adaptive hexagonal grid without media queries, built on Container Queries, where the column count and the position of each element are calculated in CSS via complex calc() functions. The code demonstrates progressive enhancement - with a fallback to @property and a tan(atan2()) math trick to emulate division in older browsers.
