Markdown layout

Grid layout

This page is generated by Hugo directly from a markdown file. It uses a grid layout and there’s no extra HTML elements in the text. Just h2’s and ps. So every h2 or p is a grid item.

One complication comes with elements like paragraphs that normally have collapsing margins. These don’t collapse when each is in it’s own grid cell.

By halving the size of the block margins you get can offset this effect by the grid layout.

Synopsis

This layout requires:

  1. A two column grid using CSS grid.
  2. All the h2’s are in the first column grid-column: 1 / 2;
  3. All other elements are in the other column: grid-column: 2 / 3
  4. The h2 and the first h2 sibling have an extra top margin added.
  5. The h2’s and first h2 sibling have a top border & top padding.
h2:nth-of-type(1n + 2),
h2:nth-of-type(1n + 2) + * {
    border-top: solid 1px #fff4;
}

Better than floating layout

This layout is better than the alternative which is where the h2 elements are floated to the left and all other elements have a left margin slightly bigger than the width of the h2’s. This layout is easier to adjust using grid-template-columns and fr or other units.

One issue is with the paragraph spacing. Normally the top and bottom margins collapse into one another. This doesn’t happen when the paragraphs are grid items. Removing the top margin fixes this. The spacing can also go out if the h2 is higher than the paragraph next to it. Just use:

h2 {
    grid-column: 1 / 2;
    text-align: right;
    margin-top: 0;
    grid-row: span 3;
}

In fact you can set the span as high as you wish here.

A long, long, long headline

Followed by a short paragraph

And then another longer paragraph.

An image

Random image Random image from https://picsum.photos
Gradient background from Color Gradient Generator