Inkline's grid system is modelled as a 12 columns layout built 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).
  • If the sum of column widths in a row is more than 12, then the overflowing column will start on a new line.

Basic Layout

Create basic grid layout using columns.

Basic Layout

Grid Offset

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

Grid Offset

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

Grid Offset Reset

Grid Push / Pull

Code-wise, the columns have a different order.

Grid Push / Pull

Auto Width

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

Auto Width

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.

Nested Grid

Horizontal Alignment

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


Horizontal Alignment - Start


Horizontal Alignment - Center


Horizontal Alignment - End

Vertical Alignment

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


Vertical Alignment - Top


Vertical Alignment - Middle


Vertical Alignment - Bottom


Distribute the spacing between the columns of a row.


Distribution - Around


Distribution - Between


Reorder columns using helper classes.


Reordering - Reverse


Reordering - First


Reordering - Last

Responsive Width

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

Responsive Grid Width

Fluid Container

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

Fluid Container

Components API

Here you can find a list of the various customization options you can use for the grid components as props, as well as available slots and events.

Container API
Column API

Sass Variables

Here you can find a list of the Sass variables you can use for the grid components. If you're looking to find common variables that these rely on, you should take a look at the Sass Variables page.