Equal height row

The equal height row component aims to provide consistent alignment for grid items within a row format. This is achieved using the CSS subgrid feature which allows column grids to share the same layout used in the parent row grid.

In addition to enforcing column grid item alignment within each row, default responsive behaviour is shown below:

Screen size (px)	Behaviour
Less than `$breakpoint-small`	Each column spans across the entire parent grid. Column items are vertically stacked.
`$breakpoint-small` - `$breakpoint-large`	Each column spans across the entire parent grid. The first item within each column is placed on the left of the other column items.
Greater than `$breakpoint-large`	Columns within the row are displayed horizontally. Column items are vertically stacked.

When using the wrap variant, this responsive behaviour is modified slightly:

Screen size (px)	Behaviour
Less than `$breakpoint-small`	Each column spans across the entire parent grid. Column items are vertically stacked.
`$breakpoint-small` - `$breakpoint-large`	Columns wrap, 2 per row. Column items are vertically stacked.
Greater than `$breakpoint-large`	Columns within the row are displayed horizontally. Column items are vertically stacked.

This component is an extension of the grid component. There are several usage variations detailed in the examples below.

Full example

Each column can have up to 4 sub-grid items that will maintain equal heights between columns.

View example of the four items per column pattern using equal height row component.

Cross-column dividers

You can also insert dividers that span across all columns within a row using the .has-divider-1, .has-divider-2, and .has-divider-3 modifier classes.

You may only have two dividers maximum. For example, if you have .has-divider-1 and .has-divider-2 modifiers set, then .has-divider-3 will not be shown. This is a limitation due to the usage of pseudo elements for visualising these dividers.

Three column row

You may use the equal height row component nested inside the 25/75 grid split pattern on large screen sizes (.row--25-75-on-large). The row (.p-equal-height-row) should be placed within the 75% container with a maximum of three columns.

View example of the three column row pattern using equal height row component.

Four column row

A four column row grid (.p-equal-height-row) spanning the whole width of the default page grid. Each column (.p-equal-height-row__col) within the component is a sub-grid and may have up to four items (.p-equal-height-row__item) within it.

View example of the four column row pattern using equal height row component.

Wrap variant

By applying the modifier class p-equal-height-row--wrap to a three column row or four column row variant, row items will wrap at medium screen sizes. They will also retain their vertical orientation across all breakpoints.

View example of the four column row pattern using equal height row component.

Class reference

.p-equal-height-row

Main element of the equal height row component.

&.has-divider-1

Cross-column divider shown between the first and second grid rows.

&.has-divider-2

Cross-column divider shown between the second and third grid rows.

&.has-divider-3

Cross-column divider shown between the third and fourth grid rows.

.p-equal-height-row--wrap

Wraps contents such that two items appear per row on medium screen sizes.

Column

.p-equal-height-row__col

Column element within an equal height row.

Item

.p-equal-height-row__item

Item element within an equal height row column.

Import

To import just this component into your project, copy the snippet below and include it in your main Sass file.

// import Vanilla and include base mixins
// this only needs to happen once in a given project
@import 'vanilla-framework';
@include vf-base;

@include vf-p-equal-height-row;

For more information see Customising Vanilla in your projects, which includes overrides and importing instructions.