Grid

Inkline’s grid system is modelled as a 12 columns layout using flexbox, with equally divided columns, separated by a small gutter.

The grid system uses percentage widths, so that it is usable at any nesting level.

The grid system is defined using <i-container>, <i-row> and <i-column> components, with each one having specific responsive modifiers. Here’s how it works:

  • First, we define a row with a set of columns inside of it.
  • Your content elements should be placed directly in a <i-column>, and only <i-column> should be placed directly inside an <i-row> component
  • The column width takes a value of 1-12 at each responsive breakpoint (xs, sm, md, lg, xl, xxl).
  • If the sum of column widths in a row is more than 12, then the overflowing column will start on a new line.

Basic Example

Create basic grid layout using columns.

<i-container>
    <i-row>
        <i-column xs="12"></i-column>
    </i-row>
    <i-row>
        <i-column xs="1"></i-column>
        <i-column xs="11"></i-column>
    </i-row>
    <i-row>
        <i-column xs="2"></i-column>
        <i-column xs="10"></i-column>
    </i-row>
    <i-row>
        <i-column xs="3"></i-column>
        <i-column xs="9"></i-column>
    </i-row>
    <i-row>
        <i-column xs="4"></i-column>
        <i-column xs="8"></i-column>
    </i-row>
    <i-row>
        <i-column xs="5"></i-column>
        <i-column xs="7"></i-column>
    </i-row>
    <i-row>
        <i-column xs="6"></i-column>
        <i-column xs="6"></i-column>
    </i-row>
    <i-row>
        <i-column xs="7"></i-column>
        <i-column xs="5"></i-column>
    </i-row>
    <i-row>
        <i-column xs="8"></i-column>
        <i-column xs="4"></i-column>
    </i-row>
    <i-row>
        <i-column xs="9"></i-column>
        <i-column xs="3"></i-column>
    </i-row>
    <i-row>
        <i-column xs="10"></i-column>
        <i-column xs="2"></i-column>
    </i-row>
    <i-row>
        <i-column xs="11"></i-column>
        <i-column xs="1"></i-column>
    </i-row>
    <i-row>
        <i-column xs="12"></i-column>
    </i-row>
</i-container>

Grid Offset

Grid offsets are used to move a column to the right without creating an empty column next to it.

<i-container>
    <i-row>
        <i-column xs="1" offset="11"></i-column>
    </i-row>
    <i-row>
        <i-column xs="2" offset="10"></i-column>
    </i-row>
    <i-row>
        <i-column xs="3" offset="9"></i-column>
    </i-row>
    <i-row>
        <i-column xs="4" offset="8"></i-column>
    </i-row>
    <i-row>
        <i-column xs="5" offset="7"></i-column>
    </i-row>
    <i-row>
        <i-column xs="6" offset="6"></i-column>
    </i-row>
    <i-row>
        <i-column xs="7" offset="5"></i-column>
    </i-row>
    <i-row>
        <i-column xs="8" offset="4"></i-column>
    </i-row>
    <i-row>
        <i-column xs="9" offset="3"></i-column>
    </i-row>
    <i-row>
        <i-column xs="10" offset="2"></i-column>
    </i-row>
    <i-row>
        <i-column xs="11" offset="1"></i-column>
    </i-row>
</i-container>

You may need to use offset="0" and offset-{breakpoint}="0" to clear an offset. See this in action in the grid example below.

<i-container>
    <i-row>
        <i-column sm="5" md="6"></i-column>
        <i-column sm="5" offset-sm="2" md="6" offset-md="0"></i-column>
    </i-row>
</i-container>

Grid Push / Pull

Code-wise, the columns have a different order.

