Arches: Utility Classes

Arches:Utility Classes

Multi Product Brand Style System by the American College of Cardiology

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

7.6.2.1 Grid: Column and Row Start/End

This group of utility classes allows you to control the starting and ending positions of grid columns and rows.

classcss propertyvalue
.col-start_start grid-column-start : start
.col-start_1 grid-column-start : 1
.col-start_2 grid-column-start : 2
.col-start_3 grid-column-start : 3
.col-start_4 grid-column-start : 4
.col-start_5 grid-column-start : 5
.col-start_6 grid-column-start : 6
.col-start_7 grid-column-start : 7
.col-start_n1 grid-column-start : -1
.col-start_n2 grid-column-start : -2
.col-start_n3 grid-column-start : -3
.col-start_n4 grid-column-start : -4
.col-start_n5 grid-column-start : -5
.col-start_n6 grid-column-start : -6
.col-start_n7 grid-column-start : -7
.col-start_end grid-column-start : end
classcss propertyvalue
.col-end_start grid-column-end : start
.col-end_1 grid-column-end : 1
.col-end_2 grid-column-end : 2
.col-end_3 grid-column-end : 3
.col-end_4 grid-column-end : 4
.col-end_5 grid-column-end : 5
.col-end_6 grid-column-end : 6
.col-end_7 grid-column-end : 7
.col-end_n1 grid-column-end : -1
.col-end_n2 grid-column-end : -2
.col-end_n3 grid-column-end : -3
.col-end_n4 grid-column-end : -4
.col-end_n5 grid-column-end : -5
.col-end_n6 grid-column-end : -6
.col-end_n7 grid-column-end : -7
.col-end_end grid-column-end : end
classcss propertyvalue
.row-start_start grid-row-start : start
.row-start_1 grid-row-start : 1
.row-start_2 grid-row-start : 2
.row-start_3 grid-row-start : 3
.row-start_4 grid-row-start : 4
.row-start_5 grid-row-start : 5
.row-start_6 grid-row-start : 6
.row-start_7 grid-row-start : 7
.row-start_n1 grid-row-start : -1
.row-start_n2 grid-row-start : -2
.row-start_n3 grid-row-start : -3
.row-start_n4 grid-row-start : -4
.row-start_n5 grid-row-start : -5
.row-start_n6 grid-row-start : -6
.row-start_n7 grid-row-start : -7
.row-start_end grid-row-start : end
classcss propertyvalue
.row-end_start grid-row-end : start
.row-end_1 grid-row-end : 1
.row-end_2 grid-row-end : 2
.row-end_3 grid-row-end : 3
.row-end_4 grid-row-end : 4
.row-end_5 grid-row-end : 5
.row-end_6 grid-row-end : 6
.row-end_7 grid-row-end : 7
.row-end_n1 grid-row-end : -1
.row-end_n2 grid-row-end : -2
.row-end_n3 grid-row-end : -3
.row-end_n4 grid-row-end : -4
.row-end_n5 grid-row-end : -5
.row-end_n6 grid-row-end : -6
.row-end_n7 grid-row-end : -7
.row-end_end grid-row-end : end

Modifiers:

Markup Examples:

NOTE:
These utility classes allow you to specify the starting and ending positions of grid columns and rows. Use the corresponding modifier class (e.g., col-start_1, col-end_2, row-start_3, row-end_4) to apply the desired positioning to grid elements.