Engineers in product teams want not only to use components from design system, but also want to combine them together to create full experience for end users.

Having layouts defined for each use-case turned out very ineffective and hard to maintain approach, that's why Design System team defined layout components to provide to product engineers.

Technically there are two main solutions to this: flexbox and grid. There's a big overlap between what those two can do so we've drawn a line between them which results into two layout components.

Stack

Serves for stacking components vertically or horizontally next to each other. It allows you to define spacing between items, alignment or whether items should be close to each other or as far from each other as possible. Stacks can also be nested, which makes it a very powerful tool for layout building. From a technical point of view Stack is a subset of flexbox possibilities.

Grid

The main difference between Stack and Grid components is that while Stack only defines relationship between it's children, but cannot be used to set its sizes, Grid always defines sizes for grid cells. It's mainly used to define layouts where control over sizes is needed, e. g. doing 50/50 or 25/75 layouts. From a technical point of view Grid component is React implementation of CSS grid.

Note: Grid component is currently still work in progress and might be missing many attributes. If that's the case for you, feel free to implement it.

These two components are mainly made for engineers in product teams so they don't have to write their own one-purpose components. When contributing to design system it's not required to use these as sometimes it's more handy to create custom thing.