Layout (Row and Column)

A flexible Row & Column layout system implmented using the CSS flexbox layout.

Row
Column full
Column 1
Column onefourth
Column 1/3
Column 1/5
Column onefifth
Column onefifth
Column 1/3
Column 1/2
Column 1/4
Column onefourth

Properties

Usage

          
            
    <NuedRow
      hAlign="center" // Align item horizontally. Default is set to 'center';
      vAlign="center" // Align items vertically. Default is set to 'center';
      rowSize="large" // Define max width of row between 'small' | 'medium' | 'large'. Default is set to 'large';
    >
      <NuedColumn
        colSize="1/2" // Choose from 'onefifth' | '1/5' | 'onefourth' | '1/4' | 'onethird' | '1/3' | 'half' | '1/2' | 'full' | '1' column sizes. Default is '1'.
      >
        Column 1
      </Column>
      <NuedColumn
        colSize="1/2"
      >
        Column 2
      </Column>
    </Row>