Grid Components

    Usage

    import Container from '@paljs/ui/Container';
import Row from '@paljs/ui/Row';
import Col from '@paljs/ui/Col';

    Responsive

    Responsive modifiers enable specifying different column sizes, offsets, alignment and distribution at xs, sm, md & lg viewport widths.

      Offsets

      Offset a column.

        Auto Width

        Add any number of auto sizing columns to a row. Let the grid figure it out.

          xs
          xs
          xs
          xs
          xs

          Alignment

          Add classes to align elements to the start or end of row as well as the top, bottom, or center of a column

            .start-

            start="xs"

            .center-

            center="xs"

            .end-

            end="xs"

            .top-

            top="xs"
            top="xs"

            .middle-

            middle="xs"
            middle="xs"

            .bottom-

            bottom="xs"
            bottom="xs"

            Distribution

            Add classes to distribute the contents of a row or column.

              .around-

              .between-

              Hide

              You can simply hide some elements for a given breakpoint by passing false to the breakpoint properties.

                xs=false

                Related Articles