Arches: Utility Classes

Arches:Utility Classes

Multi Product Brand Style System by the American College of Cardiology

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

7.6.3.1.1 Advanced Columns

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

classcss propertyvalue
.columns_1 grid-template-columns : [start] var(--col-1, 1fr) [end]
.columns_2 grid-template-columns : [start] var(--col-1, 1fr) var(--col-2, 1fr) [end]
.columns_3 grid-template-columns : [start] var(--col-1, 1fr) var(--col-2, 1fr) var(--col-3, 1fr) [end]
.columns_4 grid-template-columns : [start] var(--col-1, 1fr) var(--col-2, 1fr) var(--col-3, 1fr) var(--col-4, 1fr) [end]
.columns_5 grid-template-columns : [start] var(--col-1, 1fr) var(--col-2, 1fr) var(--col-3, 1fr) var(--col-4, 1fr) var(--col-5, 1fr) [end]
.columns_6 grid-template-columns : [start] var(--col-1, 1fr) var(--col-2, 1fr) var(--col-3, 1fr) var(--col-4, 1fr) var(--col-5, 1fr) var(--col-6, 1fr) [end]

Example s

.columns_1

repeat on 1 the --col-2 is never used

1
2
3
4
5
6

.columns_2

repeat on 2 and the second column is stet to be 3rem when smaller then 768 then the column will be 30rem wide

1
2
3
4
5
6

.columns_3

repeat on 3 and the second column is stet to be 3rem when smaller then 768 then the column will be 30rem wide

1
2
3
4
5
6

.columns_4

repeat on 4 and the second column is stet to be 3rem when smaller then 768 then the column will be 30rem wide

1
2
3
4
5
6

.columns_5

repeat on 5 and the second column is stet to be 3rem when smaller then 768 then the column will be 30rem wide

1
2
3
4
5
6

.columns_6

repeat on 6 and the second column is stet to be 3rem when smaller then 768 then the column will be 30rem wide

1
2
3
4
5
6
NOTE:
These utility classes allow you to easily create grid layouts with columns of customized widths. Simply define the desired width for each row using CSS variables (--col-1, --col-2, etc.). By default, the width is set to 1fr for equal-width columns. 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 Rows Advanced example, which uses a style tag to achieve this. 
<div id="ColumnSample" class="[modifier class] gap_3 grid" style="">
	<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>
<style>
#ColumnSample{ --col-2: 3rem; }
@media only screen and (min-width : 768px) { #ColumnSample{ --col-2: 30rem; }}
</style>
Copy Code