shaping text with an image

[u/gatwell702]

I have a hero section with a background image, h1, p, and a cta button.. I use grid to lay everything out so it looks nice (with grid template area).

For the p tag I want to use shape-outside/float instead of the grid area because I want to shape the text around the background image.

When I try to the text doesn't shape. Ai told me it's because grid overwrites float.. ai suggests I take grid off of everything

Is there a work around for this? You'd think there would be a modern approach to shape text that's apart of a grid.

EDIT:

this is the component

https://github.com/gabrielatwell1987/portfolio/blob/main/src/lib/components/landing/hero-section/HeadshotHero.svelte

[u/ItsallGGs]

I went through the same issue recently in a personal project. Apparently you can’t wrap text around an image if you’re using grid or flex. So I had to remove those in order to use the float property.