Arches: Utility Classes

Arches:Utility Classes

Multi Product Brand Style System by the American College of Cardiology

Source: dist/css/acc_uc.css, line 7271

7.6.4.1 Equal-Height Rows

Description: This group of utility classes sets the grid-template-rows property to create a responsive grid layout with equal-height rows. Most of the time the rows should be handled automatically unless you are going to use the advanced features referenced in Advanced Rows

classcss propertyvalue
.rows_1 grid-template-rows : [start] var(--row-1, 1fr) [end]
.rows_2 grid-template-rows : [start] var(--row-1, 1fr) var(--row-2, 1fr) [end]
.rows_3 grid-template-rows : [start] var(--row-1, 1fr) var(--row-2, 1fr) var(--row-3, 1fr) [end]
.rows_4 grid-template-rows : [start] var(--row-1, 1fr) var(--row-2, 1fr) var(--row-3, 1fr) var(--row-4, 1fr) [end]
.rows_5 grid-template-rows : [start] var(--row-1, 1fr) var(--row-2, 1fr) var(--row-3, 1fr) var(--row-4, 1fr) var(--row-5, 1fr) [end]
.rows_6 grid-template-rows : [start] var(--row-1, 1fr) var(--row-2, 1fr) var(--row-3, 1fr) var(--row-4, 1fr) var(--row-5, 1fr) var(--row-6, 1fr) [end]

NOTE:
These utility classes are a basic method for creating grid layouts with equal-height rows. However, for more advanced column manipulation techniques, please refer to the documentation below.