<i-container>
    <i-row>
        <i-column xs="1" push="11"></i-column>
        <i-column xs="11" pull="1"></i-column>
    </i-row>
    <i-row>
        <i-column xs="2" push="10"></i-column>
        <i-column xs="10" pull="2"></i-column>
    </i-row>
    <i-row>
        <i-column xs="3" push="9"></i-column>
        <i-column xs="9" pull="3"></i-column>
    </i-row>
    <i-row>
        <i-column xs="4" push="8"></i-column>
        <i-column xs="8" pull="4"></i-column>
    </i-row>
    <i-row>
        <i-column xs="5" push="7"></i-column>
        <i-column xs="7" pull="5"></i-column>
    </i-row>
    <i-row>
        <i-column xs="6" push="6"></i-column>
        <i-column xs="6" pull="6"></i-column>
    </i-row>
    <i-row>
        <i-column xs="7" push="5"></i-column>
        <i-column xs="5" pull="7"></i-column>
    </i-row>
    <i-row>
        <i-column xs="8" push="4"></i-column>
        <i-column xs="4" pull="8"></i-column>
    </i-row>
    <i-row>
        <i-column xs="9" push="3"></i-column>
        <i-column xs="3" pull="9"></i-column>
    </i-row>
    <i-row>
        <i-column xs="10" push="2"></i-column>
        <i-column xs="2" pull="10"></i-column>
    </i-row>
    <i-row>
        <i-column xs="11" push="1"></i-column>
        <i-column xs="1" pull="11"></i-column>
    </i-row>
</i-container>

You may need to use push="0", push-{breakpoint}="0", pull="0", pull-{breakpoint}="0" to clear a push or pull.

Auto Width

The grid will automatically fit any number of auto sizing columns to a row.

<i-container>
    <i-row>
        <i-column></i-column>
    </i-row>
    <i-row>
        <i-column></i-column>
        <i-column></i-column>
    </i-row>
    <i-row>
        <i-column></i-column>
        <i-column></i-column>
        <i-column></i-column>
    </i-row>
    <i-row>
        <i-column></i-column>
        <i-column></i-column>
        <i-column></i-column>
        <i-column></i-column>
    </i-row>
    <i-row>
        <i-column></i-column>
        <i-column></i-column>
        <i-column></i-column>
        <i-column></i-column>
        <i-column></i-column>
    </i-row>
    <i-row>
        <i-column></i-column>
        <i-column></i-column>
        <i-column></i-column>
        <i-column></i-column>
        <i-column></i-column>
        <i-column></i-column>
    </i-row>
</i-container>

Nested Grid

Inkline allows you to nest up to 12 columns inside a row. Row can also be nested inside any column, giving you virtually endless layout possibilities. You can place rows only inside a container or a column, while you can place columns only inside a row.

<i-container>
    <i-row>
        <i-column xs="8">
            <i-row>
                <i-column xs="3"></i-column>
                <i-column xs="3"></i-column>
                <i-column xs="3"></i-column>
                <i-column xs="3"></i-column>
            </i-row>
        </i-column>
        <i-column xs="4">
            <i-row>
                <i-column xs="6"></i-column>
                <i-column xs="6"></i-column>
            </i-row>
        </i-column>
    </i-row>
</i-container>

Horizontal Alignment

You can align columns horizontally to the start, center, or end of a row.

start

<i-container>
    <i-row start>
        <i-column xs="4"></i-column>
    </i-row>
</i-container>

You can use start-{breakpoint} to target screen sizes starting from a specific breakpoint.

center

<i-container>
    <i-row center>
        <i-column xs="4"></i-column>
    </i-row>
</i-container>

You can use center-{breakpoint} to target screen sizes starting from a specific breakpoint.

end

<i-container>
    <i-row end>
        <i-column xs="4"></i-column>
    </i-row>
</i-container>

You can use end-{breakpoint} to target screen sizes starting from a specific breakpoint.

Vertical Alignment

You can align columns vertically to the top, middle or bottom of the row.

top

<i-container>
    <i-row top>
        <i-column xs="6"></i-column>
        <i-column xs="6"></i-column>
    </i-row>
</i-container>

You can use top-{breakpoint} to target screen sizes starting from a specific breakpoint.

middle

<i-container>
    <i-row middle>
        <i-column xs="6"></i-column>
        <i-column xs="6"></i-column>
    </i-row>
</i-container>

You can use middle-{breakpoint} to target screen sizes starting from a specific breakpoint.

bottom

<i-container>
    <i-row bottom>
        <i-column xs="6"></i-column>
        <i-column xs="6"></i-column>
    </i-row>
</i-container>

You can use bottom-{breakpoint} to target screen sizes starting from a specific breakpoint.

Distribution

Distribute the spacing between the columns of a row.

around

