Grid and art direction

Fran

Most blog-like websites nowadays have full-bleed pictures, or constrain them within the same margins. I enjoy a bit of variety, courtesy some old CSS full of floats. I'd like to bring some of these pages into the ~~future~~ present, and switch to a grid layout. My use cases, assuming I have a main column of text, and some space on both sides:

Full bleed pictures: extend on both sides of the text
Small pictures on the side: live next to the text but do not displace it
Large pictures on the side: take up the empty space on one side of the text, but also some of the main column, narrowing the space available for text, for the height of the picture; this used to be the reign of float: right

Do you have any experience or suggested articles about 'floating' pictures around text, within a grid template?

artlung

Fran It's a solid question. I find myself wanting to see an example of how an existing page or pages is currently marked up. I can give you a solution for "ideal markup" but that seems less helpful than ideation for "your actual situation."

It's also possible my bias for looking at actual markup is not necessary for other answerers - StackOverflow may be able to give you good guidance.

In general for what you describe I like to start with a layout that will account for the narrowest (phone) viewports and what I want things to look like and how to behave for that screen, and then I think about how I want the page to adapt as more room becomes available in width and sometimes height. Knowing what you hope for will guide how this could work. Also, it was pointed out to me in a HWC EU meeting in May: There are still solid uses of floats. I tend to avoid them, but for your side image concept you may get usable results. https://indieweb.org/events/2025-05-28-hwc-europe

Fran

Hey @artlung 👋
The markup here would be fairly conventional for long-form content: heading, paragraphs, a rare list, and <figure> elements containing images and captions. In my current implementation, it's the <figure> tags which get a class, and decide how much space the pictures will take.

Your question actually pushed me to start a prototype, so I'll prepare a few samples and play with the layouts I'd like to see. Code is actually a good starting point for something like this!