Layout helper

Layout helper is page attribute based on CSS flexbox specification. It's designed as quick flexbox shorthand providing easier syntax:

  • layout — use on container(parent) element to set layout of child elements
  • self — use on child element to set size or align for element itself

<div layout="row center-center" self="center" >
    <div>1</div>
    <div>2</div>
    <div>3</div>
</div>

Playground Link

Try some of layout helper options — live interactive demo.

Playground page screenshot — play with layout attribute

Layout attribute

Syntax of the layout attribute with available values:

layout="direction  vertically - horizontally  reverse  spacing" 
        ▼          ▼            ▼             ▼        ▼
        row        top          left          reverse  spacing-0
        rows       center       center                 spacing-1
        column     bottom       right                  spacing-2
        columns    justify      justify                spacing-3
                   spread       spread                 spacing-4
                   stretch      stretch                spacing-5
                                                       spacing-6
                                                       spacing-7
    

Direction Link

<div layout="direction center-center" > ... </div> 
Value Description
row horizontal flow of items forced into single row
rows horizontal flow of items and can be wrapped in multiple rows
column vertical flow of items forced into single column
columns vertical flow of items and can be wrapped in multiple columns

Vertically Link

<div layout="row center-center" > ... </div> 
Value Description
top items are placed toward the top of the container
center items are placed toward the vertical center of the container
bottom items are placed toward the bottom of the container
justify items are vertically evenly distributed.
spread space between vertical items is evenly distributed.
stretch items are stretched evenly (to the sam height) to occupy whole height of the container

Horizontally Link

<div layout="row center-center" > ... </div> 
Value Description
left items are placed toward the left side of the container
center items are placed toward the horizontal center of the container
right items are placed toward the right side of the container
justify items are horizontally evenly distributed.
spread space between horizontal items is evenly distributed.
stretch items are stretched evenly (to the same width) to occupy whole width of the container

Reverse Link

<div layout="row center-center reverse" > ... </div> 
Value Description
reverse appearance order of items is reversed

Items spacing Link

<div layout="row spacing-2" > ... </div> 
Horizontal spacing between layout items. Use item spacing with <figure> element or when layout direction is set to "row".
Value Description
spacing-0 Spacing between items: 0
spacing-1 Spacing between items: 0.5 rem
spacing-2 Spacing between items: 1 rem
spacing-3 Spacing between items: 2 rem
spacing-4 Spacing between items: 3 rem
spacing-5 Spacing between items: 4 rem
spacing-6 Spacing between items: 5 rem
spacing-7 Spacing between items: 6 rem

Self attribute

Syntax of the self attribute with available values:

self="item-size  item-align  item-order " 
      ⇩          ▼           ▼
      size-x1    top         order-first
      size-x2    center      order-1
      size-x3    bottom      order-2
      size-x4    left        order-3
      size-x5    right       order-last
      size-x6
      size-x7
      size-x8
      size-1of5
      size-1of4
      size-1of3
      size-2of5
      size-1of2
      size-3of5
      size-2of3
      size-3of4
      size-4of5
      size-1of1
      size-xxsmall
      size-xsmall
      size-small
      size-smaller
      size-medium
      size-larger
      size-large
      size-xlarge
      size-xxlarge
      stretch
     
    

Size Link

<div layout="row center-center">
    <div self="size-x1">1</div>
    <div self="size-x2">2 times larger</div>
</div> 
Item proportional size
Amount of the available space inside the container the item should take up regard to smallest sibling:
Value Description
size-x1 equal or maximum space
size-x2 2 times larger
size-x3 3 times larger
size-x4 4 times larger
size-x5 5 times larger
size-x6 6 times larger
size-x7 7 times larger
size-x8 8 times larger
Item width in percents Item width relative to container width:
Value Description
size-1of5 width: 20%
size-1of4 width: 25%
size-1of3 width: 33.33%
size-2of5 width: 40%
size-1of2 width: 50%
size-3of5 width: 60%
size-2of3 width: 66.66%
size-3of4 width: 75%
size-4of5 width: 80%
size-1of1 width: 100%
Item width in pixels Fixed maximum width:
Value Description
size-xxsmall max-width: 240px
size-xsmall max-width: 360px
size-small max-width: 480px
size-smaller max-width: 600px
size-medium max-width: 720px
size-larger max-width: 840px
size-large max-width: 960px
size-xlarge max-width: 1200px
size-xxlarge max-width: 1440px

Align Link

<div layout="row center-center">
    <div self="size-x1 bottom">item bottom aligned</div>
    <div self="size-x2 top">2 times larger, top aligned</div>
</div>

Align of the item itself within container

Value Description
top Aligned toward the top of the container.
left Aligned toward the left side of the container.
center Aligned to the center of container.
right Aligned toward the right side of the container.
bottom Aligned toward the bottom of the container.

Order Link

<div layout="row center-center">
    <div self="bottom">item bottom aligned</div>
    <div self="top order-first"> top aligned, appears on the left</div>
</div>

Order of the item appearance in container among it's siblings:

Value Description
order-first appears first
order-1 appears first (same as above just different syntax)
order-2 appears second
order-3 appears third
order-last appears last

× × ×

Learn next: Css selectors