<i-container>
    <i-row around>
        <i-column xs="3"></i-column>
        <i-column xs="3"></i-column>
        <i-column xs="3"></i-column>
    </i-row>
</i-container>

You can use around-{breakpoint} to target screen sizes starting from a specific breakpoint.

between

<i-container>
    <i-row between>
        <i-column xs="3"></i-column>
        <i-column xs="3"></i-column>
        <i-column xs="3"></i-column>
    </i-row>
</i-container>

You can use between-{breakpoint} to target screen sizes starting from a specific breakpoint.

Reordering

Reorder columns using helper classes.

reverse

1
2
3
4
<i-container>
    <i-row reverse>
        <i-column xs="3">1</i-column>
        <i-column xs="3">2</i-column>
        <i-column xs="3">3</i-column>
        <i-column xs="3">4</i-column>
    </i-row>
</i-container>

You can use reverse-{breakpoint} to target screen sizes starting from a specific breakpoint.

first

1
2
3
4
<i-container>
    <i-row>
        <i-column xs="3">1</i-column>
        <i-column xs="3">2</i-column>
        <i-column xs="3">3</i-column>
        <i-column xs="3" first>4</i-column>
    </i-row>
</i-container>

You can use first-{breakpoint} to target screen sizes starting from a specific breakpoint.

last

1
2
3
4
<i-container>
    <i-row>
        <i-column xs="3" last>1</i-column>
        <i-column xs="3">2</i-column>
        <i-column xs="3">3</i-column>
        <i-column xs="3">4</i-column>
    </i-row>
</i-container>

You can use last-{breakpoint} to target screen sizes starting from a specific breakpoint.

Responsive Width

You can specify column counts for each breakpoint. Try to resize your browser window!

<i-container>
    <i-row>
        <i-column xxl="3" xl="3" lg="6" md="6" sm="8" xs="12"></i-column>
        <i-column xxl="3" xl="3" lg="6" md="6" sm="4" xs="6"></i-column>
        <i-column xxl="6" xl="6" lg="4" md="6" sm="6" xs="3"></i-column>
        <i-column xxl="12" xl="12" lg="8" md="6" sm="6" xs="3"></i-column>
    </i-row>
</i-container>

Fluid Container

You can make the <i-container> component fill the whole width of the parent element using the fluid property.

<i-container fluid>
    <i-row>
        <i-column xs></i-column>
        <i-column xs></i-column>
        <i-column xs></i-column>
    </i-row>
</i-container>

Configuration

Props

Use props to modify the component’s design and behavior.

<i-container>
  • Property
    fluid
    TypeBoolean
    Defaultfalse
    Description Display the container as fluid, always spanning 100% width
