Creating a Puzzle-Piece Look with CSS Grid

Hi!

I’m new to website creation/webflow, and I’m working with a designer to build a website for an organization I volunteer for. They’ve suggested having a layout with puzzle-piece-shaped designs (see screenshot). I’m attempting to make this using a Grid object, but I’m having a hard time. Any suggestions on how to move forward?

Thank you so much for the help!

image


Here is my site Read-Only

hi @treeactionseattle I’m not surprised as you have choose one of most challenging design and believe me you will spend a lot of time on it if you would like to make it and more time if you would like to make it responsive. You should explain your designer tag web window has limitation and it is not a paper.

The main challenge are round inside corners. There is a way for text by using SVG and I have recently posted example. You can also check YT video from Kevin Powell (CSS Guru ) where he use different approach. But to be you I will start with something much much simpler.

Anyway, good luck

1 Like