Grid ​

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 ​

Props ​

VRow ​

VCol ​

Standalone Installation ​

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

npm i @morpheme/layouts

npm i @morpheme/layouts

Storybook ​

View Storybook documentation here.