Responsive Grid - adarshpastakia/aurelia-ui-framework GitHub Wiki

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
⚠️ **GitHub.com Fallback** ⚠️