Left Arrow.Back
Left Arrow.Back

Notes / CSS / The Layout Component

The Layout Component

A grid of squares.

The Layout Component

Last Tended

Status: sprout

The Braid Design System believes UI (User Interface) components should not provide surrounding white space. For example, a list item having a margin below it to add a gap between itself & the next item. This margin breaks component encapsulation, making it harder to use. A well-built component should not affect anything outside itself.

Requirements like space between list items still need to be satisfied. To do this, Braid proposes layout components. A category of components whose only function is to position their child elements. A layout component would control:

  • the direction of the children (example: top-to-bottom or left-to-right) &
  • space between children.

An example of a layout component would be a <ul> for a list of text items. The <ul> could set the direction to go from top-to-bottom & add 16px of space between each list item:

A wireframe of a browser with a vertical list of squares.

Layout components can also be more complex, such as a parent component of a data dashboard:

A wireframe of a browser with a vertical list of squares.
A wireframe of a 2 layouts. 2 with consistent spacing between its children. The other with inconsistent spacing.

Consistent / Varying Spacing

A layout component falls into 1 of 2 categories:

  • consistent spacing - all horizontal & / or vertical space between elements is the same. Example: a to-do list that lists items down the page with a gap between each.
  • varying spacing - space between elements varies depending on the type of elements. Example: a blog with a large gap between a heading & a paragraph but a small gap between 2 paragraphs.

Working with margins adds complexity to layout components:

  • margin values sometimes collapse with an adjacent element's margin, taking the maximum of the margins between them rather than the combination of both,
  • margin, width & height settings don't work on inline-elements &
  • margin doesn't work on table cell elements.

If you need consistent spacing, make the parent a flex or grid & use the gap property. If you need varying spacing, add margins to children using the adjacent sibling combinator +. This matches the 2nd element only if it immediately follows the 1st element. We can use this to add:

  • a large space between h1 & p elements &
  • a small space between 2 p elements.

localhost:3000

import './styles.css'
import './styles.css'
A space ship's docking bay with various equipment.

Tools