Arches: Utility Classes

Arches:Utility Classes

Multi Product Brand Style System by the American College of Cardiology

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

7.6.1 Grid Gap

Description: Grid Gap

classcss propertyvalue
.gap-x_0 grid-column-gap : 0
.gap-x_1 grid-column-gap : 1px
.gap-x_2 grid-column-gap : 0.25rem
.gap-x_3 grid-column-gap : 0.5rem
.gap-x_4 grid-column-gap : 1rem
.gap-x_5 grid-column-gap : 2rem
.gap-x_6 grid-column-gap : 4rem
classcss propertyvalue
.gap-y_0 grid-row-gap : 0
.gap-y_1 grid-row-gap : 1px
.gap-y_2 grid-row-gap : 0.25rem
.gap-y_3 grid-row-gap : 0.5rem
.gap-y_4 grid-row-gap : 1rem
.gap-y_5 grid-row-gap : 2rem
.gap-y_6 grid-row-gap : 4rem

Example s

1

gap space modifier

gap_1

1
2
3
4
5
6
7
8
9

gap-y_1

1
2
3
4
5
6
7
8
9

gap-x_1

1
2
3
4
5
6
7
8
9

2

gap space modifier

gap_2

1
2
3
4
5
6
7
8
9

gap-y_2

1
2
3
4
5
6
7
8
9

gap-x_2

1
2
3
4
5
6
7
8
9

3

gap space modifier

gap_3

1
2
3
4
5
6
7
8
9

gap-y_3

1
2
3
4
5
6
7
8
9

gap-x_3

1
2
3
4
5
6
7
8
9

4

gap space modifier

gap_4

1
2
3
4
5
6
7
8
9

gap-y_4

1
2
3
4
5
6
7
8
9

gap-x_4

1
2
3
4
5
6
7
8
9

5

gap space modifier

gap_5

1
2
3
4
5
6
7
8
9

gap-y_5

1
2
3
4
5
6
7
8
9

gap-x_5

1
2
3
4
5
6
7
8
9

6

gap space modifier

gap_6

1
2
3
4
5
6
7
8
9

gap-y_6

1
2
3
4
5
6
7
8
9

gap-x_6

1
2
3
4
5
6
7
8
9 
<div class="grid columns-max_15 gap_3"><div class="flex flex_column justify_start"><h2 class="flex_shrink">gap_[modifier class]</h2><div class="gap_[modifier class] grid columns_3 rows_3 flex_auto"><div class="bg_acc c_white font_4 font_bold grid items_center justify_around p_3 br_solid br_black-3 br_1">1 </div><div class="bg_acc c_white font_4 font_bold grid items_center justify_around p_3 br_solid br_black-3 br_1">2 </div><div class="bg_acc c_white font_4 font_bold grid items_center justify_around p_3 br_solid br_black-3 br_1">3 </div><div class="bg_acc c_white font_4 font_bold grid items_center justify_around p_3 br_solid br_black-3 br_1">4 </div><div class="bg_acc c_white font_4 font_bold grid items_center justify_around p_3 br_solid br_black-3 br_1">5 </div><div class="bg_acc c_white font_4 font_bold grid items_center justify_around p_3 br_solid br_black-3 br_1">6 </div><div class="bg_acc c_white font_4 font_bold grid items_center justify_around p_3 br_solid br_black-3 br_1">7 </div><div class="bg_acc c_white font_4 font_bold grid items_center justify_around p_3 br_solid br_black-3 br_1">8 </div><div class="bg_acc c_white font_4 font_bold grid items_center justify_around p_3 br_solid br_black-3 br_1">9 </div></div></div><div class="flex flex_column justify_start"><h2 class="flex_shrink">gap-y_[modifier class]</h2><div class="gap-y_[modifier class] grid columns_3 rows_3 flex_auto"><div class="bg_acc c_white font_4 font_bold grid items_center justify_around p_3 br_solid br_black-3 br_1">1 </div><div class="bg_acc c_white font_4 font_bold grid items_center justify_around p_3 br_solid br_black-3 br_1">2 </div><div class="bg_acc c_white font_4 font_bold grid items_center justify_around p_3 br_solid br_black-3 br_1">3 </div><div class="bg_acc c_white font_4 font_bold grid items_center justify_around p_3 br_solid br_black-3 br_1">4 </div><div class="bg_acc c_white font_4 font_bold grid items_center justify_around p_3 br_solid br_black-3 br_1">5 </div><div class="bg_acc c_white font_4 font_bold grid items_center justify_around p_3 br_solid br_black-3 br_1">6 </div><div class="bg_acc c_white font_4 font_bold grid items_center justify_around p_3 br_solid br_black-3 br_1">7 </div><div class="bg_acc c_white font_4 font_bold grid items_center justify_around p_3 br_solid br_black-3 br_1">8 </div><div class="bg_acc c_white font_4 font_bold grid items_center justify_around p_3 br_solid br_black-3 br_1">9 </div></div></div><div class="flex flex_column justify_start"><h2 class="flex_shrink">gap-x_[modifier class]</h2><div class="gap-x_[modifier class] grid columns_3 rows_3 flex_auto"><div class="bg_acc c_white font_4 font_bold grid items_center justify_around p_3 br_solid br_black-3 br_1">1 </div><div class="bg_acc c_white font_4 font_bold grid items_center justify_around p_3 br_solid br_black-3 br_1">2 </div><div class="bg_acc c_white font_4 font_bold grid items_center justify_around p_3 br_solid br_black-3 br_1">3 </div><div class="bg_acc c_white font_4 font_bold grid items_center justify_around p_3 br_solid br_black-3 br_1">4 </div><div class="bg_acc c_white font_4 font_bold grid items_center justify_around p_3 br_solid br_black-3 br_1">5 </div><div class="bg_acc c_white font_4 font_bold grid items_center justify_around p_3 br_solid br_black-3 br_1">6 </div><div class="bg_acc c_white font_4 font_bold grid items_center justify_around p_3 br_solid br_black-3 br_1">7 </div><div class="bg_acc c_white font_4 font_bold grid items_center justify_around p_3 br_solid br_black-3 br_1">8 </div><div class="bg_acc c_white font_4 font_bold grid items_center justify_around p_3 br_solid br_black-3 br_1">9 </div></div></div></div>
Copy Code