<i-row>
  • Property
    start
    TypeBoolean
    Defaultfalse
    Description Justify the content to the start of the row
  • Property
    start-xs
    TypeBoolean
    Defaultfalse
    Description Justify the content to the start of the row on extra-small screens
  • Property
    start-sm
    TypeBoolean
    Defaultfalse
    Description Justify the content to the start of the row on small screens
  • Property
    start-md
    TypeBoolean
    Defaultfalse
    Description Justify the content to the start of the row on medium screens
  • Property
    start-lg
    TypeBoolean
    Defaultfalse
    Description Justify the content to the start of the row on large screens
  • Property
    start-xl
    TypeBoolean
    Defaultfalse
    Description Justify the content to the start of the row on extra-large screens
  • Property
    start-xxl
    TypeBoolean
    Defaultfalse
    Description Justify the content to the start of the row on extra-extra-large screens
  • Property
    center
    TypeBoolean
    Defaultfalse
    Description Justify the content to the center of the row
  • Property
    center-xs
    TypeBoolean
    Defaultfalse
    Description Justify the content to the center of the row on extra-small screens
  • Property
    center-sm
    TypeBoolean
    Defaultfalse
    Description Justify the content to the center of the row on small screens
  • Property
    center-md
    TypeBoolean
    Defaultfalse
    Description Justify the content to the center of the row on medium screens
  • Property
    center-lg
    TypeBoolean
    Defaultfalse
    Description Justify the content to the center of the row on large screens
  • Property
    center-xl
    TypeBoolean
    Defaultfalse
    Description Justify the content to the center of the row on extra-large screens
  • Property
    center-xxl
    TypeBoolean
    Defaultfalse
    Description Justify the content to the center of the row on extra-extra-large screens
  • Property
    end
    TypeBoolean
    Defaultfalse
    Description Justify the content to the end of the row
  • Property
    end-xs
    TypeBoolean
    Defaultfalse
    Description Justify the content to the end of the row on extra-small screens
  • Property
    end-sm
    TypeBoolean
    Defaultfalse
    Description Justify the content to the end of the row on small screens
  • Property
    end-md
    TypeBoolean
    Defaultfalse
    Description Justify the content to the end of the row on medium screens
  • Property
    end-lg
    TypeBoolean
    Defaultfalse
    Description Justify the content to the end of the row on large screens
  • Property
    end-xl
    TypeBoolean
    Defaultfalse
    Description Justify the content to the end of the row on extra-large screens
  • Property
    end-xxl
    TypeBoolean
    Defaultfalse
    Description Justify the content to the end of the row on extra-extra-large screens
  • Property
    top
    TypeBoolean
    Defaultfalse
    Description Align the content to the top of the row
  • Property
    top-xs
    TypeBoolean
    Defaultfalse
    Description Align the content to the top of the row on extra-small screens
  • Property
    top-sm
    TypeBoolean
    Defaultfalse
    Description Align the content to the top of the row on small screens
  • Property
    top-md
    TypeBoolean
    Defaultfalse
    Description Align the content to the top of the row on medium screens
  • Property
    top-lg
    TypeBoolean
    Defaultfalse
    Description Align the content to the top of the row on large screens
  • Property
    top-xl
    TypeBoolean
    Defaultfalse
    Description Align the content to the top of the row on extra-large screens
  • Property
    top-xxl
    TypeBoolean
    Defaultfalse
    Description Align the content to the top of the row on extra-extra-large screens
  • Property
    middle
    TypeBoolean
    Defaultfalse
    Description Align the content to the middle of the row
  • Property
    middle-xs
    TypeBoolean
    Defaultfalse
    Description Align the content to the middle of the row on extra-small screens
  • Property
    middle-sm
    TypeBoolean
    Defaultfalse
    Description Align the content to the middle of the row on small screens
  • Property
    middle-md
    TypeBoolean
    Defaultfalse
    Description Align the content to the middle of the row on medium screens
  • Property
    middle-lg
    TypeBoolean
    Defaultfalse
    Description Align the content to the middle of the row on large screens
  • Property
    middle-xl
    TypeBoolean
    Defaultfalse
    Description Align the content to the middle of the row on extra-large screens
  • Property
    middle-xxl
    TypeBoolean
    Defaultfalse
    Description Align the content to the middle of the row on extra-extra-large screens
  • Property
    bottom
    TypeBoolean
    Defaultfalse
    Description Align the content to the bottom of the row
  • Property
    bottom-xs
    TypeBoolean
    Defaultfalse
    Description Align the content to the bottom of the row on extra-small screens
  • Property
    bottom-sm
    TypeBoolean
    Defaultfalse
    Description Align the content to the bottom of the row on small screens
  • Property
    bottom-md
    TypeBoolean
    Defaultfalse
    Description Align the content to the bottom of the row on medium screens
  • Property
    bottom-lg
    TypeBoolean
    Defaultfalse
    Description Align the content to the bottom of the row on large screens
  • Property
    bottom-xl
    TypeBoolean
    Defaultfalse
    Description Align the content to the bottom of the row on extra-large screens
  • Property
    bottom-xxl
    TypeBoolean
    Defaultfalse
    Description Align the content to the bottom of the row on extra-extra-large screens
  • Property
    around
    TypeBoolean
    Defaultfalse
    Description Justify the content to have space around each item inside the row
  • Property
    around-xs
    TypeBoolean
    Defaultfalse
    Description Justify the content to have space around each item inside the row on extra-small screens
  • Property
    around-sm
    TypeBoolean
    Defaultfalse
    Description Justify the content to have space around each item inside the row on small screens
  • Property
    around-md
    TypeBoolean
    Defaultfalse
    Description Justify the content to have space around each item inside the row on medium screens
  • Property
    around-lg
    TypeBoolean
    Defaultfalse
    Description Justify the content to have space around each item inside the row on large screens
  • Property
    around-xl
    TypeBoolean
    Defaultfalse
    Description Justify the content to have space around each item inside the row on extra-large screens
  • Property
    around-xxl
    TypeBoolean
    Defaultfalse
    Description Justify the content to have space around each item inside the row on extra-extra-large screens
  • Property
    between
    TypeBoolean
    Defaultfalse
    Description Justify the content to have space between each item inside the row
  • Property
    between-xs
    TypeBoolean
    Defaultfalse
    Description Justify the content to have space between each item inside the row on extra-small screens
  • Property
    between-sm
    TypeBoolean
    Defaultfalse
    Description Justify the content to have space between each item inside the row on small screens
  • Property
    between-md
    TypeBoolean
    Defaultfalse
    Description Justify the content to have space between each item inside the row on medium screens
  • Property
    between-lg
    TypeBoolean
    Defaultfalse
    Description Justify the content to have space between each item inside the row on large screens
  • Property
    between-xl
    TypeBoolean
    Defaultfalse
    Description Justify the content to have space between each item inside the row on extra-large screens
  • Property
    between-xxl
    TypeBoolean
    Defaultfalse
    Description Justify the content to have space between each item inside the row on extra-extra-large screens
  • Property
    reverse
    TypeBoolean
    Defaultfalse
    Description Order the content in reverse order inside the row
  • Property
    reverse-xs
    TypeBoolean
    Defaultfalse
    Description Order the content in reverse order inside the row on extra-small screens
  • Property
    reverse-sm
    TypeBoolean
    Defaultfalse
    Description Order the content in reverse order inside the row on small screens
  • Property
    reverse-md
    TypeBoolean
    Defaultfalse
    Description Order the content in reverse order inside the row on medium screens
  • Property
    reverse-lg
    TypeBoolean
    Defaultfalse
    Description Order the content in reverse order inside the row on large screens
  • Property
    reverse-xl
    TypeBoolean
    Defaultfalse
    Description Order the content in reverse order inside the row on extra-large screens
  • Property
    reverse-xxl
    TypeBoolean
    Defaultfalse
    Description Order the content in reverse order inside the row on extra-extra-large screens
