Skip to content

Grid

WARNING

Experimental

The grid is used to create specific layouts within an application’s content. It contains 5 types of media breakpoints that are used for targeting specific screen sizes or orientations:sm, md, lg and xl.

Components

VRow

The VRow component is a flexible row container that provides options for controlling the gap between items, alignment, and justification within the row.

VCol

The VCol component is a flexible column container that allows you to control the column width, offset, and order at different breakpoints.

Usage

The grid components is heavily inspired by the Bootstrap and Vuetify grid . It is implemented by using a series of containers, rows, and columns to layout and align content. If you are new to flexbox, read the CSS Tricks flexbox guide for background, terminology, guidelines, and code snippets.

Column

The VCol component allows you to define the size of a column using the cols prop. You can specify the width of the column by providing a number between 1 and 12 or by using the value auto to let the column adjust its width based on the content.

In this example, we create a row with three columns. The first column has a width of 1, the second column has a width of 3, and the third column has a width of 8.

Offset

You can offset a column within a row using the offset prop. This allows you to create empty space before a column, pushing it to the right.

In this example, we create a row with three columns. The third column has an offset of 3, which means it will be pushed 3 units to the right, creating empty space before it.

Order

The order prop allows you to control the order of columns within a row. By default, columns are displayed in the order they appear in the markup. However, you can use the order prop to override the default order and rearrange the columns as needed.

In this example, we create a row with three columns. The first column has an order of 2, the second column has an order of 3, and the third column has an order of 1. As a result, the columns will be displayed in the order 3, 1, 2.

Alignment

The VRow component allows you to control the alignment of its child columns using the align, alignContent, and justifyContent props.

In this example, we create a row with three columns. The align prop controls the alignment of the items within each column, the alignContent prop controls the alignment of the row's content, and the justifyContent prop controls the justification of the row's content.

Responsive

The VCol component supports responsiveness by allowing you to set different column widths for different breakpoints. You can use the sm, md, lg, and xl props to specify the column widths for small, medium, large, and extra-large screens, respectively.

In this example, we create a row with three columns. On extra-large screens (xl breakpoint), each column occupies 4 units of the available width. On large screens (lg breakpoint), each column occupies 4 units of the available width. On small screens (sm breakpoint) and below, each column occupies 3 units of the available width.

Breakpoints

BreakpointsMax WidthDevice
sm>= 360pxMobile
md>= 640pxTablet
lg>= 768pxTablet
xl>= 834pxTablet
2xl>= 1024pxTablet
3xl>= 1440pxDesktop

Props

VRow

PropTypeDefaultDescription
gapstring | number-Sets the gap between items in the row.
gapSmstring | number-Sets the gap between items in the row for small screens (sm breakpoint).
gapMdstring | number-Sets the gap between items in the row for medium screens (md breakpoint).
gapLgstring | number-Sets the gap between items in the row for large screens (lg breakpoint).
gapXlstring | number-Sets the gap between items in the row for extra-large screens (xl breakpoint).
alignstring-Sets the alignment of items within the row.
alignContentstring-Sets the alignment of the entire row content.
justifyContentstring-Sets the justification of items within the row.
alignSmstring-Sets the alignment of items within the row for small screens (sm breakpoint).
alignContentSmstring-Sets the alignment of the entire row content for small screens (sm breakpoint).
justifyContentSmstring-Sets the justification of items within the row for small screens (sm breakpoint).
alignMdstring-Sets the alignment of items within the row for medium screens (md breakpoint).
alignContentMdstring-Sets the alignment of the entire row content for medium screens (md breakpoint).
justifyContentMdstring-Sets the justification of items within the row for medium screens (md breakpoint).
alignLgstring-Sets the alignment of items within the row for large screens (lg breakpoint).
alignContentLgstring-Sets the alignment of the entire row content for large screens (lg breakpoint).
justifyContentLgstring-Sets the justification of items within the row for large screens (lg breakpoint).
alignXlstring-Sets the alignment of items within the row for extra-large screens (xl breakpoint).
alignContentXlstring-Sets the alignment of the entire row content for extra-large screens (xl breakpoint).
justifyContentXlstring-Sets the justification of items within the row for extra-large screens (xl breakpoint).

VCol

PropTypeDefaultDescription
cols"auto" | string | number"auto"Sets the width of the column.
offsetstring | number-Sets the offset of the column.
orderstring | number-Sets the order of the column.
sm"auto" | string | number-Sets the width of the column for small screens (sm breakpoint).
md"auto" | string | number-Sets the width of the column for medium screens (md breakpoint).
lg"auto" | string | number-Sets the width of the column for large screens (lg breakpoint).
xl"auto" | string | number-Sets the width of the column for extra-large screens (xl breakpoint).
offsetSmstring | number-Sets the offset of the column for small screens (sm breakpoint).
offsetMdstring | number-Sets the offset of the column for medium screens (md breakpoint).
offsetLgstring | number-Sets the offset of the column for large screens (lg breakpoint).
offsetXlstring | number-Sets the offset of the column for extra-large screens (xl breakpoint).
orderSmstring | number-Sets the order of the column for small screens (sm breakpoint).
orderMdstring | number-Sets the order of the column for medium screens (md breakpoint).
orderLgstring | number-Sets the order of the column for large screens (lg breakpoint).
orderXlstring | number-Sets the order of the column for extra-large screens (xl breakpoint).

Standalone Installation

You can also install the grid component individually via @morpheme/layouts package:

bash
npm i @morpheme/layouts
npm i @morpheme/layouts

Storybook

View Storybook documentation here.