Guise Skeleton Layouts

Layouts determine how children are arranged. They can be used in containers such as panels or even in general HTML elements such as <div>.

One of the most versatile and simplest to use layout is the Flex Layout. This Guise Skeleton innovation is based on the CSS Flexible Box Layout, but provides additional presets so that children use the space they need while maintaining a responsive arrangement upon resize.

All layouts in Guise Skeleton begin with layout-.

Brick (layout-brick)

Child elements only use as much extent as they need, and are laid out one after the other, like bricks, wrapping if needed.

Flex (layout-flex)

A flexible, responsive layout meant to be the go-to layout for general components. Child elements fill remaining space, but wrap when needed.

Marquee (layout-marquee)

Child elements are centered within the element on both axes, like the words on a marquee.

Tile (layout-tile)

Child elements only use as much extent as they need, wrapping if needed. Unlike with the Brick Layout, space is distributed around the child elements.