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