Grid

<div class="flex">
    <div class="w-25pc">...</div>
    <div class="w-25pc">...</div>
    <div class="w-25pc">...</div>
    <div class="w-25pc">...</div>
</div>
.w-25pc
.w-25pc
.w-25pc
.w-25pc

Responsive Grid

<div class="flex flex-wrap">
    <div class="w-100pc md-w-50pc lg-w-25pc">A</div>
    <div class="w-100pc md-w-50pc lg-w-25pc">B</div>
    <div class="w-100pc md-w-50pc lg-w-25pc">C</div>
    <div class="w-100pc md-w-50pc lg-w-25pc">D</div>
</div>
A
B
C
D

Equal width column

All the column will share equal width

<div class="flex">
    <div class="flex-equal">A</div>
    <div class="flex-equal">B</div>
    <div class="flex-equal">C</div>
    <div class="flex-equal">D</div>
</div>

<div class="flex">
        <div class="flex-equal">A</div>
        <div class="flex-equal">B</div>
        <div class="flex-equal">C</div>
        <div class="flex-equal">D</div>
        <div class="flex-equal">E</div>
        <div class="flex-equal">F</div>
    </div>
A
B
C
D
A
B
C
D
E
F
1/3
1/3
1/3
1/2
1/2
1/2