Is there a way to make the text wrap around the picture in this grid layout?
Hi, I got inspired by Kevin to try to use grid more! I was wondering if it was possible to wrap the text around the picture in this grid setup (as float is not respected on a grid item)
4 Replies
I have no doubt that Kevin or pretty much anybody with a better handle on grids will be able to come up with a far better solution but, in the mean time...
One thing that springs to mind is using a subgrid but with that you would need to rely on the text content being dived into separate elements (eg. <p>) and that the content of the first block is long enough to fill the space..... but then this isn't going to be very responsive 🤔
This was my initial version using subgrid.
It is "ok" on larger screens as I have set the text length to fit. However on smaller screen widths it clearly doesn't work.
https://codepen.io/cbolson/pen/ExBpemP
An alternative, better and simpler solution, would be to keep the image in the same grid area as the text and use float and some positioning.
Here is my version using this second method:
https://codepen.io/cbolson/pen/XWLBPab
I would recommend the float solution, personally. It's pretty much exactly what float is made for
these solutions are exactly what I was looking for!!! thank you so much, I still have so much to learn hahaha
https://www.youtube.com/watch?v=Bp3sEXCYnSM Is a new video which helps with wrapping and custom shapes. Not sure how it works with grid so it could use some experimentation.
Optimistic Web
YouTube
Effortlessly wrap text around shapes with CSS shape-outside ✨
In today’s mind-blowing CSS tutorial, we’re diving deep into the world of CSS with an epic focus on the CSS shape-outside property! This game-changing CSS trick lets you create stunning, custom shapes that your text can wrap around effortlessly. Say goodbye to boring layouts and hello to magazine-style designs with a modern twist. Whether you’re...