Arches: Utility Classes

Arches:Utility Classes

Multi Product Brand Style System by the American College of Cardiology

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

7.6.4.1.1 Advanced Rows

Description: This group of utility classes sets the grid-template-Rows property to create a responsive grid layout with custom-height Rows using CSS variables. In the below example the --row-2 variable is set to 10rem rather thenthe default fr.

Example s

.rows_1

repeat on 1 the --row-2 is never used because it is looping just over the first row.

1
2
3
4
5
6

.rows_2

repeat on 2 and the second row is stet to be 10rem

1
2
3
4
5
6

.rows_3

repeat on 3 and the second row is stet to be 10rem

1
2
3
4
5
6

.rows_4

repeat on 4 and the second row is stet to be 10rem

1
2
3
4
5
6

.rows_5

repeat on 5 and the second row is stet to be 10rem

1
2
3
4
5
6

.rows_6

repeat on 6 and the second row is stet to be 10rem

1
2
3
4
5
6
NOTE:
These utility classes allow you to easily create grid layouts with rows of customized heights. Simply define the desired height for each column using CSS variables (--row-1, --row-2, etc.). By default, the height is set to 1fr for equal-height rows. However, you can override these values as needed by including inline styles, as shown in this example, or by using in-page style tags. To make responsive adjustments to the CSS variables, you can use in-page style tags to define responsive media queries that modify the values of the CSS variables. For a reference, you can look at the `Advanced Columns Advanced` example, which uses a style tag to achieve this. 
<div class="[modifier class] gap_3 grid" style="--row-2: 10rem">
	<div class="bg_acc c_white font_2 font_bold grid items_center justify_around p_2 br_solid br_black-3 br_1">1</div>
	<div class="bg_acc c_white font_2 font_bold grid items_center justify_around p_2 br_solid br_black-3 br_1">2</div>
	<div class="bg_acc c_white font_2 font_bold grid items_center justify_around p_2 br_solid br_black-3 br_1">3</div>
	<div class="bg_acc c_white font_2 font_bold grid items_center justify_around p_2 br_solid br_black-3 br_1">4</div>
	<div class="bg_acc c_white font_2 font_bold grid items_center justify_around p_2 br_solid br_black-3 br_1">5</div>
	<div class="bg_acc c_white font_2 font_bold grid items_center justify_around p_2 br_solid br_black-3 br_1">6</div>
</div>
Copy Code