<i-column>
  • Property
    xs
    TypeBoolean | String | Number
    Default''
    Description The number of columns to span for extra-small screen sizes. Setting the prop to true will set the width automatically
  • Property
    sm
    TypeBoolean | String | Number
    Default''
    Description The number of columns to span for small screen sizes. Setting the prop to true will set the width automatically
  • Property
    md
    TypeBoolean | String | Number
    Default''
    Description The number of columns to span for medium screen sizes. Setting the prop to true will set the width automatically
  • Property
    lg
    TypeBoolean | String | Number
    Default''
    Description The number of columns to span for large screen sizes. Setting the prop to true will set the width automatically
  • Property
    xl
    TypeBoolean | String | Number
    Default''
    Description The number of columns to span for extra-large screen sizes. Setting the prop to true will set the width automatically
  • Property
    xxl
    TypeBoolean | String | Number
    Default''
    Description The number of columns to span for extra-extra-large screen sizes. Setting the prop to true will set the width automatically
  • Property
    first
    TypeBoolean
    Defaultfalse
    Description Display the column as the first column
  • Property
    first-xs
    TypeBoolean
    Defaultfalse
    Description Display the column as the first column on extra-small screens
  • Property
    first-sm
    TypeBoolean
    Defaultfalse
    Description Display the column as the first column on small screens
  • Property
    first-md
    TypeBoolean
    Defaultfalse
    Description Display the column as the first column on medium screens
  • Property
    first-lg
    TypeBoolean
    Defaultfalse
    Description Display the column as the first column on large screens
  • Property
    first-xl
    TypeBoolean
    Defaultfalse
    Description Display the column as the first column on extra-large screens
  • Property
    first-xxl
    TypeBoolean
    Defaultfalse
    Description Display the column as the first column on extra-extra-large screens
  • Property
    last
    TypeBoolean
    Defaultfalse
    Description Display the column as the last column
  • Property
    last-xs
    TypeBoolean
    Defaultfalse
    Description Display the column as the last column on extra-small screens
  • Property
    last-sm
    TypeBoolean
    Defaultfalse
    Description Display the column as the last column on small screens
  • Property
    last-md
    TypeBoolean
    Defaultfalse
    Description Display the column as the last column on medium screens
  • Property
    last-lg
    TypeBoolean
    Defaultfalse
    Description Display the column as the last column on large screens
  • Property
    last-xl
    TypeBoolean
    Defaultfalse
    Description Display the column as the last column on extra-large screens
  • Property
    last-xxl
    TypeBoolean
    Defaultfalse
    Description Display the column as the last column on extra-extra-large screens
  • Property
    offset
    TypeString | Number
    Default''
    Description The number of columns to offset the column by
  • Property
    offset-xs
    TypeString | Number
    Default''
    Description The number of columns to offset the column by on extra-small screens
  • Property
    offset-sm
    TypeString | Number
    Default''
    Description The number of columns to offset the column by on small screens
  • Property
    offset-md
    TypeString | Number
    Default''
    Description The number of columns to offset the column by on medium screens
  • Property
    offset-lg
    TypeString | Number
    Default''
    Description The number of columns to offset the column by on large screens
  • Property
    offset-xl
    TypeString | Number
    Default''
    Description The number of columns to offset the column by on extra-large screens
  • Property
    offset-xxl
    TypeString | Number
    Default''
    Description The number of columns to offset the column by on extra-extra-large screens
  • Property
    push
    TypeString | Number
    Default''
    Description The number of columns to push the column by
  • Property
    push-xs
    TypeString | Number
    Default''
    Description The number of columns to push the column by on extra-small screens
  • Property
    push-sm
    TypeString | Number
    Default''
    Description The number of columns to push the column by on small screens
  • Property
    push-md
    TypeString | Number
    Default''
    Description The number of columns to push the column by on medium screens
  • Property
    push-lg
    TypeString | Number
    Default''
    Description The number of columns to push the column by on large screens
  • Property
    push-xl
    TypeString | Number
    Default''
    Description The number of columns to push the column by on extra-large screens
  • Property
    push-xxl
    TypeString | Number
    Default''
    Description The number of columns to push the column by on extra-extra-large screens
  • Property
    pull
    TypeString | Number
    Default''
    Description The number of columns to pull the column by
  • Property
    pull-xs
    TypeString | Number
    Default''
    Description The number of columns to pull the column by on extra-small screens
  • Property
    pull-sm
    TypeString | Number
    Default''
    Description The number of columns to pull the column by on small screens
  • Property
    pull-md
    TypeString | Number
    Default''
    Description The number of columns to pull the column by on medium screens
  • Property
    pull-lg
    TypeString | Number
    Default''
    Description The number of columns to pull the column by on large screens
  • Property
    pull-xl
    TypeString | Number
    Default''
    Description The number of columns to pull the column by on extra-large screens
  • Property
    pull-xxl
    TypeString | Number
    Default''
    Description The number of columns to pull the column by on extra-extra-large screens

Slots

Use slots to insert custom content into well-defined component locations.

<i-container>
  • Property
    default
    Description Slot for default container content
<i-row>
  • Property
    default
    Description Slot for default row content
<i-column>
  • Property
    default
    Description Slot for default column content

CSS Variables

Read more about configuring Inkline’s Design System variables to update the look and feel of the component.

<i-container>
  • Property
    --width--xs
    Value100%
    Description The width of the container component on extrasmall screens
  • Property
    --width--sm
    Valuecalc(#{breakpoint('sm')} - #{gutter('sm')})
    Description The width of the container component on small screens
  • Property
    --width--md
    Valuecalc(#{breakpoint('md')} - #{gutter('md')})
    Description The width of the container component on medium screens
  • Property
    --width--lg
    Valuecalc(#{breakpoint('lg')} - #{gutter('lg')})
    Description The width of the container component on large screens
  • Property
    --width--xl
    Valuecalc(#{breakpoint('xl')} - #{gutter('xl')})
    Description The width of the container component on extralarge screens
  • Property
    --width--xxl
    Valuecalc(#{breakpoint('xxl')} - #{gutter('xxl')})
    Description The width of the container component on extralarge screens