Arranging Things

Box and Card are containers — they hold content. Grid and Flex are layouts — they arrange those containers. Scroll adds a fixed-height overflow area to either.

Box

A simple bordered container — each box is only as tall as its content:

Small.

Medium — a bit more content here than the first.

Large — the most content of the three. All three heights differ because boxes don't stretch to fill their row.

Card

Cards stretch to fill the row height — all siblings end up the same height regardless of content:

Small.

Medium — more content than the first card.

Large — the most content. All three cards stretch to match this height. Compare to the boxes above.

Cards can be static or linked. Linked cards get hover and press effects:

Static card

Not clickable.

Linked card

Clickable — hover for shadow, click for press.

Grid

Equal columns regardless of child count:

Flex

A wrapping row that distributes children evenly. Resize the window to see the columns reflow to a single stack:

Typography

Headings, paragraphs, lists, blockquotes, and horizontal rules.

Components

Buttons, forms, details, dialogs, meters, and tabs.

Layout

Flex, grid, scroll, box, and card.

Scroll

A fixed-height scrollable area. Default height is 10ch, overridable with --scroll-h:

CSS

HTML

Markdown

Jekyll

Sass

Liquid

MathJax

Mermaid

Custom height via style="--scroll-h: 6ch":

CSS

HTML

Markdown

Jekyll

Sass

Liquid

MathJax

Mermaid

Inside .flex — the scroll area stretches to match the tallest non-scrollable sibling:

CSS

HTML

Markdown

Jekyll

Sass

Liquid

MathJax

Mermaid

Related technologies

The scroll area on the left matches this card's height and scrolls independently within it.