Shipnity Website Document

# Grid

The grid is heavily inspired by the Bootstrap grid. It is integrated by using a series of containers, rows, and columns to layout and align content. If you are new to flexbox, Read the CSS Tricks flexbox guide for background, terminology, guidelines, and code snippets.

# Usage

<snt-container>
  <snt-row>
    <snt-col cols="6">
      Lorem Ipsum A
    </snt-col>
    <snt-col cols="6">
      Lorem Ipsum B
    </snt-col>
  </snt-row>
<snt-container>

# API

# Examples

# Order

<snt-container>
  <snt-row>
    <snt-col>
      First, but unordered
    </snt-col>
    <snt-col order="12">
      Second, but last
    </snt-col>
    <snt-col order="1">
      Third, but first
    </snt-col>
  </snt-row>
</snt-container>

# No gutters

<snt-container>
  <snt-row no-gutters>
    <snt-col cols="6">
      One of three columns
    </snt-col>
    <snt-col cols="6">
      One of two columns
    </snt-col>
  </snt-row>
</snt-container>

# Order

<snt-container>
  <snt-row
    :style="{ height: '150px' }"
    align="center">
    <snt-col>
      One of three columns
    </snt-col>
    <snt-col>
      One of three columns
    </snt-col>
    <snt-col>
      One of three columns
    </snt-col>
  </snt-row>
</snt-container>

← Hover →