Source: dist/css/acc_uc.css, line 7207
7.6.3.1 Equal-width Columns
Description: This group of utility classes sets the grid-template-columns property to create a responsive grid layout with equal-width columns.
Example s
.columns_1
Creates a grid layout with a single column that takes up the entire available space.
1
2
3
4
5
6
.columns_2
Creates a grid layout with two equal-width columns.
1
2
3
4
5
6
.columns_3
Creates a grid layout with three equal-width columns.
1
2
3
4
5
6
.columns_4
Creates a grid layout with four equal-width columns.
1
2
3
4
5
6
.columns_5
Creates a grid layout with five equal-width columns.
1
2
3
4
5
6
.columns_6
Creates a grid layout with six equal-width columns.
1
2
3
4
5
6
NOTE:
These utility classes are a basic method for creating grid layouts with equal-width columns. However, for more advanced column manipulation techniques, please refer to the documentation below.<div class="[modifier class] gap_3 grid">
<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>