How to get equal vertical spacing after a spanner in a CSS multi-column layout?
Problem Description:
As a minimal example, this CodePen contains a div element with two columns of text. This div, in turn, contains a h2 element spanning both columns (i.e. a spanner, see e.g. MDN). The vertical space following it is clearly not equal for the two columns, though I’d like it to be.
One way to fix this would be to (locally) modify the margin-top of the p element following a spanner (which, instead of a heading, could also be a figure, table, …). However, I wondered whether there is a different approach I’m overlooking.
snippet:
.twoColumns {
width: 70vw;
margin: 0 auto;
column-count: 2;
}
h2 {
column-span: all;
}
h2+p {
/* margin-top: 0; /* Potential solution */
}<div class="twoColumns">
<h2>Sapien faucibus et molestie ac feugiat. Phasellus egestas tellus rutrum tellus pellentesque eu tincidunt.</h2>
<p>Sapien faucibus et molestie ac feugiat. Phasellus egestas tellus rutrum tellus pellentesque eu tincidunt. Posuere ac ut consequat semper viverra. Curabitur gravida arcu ac tortor dignissim convallis aenean et tortor. Quam elementum pulvinar etiam non
quam lacus. Risus pretium quam vulputate dignissim suspendisse in. Placerat orci nulla pellentesque dignissim enim sit amet. Nunc eget lorem dolor sed viverra ipsum nunc. Congue mauris rhoncus aenean vel elit scelerisque mauris. Maecenas pharetra
convallis posuere morbi leo. Eu facilisis sed odio morbi quis commodo. Vitae et leo duis ut diam quam nulla porttitor.</p>
<p>Est lorem ipsum dolor sit amet. Fusce ut placerat orci nulla pellentesque dignissim enim sit amet. Scelerisque viverra mauris in aliquam sem fringilla. Id porta nibh venenatis cras sed felis. Vulputate dignissim suspendisse in est. Mi in nulla posuere
sollicitudin aliquam ultrices sagittis orci a. Est ullamcorper eget nulla facilisi. Dictumst vestibulum rhoncus est pellentesque elit ullamcorper dignissim cras. Urna nec tincidunt praesent semper feugiat nibh sed pulvinar proin. Facilisis magna etiam
tempor orci eu lobortis elementum nibh. Aliquet sagittis id consectetur purus ut. Nisl tincidunt eget nullam non nisi. Risus nec feugiat in fermentum posuere urna nec. Ullamcorper eget nulla facilisi etiam. Consequat mauris nunc congue nisi vitae
suscipit tellus mauris. Magna ac placerat vestibulum lectus mauris ultrices eros. Et pharetra pharetra massa massa ultricies mi quis hendrerit. Nibh cras pulvinar mattis nunc sed blandit libero. Pharetra sit amet aliquam id diam maecenas.</p>
</div>Solution – 1
There’s nothing against changing the margin of the first <p> after a <hx>.
Because I prefer using the border-box model I find it particularly inconvenient having to deal with CSS default margin assigned to elements, esp. in calculations (having to subtract margins when using total width).
In general I would opt for * { box-sizing: border-box; margin: 0 } and use padding where required.
The commented snippet shows the above with class .demo.
.twoColumns {
width: 70vw;
margin: 0 auto;
column-count: 2;
}
h2 {
column-span: all;
}
h2 + p {
/* margin-top: 0; /* Potential solution */
}
/***********************/
/* SO74703923 Solution */
/***********************/
.demo, .demo * { box-sizing: border-box }
.demo>* {
margin: 0; /* remove all CSS default margins */
}
.demo>h2 {
padding: 0.83em 0; /* default spacing for <h2> */
}
.demo>p {
/* padding: 1em 0; /* default spacing for <p> */
padding-bottom: 1em; /* is what we need */
}
/**************************************************************/
/* Bonus: varying number of columns, viewport width depending */
/**************************************************************/
.demo {
column-count: auto; /* reset .twoColumns setting */
/*
Responsive behaviour
Instead of defining fixed two columns we can determine the required
number of pixels per column on the narrowest and the widest viewport breakpoint.
As an example I choose (regardless of above width: 70vw)
- 300px on a 320px viewport (1 column) and
- 240px on a 960px viewport (4 columns)
- [OPTIONAL] clamp the result to stay within given sizes c.q. number of columns
- convert result to 'REM' unit
- CSS 'column' mechanism takes care of horizontal distribution
*/
/* using y=mx+b for points p1(320,300) and p2(960,240) */
column-width: clamp(15rem, -9.375vw + 20.625rem, 18.75rem);
}<div class="twoColumns">
<h2>Sapien faucibus et molestie ac feugiat. Phasellus egestas tellus rutrum tellus pellentesque eu tincidunt.</h2>
<p>Sapien faucibus et molestie ac feugiat. Phasellus egestas tellus rutrum tellus pellentesque eu tincidunt. Posuere ac ut consequat semper viverra. Curabitur gravida arcu ac tortor dignissim convallis aenean et tortor. Quam elementum pulvinar etiam non quam lacus. Risus pretium quam vulputate dignissim suspendisse in. Placerat orci nulla pellentesque dignissim enim sit amet. Nunc eget lorem dolor sed viverra ipsum nunc. Congue mauris rhoncus aenean vel elit scelerisque mauris. Maecenas pharetra convallis posuere morbi leo. Eu facilisis sed odio morbi quis commodo. Vitae et leo duis ut diam quam nulla porttitor.</p>
<p>Est lorem ipsum dolor sit amet. Fusce ut placerat orci nulla pellentesque dignissim enim sit amet. Scelerisque viverra mauris in aliquam sem fringilla. Id porta nibh venenatis cras sed felis. Vulputate dignissim suspendisse in est. Mi in nulla posuere sollicitudin aliquam ultrices sagittis orci a. Est ullamcorper eget nulla facilisi. Dictumst vestibulum rhoncus est pellentesque elit ullamcorper dignissim cras. Urna nec tincidunt praesent semper feugiat nibh sed pulvinar proin. Facilisis magna etiam tempor orci eu lobortis elementum nibh. Aliquet sagittis id consectetur purus ut. Nisl tincidunt eget nullam non nisi. Risus nec feugiat in fermentum posuere urna nec. Ullamcorper eget nulla facilisi etiam. Consequat mauris nunc congue nisi vitae suscipit tellus mauris. Magna ac placerat vestibulum lectus mauris ultrices eros. Et pharetra pharetra massa massa ultricies mi quis hendrerit. Nibh cras pulvinar mattis nunc sed blandit libero. Pharetra sit amet aliquam id diam maecenas.</p>
</div>
<div class="twoColumns demo">
<h2>Sapien faucibus et molestie ac feugiat. Phasellus egestas tellus rutrum tellus pellentesque eu tincidunt.</h2>
<p>Sapien faucibus et molestie ac feugiat. Phasellus egestas tellus rutrum tellus pellentesque eu tincidunt. Posuere ac ut consequat semper viverra. Curabitur gravida arcu ac tortor dignissim convallis aenean et tortor. Quam elementum pulvinar etiam non quam lacus. Risus pretium quam vulputate dignissim suspendisse in. Placerat orci nulla pellentesque dignissim enim sit amet. Nunc eget lorem dolor sed viverra ipsum nunc. Congue mauris rhoncus aenean vel elit scelerisque mauris. Maecenas pharetra convallis posuere morbi leo. Eu facilisis sed odio morbi quis commodo. Vitae et leo duis ut diam quam nulla porttitor.</p>
<p>Est lorem ipsum dolor sit amet. Fusce ut placerat orci nulla pellentesque dignissim enim sit amet. Scelerisque viverra mauris in aliquam sem fringilla. Id porta nibh venenatis cras sed felis. Vulputate dignissim suspendisse in est. Mi in nulla posuere sollicitudin aliquam ultrices sagittis orci a. Est ullamcorper eget nulla facilisi. Dictumst vestibulum rhoncus est pellentesque elit ullamcorper dignissim cras. Urna nec tincidunt praesent semper feugiat nibh sed pulvinar proin. Facilisis magna etiam tempor orci eu lobortis elementum nibh. Aliquet sagittis id consectetur purus ut. Nisl tincidunt eget nullam non nisi. Risus nec feugiat in fermentum posuere urna nec. Ullamcorper eget nulla facilisi etiam. Consequat mauris nunc congue nisi vitae suscipit tellus mauris. Magna ac placerat vestibulum lectus mauris ultrices eros. Et pharetra pharetra massa massa ultricies mi quis hendrerit. Nibh cras pulvinar mattis nunc sed blandit libero. Pharetra sit amet aliquam id diam maecenas.</p>
</div>