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