4 replies

Inlining headings at start of paragraph in a grid container?

front-end

Background: To make a long-form text with numerous headings more readable, our designer decided to inline the headings so that the paragraph text follows on the same line. I know I could simply

strong

strong

these headings but that loses their semantic/structural meaning as headings. We have a grid layout with three columns – which is needed for the image layout variants (not shown here); hence no flex.

The style is easy-enough to achieve:

h3, h3 + p {display:inline;}

h3, h3 + p {display:inline;}

makes them to run into each other. It has a few quirks, though: it seems an inline element doesn't play nicely with block margins or max-width.

The problem begins once this is placed in a grid context, as the grid child status interferes with the inline styling. If I wrap the text in a block wrapper, the block wrapper becomes the grid child, and the h3 + p inlining works. The CMS outputs clean html, so to achieve this, I have to post-process the CMS output to insert the wrappers.

Is there any way to achieve the inline headings + paragraph while retaining clean markup? Any suggestions much appreciated.

I made a fully commented flems.io playground showing both non-working and working (with wrapper) variants: https://jools.link/3uswu (nothing funny, just my personal short-url link)

Flems

Flems is a Playground for web development. Use it for examples, presentations, documentation, issues and what not.