Skip to content

Creative Grids

Choose from 18 CSS Grid patterns —bento, mosaic, diamonds, hexagons and more— to build photo galleries and portfolios. The code is plain HTML and CSS, no libraries.

How to use it

  1. Pick a grid pattern.
  2. Tweak the gap, borders and hover effect.
  3. Copy the generated HTML and CSS.

FAQ

Do I need a library?
No. The output is native CSS Grid, supported by every modern browser.
What about my photos?
Swap the sample images in the HTML for yours: the grid places them following the pattern.

More tools