Equal height row | Components | Vanilla documentation

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.

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 .has-1st-divider, .has-2nd-divider and .has-3rd-divider.

Note:

For smaller screen sizes i.e. < $breakpoint-large the divider will appear below relevant items within each column.

You may only have two dividers maximum. For example, if you have .has-1st-divider and .has-2nd-divider set for the row, then .has-3rd-divider 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.

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

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

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

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.