Multi column layout

For responsive

add -sm, -md, -lg or -xl to class name, for example:

<div class="cc2 cc3-md"></div>

.cc1 {
    column-count: 1;
}
.cc2 {
    column-count: 2;
}
.cc3 {
    column-count: 3;
}
.cc4 {
    column-count: 4;
}
.cc5 {
    column-count: 5;
}
.cc6 {
    column-count: 6;
}
.cc7 {
    column-count: 7;
}
.cc8 {
    column-count: 8;
}
.cc9 {
    column-count: 9;
}
.cc10 {
    column-count: 10;
}
.cc11 {
    column-count: 11;
}
.cc12 {
    column-count: 12;
}

column-span: all

.caa {
    column-span: all;
}

break-inside: avoid-column;

.bia {
    break-inside: avoid-column;
}