I have a particular design of 4 paragraphs, that are positioned in a 2 x 2 grid. In the middle is an image of an almost round circle though, and the idea is that the texts wrap around the circle, as you can see in the Figma screenshot:
I tried the following but the results were not good after publishing, and it’s also a quite hacky way of working: first I built a container with fixed width and height, with div with 2 rows and 2 columns. In each cell I added the header and paragraph, and also a smaller circle. I positioned them relatively and let them float, and then added the custom property “shape-outside: circle()”, to let the text wrap around the smaller circle in the div. Then positioned the circle with margin left and right and hid it for all four cells.
After that I added another div as a sibling to the grid wrapper, and gave it the same dimensions with position absolute. I added the “real” circle that needs to be visible and centered it with flex. It all looked pretty neat in the designer, and by logic the circle should be in the middle, but after publishing the styling still was messed up.
Wondering if there are more clean ways to do this, any directions would be very much appreciated. Here’s a read-only link. (I now removed the above since I had to show my progress to my client).
Add one more row between these two rows but keep that row’s height as fixed, may be 5rem. Don’t set overflow to hidden, leave it to visible. Then place 1 div and expand it to two columns by dragging it.
Then add the image to this new row make the div as flex with center align and center justified.
After that it’s about your padding inside the divs fo the cells and alignment of the text.
Thanks for helping out! That does indeed seem like a nice solution, even without custom code. The only thing still lacking is the text wrapping around the circle. My solution would be to add a circle to a every cell and move it to a position more or less resembling the big circle in the middle, and then setting display to none and float left/right, this way making the text in the cell float around it. The thing is it feels ‘hacky’ and positioning the hidden circles by playing with their margins isn’t really precise. Is there another way? If not I’ll gladly go by your solution and approach the text wrapping with the above mentioned method.
Hi usarora, I tried it and it seemed to work for a few days, but then it sometimes broke for some reason (circle moved to the left, area collapsed to 1 column I guess), so fell back to use the grid for the content, and an absolute positioned div for the circle image. Last time I used specific widths and heights, but now was able to do it in a way that the wrapper followed the width and height of the grid, so the background image is staying nicely in the center. Again cheers for helping out.
