Inkline's grid system is modelled as a 12 columns layout built using flexbox, with equally divided columns, separated by a small gutter. { .lead }
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
columnwidths in a row is more than 12, then the overflowing column will start on a new line.
Create basic grid layout using columns.
<i-container>
<i-row>
<i-column xs="12"></i-column>
</i-row>
<i-row>
<i-column xs="1"></i-column>
<i-column xs="11"></i-column>
</i-row>
<i-row>
<i-column xs="2"></i-column>
<i-column xs="10"></i-column>
</i-row>
<i-row>
<i-column xs="3"></i-column>
<i-column xs="9"></i-column>
</i-row>
<i-row>
<i-column xs="4"></i-column>
<i-column xs="8"></i-column>
</i-row>
<i-row>
<i-column xs="5"></i-column>
<i-column xs="7"></i-column>
</i-row>
<i-row>
<i-column xs="6"></i-column>
<i-column xs="6"></i-column>
</i-row>
<i-row>
<i-column xs="7"></i-column>
<i-column xs="5"></i-column>
</i-row>
<i-row>
<i-column xs="8"></i-column>
<i-column xs="4"></i-column>
</i-row>
<i-row>
<i-column xs="9"></i-column>
<i-column xs="3"></i-column>
</i-row>
<i-row>
<i-column xs="10"></i-column>
<i-column xs="2"></i-column>
</i-row>
<i-row>
<i-column xs="11"></i-column>
<i-column xs="1"></i-column>
</i-row>
<i-row>
<i-column xs="12"></i-column>
</i-row>
</i-container>Grid offsets are used to move a column to the right without creating an empty column next to it.
<i-container>
<i-row>
<i-column xs="1" offset-xs="11"></i-column>
</i-row>
<i-row>
<i-column xs="2" offset-xs="10"></i-column>
</i-row>
<i-row>
<i-column xs="3" offset-xs="9"></i-column>
</i-row>
<i-row>
<i-column xs="4" offset-xs="8"></i-column>
</i-row>
<i-row>
<i-column xs="5" offset-xs="7"></i-column>
</i-row>
<i-row>
<i-column xs="6" offset-xs="6"></i-column>
</i-row>
<i-row>
<i-column xs="7" offset-xs="5"></i-column>
</i-row>
<i-row>
<i-column xs="8" offset-xs="4"></i-column>
</i-row>
<i-row>
<i-column xs="9" offset-xs="3"></i-column>
</i-row>
<i-row>
<i-column xs="10" offset-xs="2"></i-column>
</i-row>
<i-row>
<i-column xs="11" offset-xs="1"></i-column>
</i-row>
</i-container>You may need to use offset-{breakpoint}="0" to clear an offset. See this in action in the grid example below.
<i-container>
<i-row>
<i-column sm="5" md="6">
<grid-box></grid-box>
</i-column>
<i-column sm="5" offset-sm="2" md="6" offset-md="0">
<grid-box></grid-box>
</i-column>
</i-row>
</i-container>Code-wise, the columns have a different order.
<i-container>
<i-row>
<i-column xs="1" push-xs="11"></div>
<i-column xs="11" pull-xs="1"></div>
</i-row>
<i-row>
<i-column xs="2" push-xs="10"></div>
<i-column xs="10" pull-xs="2"></div>
</i-row>
<i-row>
<i-column xs="3" push-xs="9"></div>
<i-column xs="9" pull-xs="3"></div>
</i-row>
<i-row>
<i-column xs="4" push-xs="8"></div>
<i-column xs="8" pull-xs="4"></div>
</i-row>
<i-row>
<i-column xs="5" push-xs="7"></div>
<i-column xs="7" pull-xs="5"></div>
</i-row>
<i-row>
<i-column xs="6" push-xs="6"></div>
<i-column xs="6" pull-xs="6"></div>
</i-row>
<i-row>
<i-column xs="7" push-xs="5"></div>
<i-column xs="5" pull-xs="7"></div>
</i-row>
<i-row>
<i-column xs="8" push-xs="8"></div>
<i-column xs="4" pull-xs="4"></div>
</i-row>
<i-row>
<i-column xs="9" push-xs="3"></div>
<i-column xs="3" pull-xs="9"></div>
</i-row>
<i-row>
<i-column xs="10" push-xs="2"></div>
<i-column xs="2" pull-xs="10"></div>
</i-row>
<i-row>
<i-column xs="11" push-xs="1"></div>
<i-column xs="1" pull-xs="11"></div>
</i-row>
</i-container>The grid will automatically fit any number of auto sizing columns to a row.
<i-container>
<i-row>
<i-column :xs="true"></i-column>
</i-row>
<i-row>
<i-column :xs="true"></i-column>
<i-column :xs="true"></i-column>
</i-row>
<i-row>
<i-column :xs="true"></i-column>
<i-column :xs="true"></i-column>
<i-column :xs="true"></i-column>
</i-row>
<i-row>
<i-column :xs="true"></i-column>
<i-column :xs="true"></i-column>
<i-column :xs="true"></i-column>
<i-column :xs="true"></i-column>
</i-row>
<i-row>
<i-column :xs="true"></i-column>
<i-column :xs="true"></i-column>
<i-column :xs="true"></i-column>
<i-column :xs="true"></i-column>
<i-column :xs="true"></i-column>
</i-row>
<i-row>
<i-column :xs="true"></i-column>
<i-column :xs="true"></i-column>
<i-column :xs="true"></i-column>
<i-column :xs="true"></i-column>
<i-column :xs="true"></i-column>
<i-column :xs="true"></i-column>
</i-row>
</i-container>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.
<i-container>
<i-row>
<i-column xs="8">
<i-row>
<i-column xs="3"></i-column>
<i-column xs="3"></i-column>
<i-column xs="3"></i-column>
<i-column xs="3"></i-column>
</i-row>
</i-column>
<i-column xs="4">
<i-row>
<i-column xs="6"></i-column>
<i-column xs="6"></i-column>
</i-row>
</i-column>
</i-row>
</i-container>You can align columns horizontally to the start, center, or end of a row.
<i-container>
<i-row start-xs>
<i-column xs="4"></i-column>
</i-row>
</i-container><i-container>
<i-row center-xs>
<i-column xs="4"></i-column>
</i-row>
</i-container><i-container>
<i-row end-xs>
<i-column xs="4"></i-column>
</i-row>
</i-container>You can align columns vertically to the top, middle or bottom of the row.
<i-container>
<i-row top-xs>
<i-column xs="6"></i-column>
<i-column xs="6"></i-column>
</i-row>
</i-container><i-container>
<i-row middle-xs>
<i-column xs="6"></i-column>
<i-column xs="6"></i-column>
</i-row>
</i-container><i-container>
<i-row bottom-xs>
<i-column xs="6"></i-column>
<i-column xs="6"></i-column>
</i-row>
</i-container>Distribute the spacing between the columns of a row.
<i-container>
<i-row around-xs>
<i-column xs="3"></i-column>
<i-column xs="3"></i-column>
<i-column xs="3"></i-column>
</i-row>
</i-container><i-container>
<i-row between-xs>
<i-column xs="3"></i-column>
<i-column xs="3"></i-column>
<i-column xs="3"></i-column>
</i-row>
</i-container>Reorder columns using helper classes.
1 2 3 4<i-container>
<i-row reverse-xs>
<i-column xs="3">1</i-column>
<i-column xs="3">2</i-column>
<i-column xs="3">3</i-column>
<i-column xs="3">4</i-column>
</i-row>
</i-container><i-container>
<i-row>
<i-column xs="3">1</i-column>
<i-column xs="3">2</i-column>
<i-column xs="3">3</i-column>
<i-column xs="3" first-xs>4</i-column>
</i-row>
</i-container><i-container>
<i-row>
<i-column xs="3" last-xs>1</div>
<i-column xs="3">2</div>
<i-column xs="3">3</div>
<i-column xs="3">4</div>
</i-row>
</i-container>You can specify column counts for each breakpoint. Try to resize your browser window!
<i-container>
<i-row>
<i-column xl="3" lg="6" md="6" sm="8" xs="12"></i-column>
<i-column xl="3" lg="6" md="6" sm="4" xs="6"></i-column>
<i-column xl="6" lg="4" md="6" sm="6" xs="3"></i-column>
<i-column xl="12" lg="8" md="6" sm="6" xs="3"></i-column>
</i-row>
</i-container>You can make the <i-container> component fill the whole width of the parent element using the fluid property.
<i-container fluid>
<i-row>
<i-column xs></i-column>
<i-column xs></i-column>
<i-column xs></i-column>
</i-row>
</i-container>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.
fluid Sets the container to cover 100% of the parent's width. Booleantrue, false
false
default
Slot for container default content.
no-gutter
Sets whether the row and child columns have a gutter width.
Boolean
true, false
false
no-collapse
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 start-xs, start-sm, start-md, start-lg, start-xl (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 center-xs, center-sm, center-md, center-lg, center-xl (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 end-xs, end-sm, end-md, end-lg, end-xl (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 top-xs, top-sm, top-md, top-lg, top-xl (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 middle-xs, middle-sm, middle-md, middle-lg, middle-xl (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 bottom-xs, bottom-sm, bottom-md, bottom-lg, bottom-xl (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 around-xs, around-sm, around-md, around-lg, around-xl (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 between-xs, between-sm, between-md, between-lg, between-xl (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 reverse-xs, reverse-sm, reverse-md, reverse-lg, reverse-xl (e.g. will be used as <i-row reverse-xs> in template).
Boolean
true, false
false
default
Slot for row default content.
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
xl
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 first-xs, first-sm, first-md, first-lg, first-xl (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 last-xs, last-sm, last-md, last-lg, last-xl (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 offset-xs, offset-sm, offset-md, offset-lg, offset-xl (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 push-xs, push-sm, push-md, push-lg, push-xl (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 pull-xs, pull-sm, pull-md, pull-lg, pull-xl (e.g. will be used as <i-column pull-xs="4"> in template).
Number, Boolean
1-12, true, false
false
default
Slot for column default content.
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.
$container-width-xs100%
$container-width-sm
$breakpoints-sm - $gutter-sm
$container-width-md
$breakpoints-md - $gutter-md
$container-width-lg
$breakpoints-lg - $gutter-lg
$container-width-xl
$breakpoints-xl - $gutter-xl
$columns
12