Every now and then the folks at Rapha are splitting the contents of a <figure> equally into an image (e.g. left half of the available space), and the corresponding caption (e.g. right half). This can be seen for example in “Riding the Pendulum.” I think the layout is emphasizing the image and I enjoy the appearence very much.
To make the HTML of Rapha´s approach more semantic – while keeping it responsive – I´ve come up with a simplified approach that´s relying on the <figure> and <figcaption> tags in conjunction with CSS grid.
In the below example, the first two figures use the split technique. Each image will only take half of the available space and the caption of the image will take the other half. The next two images are also using the split technique. In this case each image takes half of the available space with a below caption. The fifth figure is not using the split technique – the image will always occupy the entire available space.
The split is built around the <figure> tag, and the CSS for the split will only become active at a screen width of at least 600px. Up to that point you have pretty normal <figure> and <figcaption> behavior (depending on your CSS).
My first attempt to solve the problem was with flex. I do not recommend this one. I only keep it here to make my thought-process visible. My suggestion is to use the grid-based approach further below! The above shown examples are not based on flex but on grid.
The flex-box attempt turned out to be limited. The gap property cannot be used, because it´s currently only supported by Firefox and Chrome. Therefore padding has to be used for the figcaption, which again makes the solution less versatile. Say, if you wanted to have a <figure> with two split images inside, instead of an image and a <figcaption>, that wouldn´t be possible with the above flex approach.
Also, adding a <div> to get proper image formatting is not my cup of tea.
The grid-based CSS code is shorter and more versatile in my view. It´s possible to use column-gap and row-gap and also splitting a <figure> into two images is possible. Artificial <div> elements are not needed at all.