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, xlg).
  • 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

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.

start-*

Horizontal Alignment - Start

center-*

Horizontal Alignment - Center

end-*

Horizontal Alignment - End

Vertical Alignment

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

top-*

Vertical Alignment - Top

middle-*

Vertical Alignment - Middle

bottom-*

Vertical Alignment - Bottom

Distribution

Distribute the spacing between the columns of a row.

around-*

Distribution - Around

between-*

Distribution - Between

Reordering

Reorder columns using helper classes.

reverse-*

Reordering - Reverse
1
2
3
4

first-*

Reordering - First
1
2
3
4

last-*

Reordering - Last
1
2
3
4

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

API

Container API
Property Description Type Accepted Default
fluid Sets the container to cover 100% of the parent's width. Boolean true, false false
Row API
Property Description Type Accepted Default
noGutter Sets whether the row and child columns have a gutter width. Boolean true, false false
noCollapse Sets the flex flow to be row nowrap. Boolean true, false false
start Aligns the content to the start of the row. The alignment can be applied responsively by adding one of the responsive properties startXs, startSm, startMd, startLg, startXl (e.g. will be used as <i-row start-xs> in template). Boolean true, false false
center Aligns the content to the center of the row. The alignment can be applied responsively by adding one of the responsive properties centerXs, centerSm, centerMd, centerLg, centerXl (e.g. will be used as <i-row center-xs> in template). Boolean true, false false
end Aligns the content to the end of the row. The alignment can be applied responsively by adding one of the responsive properties endXs, endSm, endMd, endLg, endXl (e.g. will be used as <i-row end-xs> in template). Boolean true, false false
top Aligns the content to the top of the row. The alignment can be applied responsively by adding one of the responsive properties topXs, topSm, topMd, topLg, topXl (e.g. will be used as <i-row top-xs> in template). Boolean true, false false
middle Aligns the content to the middle of the row. The alignment can be applied responsively by adding one of the responsive properties middleXs, middleSm, middleMd, middleLg, middleXl (e.g. will be used as <i-row middle-xs> in template). Boolean true, false false
bottom Aligns the content to the bottom of the row. The alignment can be applied responsively by adding one of the responsive properties bottomXs, bottomSm, bottomMd, bottomLg, bottomXl (e.g. will be used as <i-row bottom-xs> in template). Boolean true, false false
around Justifies the content position to have space around. The content justifying can be applied responsively by adding one of the responsive properties aroundXs, aroundSm, aroundMd, aroundLg, aroundXl (e.g. will be used as <i-row around-xs> in template). Boolean true, false false
between Justifies the content position to have space between. The content justifying can be applied responsively by adding one of the responsive properties betweenXs, betweenSm, betweenMd, betweenLg, betweenXl (e.g. will be used as <i-row between-xs> in template). Boolean true, false false
reverse Reverses the order of the row content. The content justifying can be applied responsively by adding one of the responsive properties reverseXs, reverseSm, reverseMd, reverseLg, reverseXl (e.g. will be used as <i-row reverse-xs> in template). Boolean true, false false
Column API
Property Description Type Accepted Default
xs Sets the number of columns for extra small screens (screen width lower than 30rem). A true value will cause it to occupy as much space as it can on extra small screens. Number, Boolean 1-12, true, false false
sm Sets the number of columns for small screens (screen width lower than 48rem). A true value will cause it to occupy as much space as it can on small screens. Number, Boolean 1-12, true, false false
md Sets the number of columns for medium screens (screen width lower than 64rem). A true value will cause it to occupy as much space as it can on medium screens. Number, Boolean 1-12, true, false false
lg Sets the number of columns for large screens (screen width lower than 75rem). A true value will cause it to occupy as much space as it can on large screens. Number, Boolean 1-12, true, false false
xlg Sets the number of columns for extra large screens (screen width lower than 92.5rem). A true value will cause it to occupy as much space as it can on extra large screens. Number, Boolean 1-12, true, false false
first Orders the column to be first. The order can be applied responsively by adding one of the responsive properties firstXs, firstSm, firstMd, firstLg, firstXl (e.g. will be used as <i-column first-xs> in template). Boolean true, false false
last Orders the column to be last. The order can be applied responsively by adding one of the responsive properties lastXs, lastSm, lastMd, lastLg, lastXl (e.g. will be used as <i-column last-xs> in template). Boolean true, false false
offset Offsets the column by a number of columns. The offset can be applied responsively by adding one of the responsive properties offsetXs, offsetSm, offsetMd, offsetLg, offsetXl (e.g. will be used as <i-column offset-xs="4"> in template). Number, Boolean 1-12, true, false false
push Pushes the column by a number of columns. This is useful for keeping the markup order while changing the display order of the columns. The push can be applied responsively by adding one of the responsive properties pushXs, pushSm, pushMd, pushLg, pushXl (e.g. will be used as <i-column push-xs="4"> in template). Number, Boolean 1-12, true, false false
pull Pulls the column by a number of columns. This is useful for keeping the markup order while changing the display order of the columns. The pull can be applied responsively by adding one of the responsive properties pullXs, pullSm, pullMd, pullLg, pullXl (e.g. will be used as <i-column pull-xs="4"> in template). Number, Boolean 1-12, true, false false