Layout Primitives・Site Title (Plain Version)

Everything here is contained by a stack container.

This is a box.

And this is a center container, should be 72ch wide and centered. Typing some non-sense here so the text here can overflow inside this container.

This is a box inside a center container.

And this is the same one with longer content in it. So we can see the overflowing text again and see how much this box can expand inside the boundries of a center container.

This

cluster

with

boxes

in it.

This is the first element of a sidebar container.

And this is the last element of a sidebar container. It'll move to the bottom if this container width equals to the half of its parent width. Try resizing your window so you can see the change. If child element longer than its sibling, it'll stretch to match the height. The behavior can be changed with align-items: flex-start

And this is another sidebar container with image example. You can set custom width for sidebar child as it has flex-basis:128px

These are child elements of a switcher container

Each element is equally sized and responsive intrinsically

Child elements are placed side by side or stacked

Depending on whether container width outsizes the threshold custom property

First child

These are child of cover element

Last child

These are child elements

of a grid container

Unlike switcher,

Orphan elements don't expand

And always stays in grid

The grid has gaps

Elements overflows

depending on container size

These are

child elements of

a reel container

which is scrollable

horizantally

might be useful

for navigation

or browsing among media

This is a static content with position: relative in it.

Making a couple of placeholder paragraph so imposter container can place on top of me.

That's challenging to do an accurate example but here goes nothing.

This is an imposter and also box container.