Grid

Create responsive layouts with Inkline's 12-column grid system. Built with flexbox, featuring equally divided columns separated by a small gutter.

Inkline's grid system is highly flexible, allowing you to create complex responsive layouts with ease. It uses percentage widths, therefore you can nest rows and columns inside each other to create sophisticated designs, and use the provided modifiers to adjust the layout at different breakpoints.

The grid system is defined using <IContainer>, <IRow> and <IColumn> components, with each one having specific responsive modifiers. Here's how it works:

  • Create a container using the <IContainer> component.
  • Inside the container, define a row using the <IRow> component, and add columns using the <IColumn> component.
  • Place your content elements directly in a <IColumn>. Only <IColumn> should be placed directly inside an <IRow> component.
  • Set the column width using values of 1-12 or true at each responsive breakpoint (xs, sm, md, lg, xl, 2xl).
  • If the sum of column widths in a row is more than 12, the overflowing column will start on a new line.

Basic Grid

Create basic grid layout using columns.

Nested Grid

With Inkline's grid system, you can nest up to 12 columns inside a row. Rows can also be nested inside any column, providing virtually endless layout possibilities.

Column 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 example below.

Column Push / Pull

Inkline's grid system provides push and pull props that allow you to shift columns left or right, respectively. The push and pull props reorder columns within a row and are available for each responsive breakpoint.

You may need to use push="0", push-{breakpoint}="0", pull="0", pull-{breakpoint}="0" to clear a push or pull.

Column Auto Width

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

Row Horizontal Alignment

You can align columns horizontally inside the IRow component using the start, center, or end props.

Row Start

The start prop of the row component can be used to align columns inside it at the start of the row. You can use start-{breakpoint} to target screen sizes starting from a specific breakpoint.

Row Center

The center prop of the row component can be used to align columns inside it at the center of the row. You can use center-{breakpoint} to target screen sizes starting from a specific breakpoint.

Row End

The end prop of the row component can be used to align columns inside it at the end of the row. You can use end-{breakpoint} to target screen sizes starting from a specific breakpoint.

Row Vertical Alignment

You can align columns vertically inside the IRow component using the top, middle, or bottom props.

Row Top

The top prop of the row component can be used to align columns inside it at the top of the row. You can use top-{breakpoint} to target screen sizes starting from a specific breakpoint.

Row Middle

The middle prop of the row component can be used to align columns inside it at the middle of the row. You can use middle-{breakpoint} to target screen sizes starting from a specific breakpoint.

Row Bottom

The bottom prop of the row component can be used to align columns inside it at the bottom of the row. You can use bottom-{breakpoint} to target screen sizes starting from a specific breakpoint.

Row Distribution

Distribute the spacing between the columns of a row using the around, or between props.

Space around

The around prop for the row component distributes columns evenly with equal space around them. This means that there will be space between the first and last columns and the edge of the row, as well as between each column. You can use around-{breakpoint} to target screen sizes starting from a specific breakpoint.

Space between

The between prop for the row component distributes columns evenly with equal space between them. This means that there will be space only between each column, not between the columns and the edge of the row. You can use between-{breakpoint} to target screen sizes starting from a specific breakpoint.

Reordering

Column reordering allows you to change the visual order of columns without modifying the source order.

Reverse order

The reverse prop of the row component can be used to reverse the order of columns inside it. You can use reverse-{breakpoint} to target screen sizes starting from a specific breakpoint.

First in order

The first prop of the column component can be used to order the column as the first one in the row, regardless of its position in the source code. You can use first-{breakpoint} to target screen sizes starting from a specific breakpoint.

Last in order

The last prop of the column component can be used to order the column as the last one in the row, regardless of its position in the source code. You can use last-{breakpoint} to target screen sizes starting from a specific breakpoint.

Responsive Column Width

With Inkline's grid system, you can specify different column widths for each breakpoint, allowing you to create layouts that adapt to different screen sizes.

Try to resize your browser window!

Fluid Container

You can make the IContainer component fill the whole width of the parent element using the fluid property.

Props

IContainer
IRow
IColumn

Slots

IContainer
IRow
IColumn