Grid

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.

Grid Offset

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

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

Grid Push / Pull

Code-wise, the columns have a different order.

Auto Width

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

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.

Horizontal Alignment

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

start-*

center-*

end-*

Vertical Alignment

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

top-*

middle-*

bottom-*

Distribution

Distribute the spacing between the columns of a row.

around-*

between-*

Reordering

Reorder columns using helper classes.

reverse-*

first-*

last-*

Responsive Width

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

Fluid Container

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

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.

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.