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.

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="0" and 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.

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.

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

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

center

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

end

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

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

middle

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

bottom

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

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

between

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

Reordering

Reorder columns using helper classes.

reverse

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

first

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

last

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!

Fluid Container

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

Configuration

Props

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

• Property

  fluid

  TypeBoolean

  Defaultfalse
  Description Display the container as fluid, always spanning 100% width

• 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

• 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.

• Property

  default
  Description Slot for default container content

• Property

  default
  Description Slot for default row content

• 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.

• 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