Table Of Contents

A grid of squares

Positioning elements in the DOM.

Last TendedJul 2021
PlantedJun 2021
Multiple geometric shapes fitting togther with 1 missing piece.

The Layout Component

The Braid Design System believes that components (such as React components) should not provide surrounding white space. Instead, spacing between elements should be the responsibility of a category of components known as Layout components. Components whose only function is to position their child elements.

A layout component would commonly control:

  • the direction of the children (example: top-to-bottom or left-to-right) &
  • space between children (example: a margin below each list item).

A simple example would be a layout component would be a \<ul> for a list of text items. The styling of the text would be the responsbility of the \<li> component. 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 parent component of a data dashboard.

A wireframe of a browser with a vertical list of squares.
A space ship's docking bay with various equipment.