Grid Flex - Packit UI

O grid flex é ideal quando você precisa trabalhar em uma única dimensão, seja ela vertical ou horizontal. Ele ajusta automaticamente a altura dos elementos na mesma linha para coincidir com a altura da coluna mais alta.

O sistema de grid flex tem 3 breakpoints, mobile-first 1 coluna, 2 colunas a partir da resolução de 480px e 12 colunas a partir da resolução de 768px

cn_0

cn_0
cn_0
cn_0
cn_0
cn_0
cn_0
cn_0

cn_50

cn_0

<div class="flexbox">
    <div class="cn_0"></div>
    <div class="cn_0"></div>
    <div class="cn_0"></div>
    <div class="cn_0"></div>
</div>
<ul class="flexbox">
    <li class="cn_0"></li>
    <li class="cn_0"></li>
    <li class="cn_0"></li>
    <li class="cn_0"></li>
    <li class="cn_0"></li>
    <li class="cn_0"></li>
    <li class="cn_0"></li>
</ul>
<div class="flexbox">
    <div class="cn_50"></div>
    <div class="cn_0"></div>
    <div class="cn_0"></div>
    <div class="cn_0"></div>
</div>

cn_20

cn_25

cn_33

cn_50

cn_100

<div class="flexbox">
    <div class="cn_20"></div>
    <div class="cn_20"></div>
    <div class="cn_20"></div>
    <div class="cn_20"></div>
    <div class="cn_20"></div>

    <div class="cn_25"></div>
    <div class="cn_25"></div>
    <div class="cn_25"></div>
    <div class="cn_25"></div>

    <div class="cn_33"></div>
    <div class="cn_33"></div>
    <div class="cn_33"></div>

    <div class="cn_50"></div>
    <div class="cn_50"></div>

    <div class="cn_100"></div>
</div>

cn_80

cn_20

cn_75

cn_25

cn_70

cn_30

cn_67

cn_33

cn_60

cn_40

<div class="flexbox">
    <div class="cn_80"></div>
    <div class="cn_20"></div>

    <div class="cn_75"></div>
    <div class="cn_25"></div>

    <div class="cn_70"></div>
    <div class="cn_30"></div>

    <div class="cn_67"></div>
    <div class="cn_33"></div>

    <div class="cn_60"></div>
    <div class="cn_40"></div>
</div>

cn_20

cn_60

cn_20

cn_25

cn_50

cn_25

cn_30

cn_40

cn_30

cn_40

cn_20

cn_40

<div class="flexbox">
    <div class="cn_20"></div>
    <div class="cn_60"></div>
    <div class="cn_20"></div>

    <div class="cn_25"></div>
    <div class="cn_50"></div>
    <div class="cn_25"></div>

    <div class="cn_30"></div>
    <div class="cn_40"></div>
    <div class="cn_30"></div>

    <div class="cn_40"></div>
    <div class="cn_20"></div>
    <div class="cn_40"></div>
</div>

cn_70

cn_100

cn_50

cn_30

<div class="flexbox">
    <div class="cn_70">
        <div class="flexbox">
            <div class="cn_100"></div>
            <div class="cn_50"></div>
            <div class="cn_50"></div>
            <div class="cn_50"></div>
            <div class="cn_50"></div>
        </div>
    </div>
    <div class="cn_30"></div>
</div>

cn_30

cn_70

cn_100

<div class="flexbox">
    <div class="cn_70"></div>
    <div class="cn_30">
        <div class="flexbox">
            <div class="cn_100"></div>
            <div class="cn_100"></div>
            <div class="cn_100"></div>
        </div>
    </div>
</div>

.flexbox {
    display: flex;
    flex-wrap: wrap;
}
[class^="cn_"], [class*=" cn_"] {
    flex: 0 0 100%;
}
@media(min-width: 480px) {
    /* 2 tamanhos de colunas */
    [class^="cn_"], [class*=" cn_"] {
        flex: 0 0 50%;
    }
    /* auto */
    .cn_0 { 
        flex: 1 0 0% 
    }
    .cn_100 {
        flex: 0 0 100%;
    }
}
@media(min-width: 768px) {
    .cn_20 { flex: 0 0 20% }
    .cn_25 { flex: 0 0 25% }
    .cn_30 { flex: 0 0 30% }
    .cn_33 { flex: 0 0 33.333333% }
    .cn_40 { flex: 0 0 40% }
    .cn_50 { flex: 0 0 50% }
    .cn_60 { flex: 0 0 60% }
    .cn_67 { flex: 0 0 66.666667% }
    .cn_70 { flex: 0 0 70% }
    .cn_75 { flex: 0 0 75% }
    .cn_80 { flex: 0 0 80% }
}