Jump to main content

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 items alignment within each row, responsive behaviour is provided out of the box as 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.

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

Full example

Each column of the component can have up to 4 sub-grid items that will keep equal heights between the columns.

Cross-column dividers

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

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

Three column row

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

Four column row

Used as 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).


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.