Responsive Grid

Usage

<ui-container> ... </ui-container>

Use container when the row layout needs to be fit to a fixed width.

---

<ui-row>
  <ui-column> ... </ui-column>
  <ui-column> ... </ui-column>
</ui-row>

• UIRow Attributes <ui-row>

  • reverse: Start column order from end to start

  • start: Horizontal align columns to start

  • center: Horizontal align columns to center

  • end: Horizontal align columns to end

  • spaced: Evenly spaced columns

  • top: Vertical align columns to top

  • middle: Vertical align columns to middle

  • bottom: Vertical align columns to bottom

  • stretch: Stretch all columns

• UIRowColumn <ui-row-column>

  • Creates a vertical flexbox using the same attributes as row, the horizontal and vertical attributes are reversed.

• UIColumn <ui-column>

  • top: Vertical align column to top

  • middle: Vertical align column to middle

  • bottom: Vertical align column to bottom

  • stretch: Stretch column

  • padded: Apply base padding

  • auto: Auto sized

  • fill: Fill column to remaining width

  • full: Stretch column to full width, wrap if necessary

  • width: Fixed width column

  • size: Responsive sized column

    • xl-[1-12] Extra large viewports
    • lg-[1-12] Large viewports
    • md-[1-12] Medium viewports
    • sm-[1-12] Small viewports
    • xs-[1-12] Extra small viewports