Left ArrowBack

Notes

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 Gaps

A layout component falls into 1 of 2 categories:

  • consistent gap - all horizontal & / or vertical gaps between elements are the same. Example: a to-do list that lists items down the page with a gap between each.
  • varying gap - gaps 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 gaps, make the parent a flex or grid & use the gap property. If you need varying gaps, add margins to children using the adjacent sibling combinator +. This matches the 2nd element only if it immediately follows the 1st element. For example, we can use this to add:

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

localhost:3000

/* body is acting as the layout component */
body > h1 + p {
    margin-top: 40px;
}

body > p + p {
    margin-top: 28px;
}
A space ship's docking bay with various equipment.

Resources

Tools
CSS Layout GeneratorA grid & flexbox code generator

Where to Next?

A sci-fi robot taxi driver with no lower body
└── CSS
├── 3D
├── Alignment Click Target
├── Box Sizing
├── Floating Image
Arrow pointing down
YOU ARE HERE
├── Layout Component
├── Reset
└── Typography Setup