Rapha is the poster child #
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.
Split figures example #
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
<figcaption> tags in conjunction with CSS
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 code based on flex-box #
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
<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
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
Also, adding a
<div> to get proper image formatting is not my cup of tea.
The code based on grid #
grid-based CSS code is shorter and more versatile in my view. It´s possible to use
row-gap and also splitting a
<figure> into two images is possible. Artificial
<div> elements are not needed at all.
Don´t limit yourself to figure tags #
If you want to apply the split not only for
<figure> tags, you can even use the following
.split CSS class, which is more generic: