Blocks - MaxSite Plus

grids-flex1

<div class="flex bordered bg-primary50 dark:bg-primary800">
    <div class="pad10 bordered bg-primary100 dark:bg-primary700">Cell</div>
    <div class="pad10 bordered bg-primary100 dark:bg-primary700">Cell</div>
    <div class="pad10 bordered bg-primary100 dark:bg-primary700">Cell</div>
    <div class="pad10 bordered bg-primary100 dark:bg-primary700">Cell</div>
    <div class="pad10 bordered bg-primary100 dark:bg-primary700">Cell</div>
</div>

<br>

<div class="b-flex bordered bg-primary50 dark:bg-primary800">
    <div class="pad10 bordered bg-primary100 dark:bg-primary700">Cell</div>
    <div class="pad10 bordered bg-primary100 dark:bg-primary700">Cell</div>
    <div class="pad10 bordered bg-primary100 dark:bg-primary700">Cell</div>
    <div class="pad10 bordered bg-primary100 dark:bg-primary700">Cell</div>
    <div class="pad10 bordered bg-primary100 dark:bg-primary700">Cell</div>
</div>

grids-flex2

<div class="flex bordered bg-primary50 dark:bg-primary800">
    <div class="w10 pad10 bordered bg-primary100 dark:bg-primary700">10%</div>
    <div class="w20 pad10 bordered bg-primary100 dark:bg-primary700">20%</div>
    <div class="w30 pad10 bordered bg-primary100 dark:bg-primary700">30%</div>
    <div class="w40 pad10 bordered bg-primary100 dark:bg-primary700">40%</div>
</div>

<br>

<div class="flex flex-wrap bordered bg-primary50 dark:bg-primary800">
    <div class="w10 pad10 bordered bg-primary100 dark:bg-primary700">10%</div>
    <div class="w20 pad10 bordered bg-primary100 dark:bg-primary700">20%</div>
    <div class="w30 pad10 bordered bg-primary100 dark:bg-primary700">30%</div>
    <div class="w40 pad10 bordered bg-primary100 dark:bg-primary700">40%</div>
    
    <div class="w40 pad10 bordered bg-primary100 dark:bg-primary700">40%</div>
    <div class="w30 pad10 bordered bg-primary100 dark:bg-primary700">30%</div>
    <div class="w20 pad10 bordered bg-primary100 dark:bg-primary700">20%</div>
    <div class="w10 pad10 bordered bg-primary100 dark:bg-primary700">10%</div>
</div>

grids-flex3

<div class="flex flex-wrap bordered bg-primary50 dark:bg-primary800">
    <div class="w1col  pad10 bordered bg-primary100 dark:bg-primary700">1/12</div>
    <div class="w2col  pad10 bordered bg-primary100 dark:bg-primary700">2/12</div>
    <div class="w3col  pad10 bordered bg-primary100 dark:bg-primary700">3/12</div>
    <div class="w4col  pad10 bordered bg-primary100 dark:bg-primary700">4/12</div>
    <div class="w5col  pad10 bordered bg-primary100 dark:bg-primary700">5/12</div>
    <div class="w6col  pad10 bordered bg-primary100 dark:bg-primary700">6/12</div>
    <div class="w7col  pad10 bordered bg-primary100 dark:bg-primary700">7/12</div>
    <div class="w8col  pad10 bordered bg-primary100 dark:bg-primary700">8/12</div>
    <div class="w9col  pad10 bordered bg-primary100 dark:bg-primary700">9/12</div>
    <div class="w10col pad10 bordered bg-primary100 dark:bg-primary700">10/12</div>
    <div class="w11col pad10 bordered bg-primary100 dark:bg-primary700">11/12</div>
    <div class="w12col pad10 bordered bg-primary100 dark:bg-primary700">12/12</div>
</div>

grids-flex4

<div class="flex flex-wrap-tablet bordered bg-primary50 dark:bg-primary800">
    <div class="w1col  pad10 bordered bg-primary100 dark:bg-primary700">1/12</div>
    <div class="w2col  pad10 bordered bg-primary100 dark:bg-primary700">2/12</div>
    <div class="w3col  pad10 bordered bg-primary100 dark:bg-primary700">3/12</div>
    <div class="w4col  pad10 bordered bg-primary100 dark:bg-primary700">4/12</div>
    <div class="w5col  pad10 bordered bg-primary100 dark:bg-primary700">5/12</div>
    <div class="w6col  pad10 bordered bg-primary100 dark:bg-primary700">6/12</div>
    <div class="w7col  pad10 bordered bg-primary100 dark:bg-primary700">7/12</div>
    <div class="w8col  pad10 bordered bg-primary100 dark:bg-primary700">8/12</div>
    <div class="w9col  pad10 bordered bg-primary100 dark:bg-primary700">9/12</div>
    <div class="w10col pad10 bordered bg-primary100 dark:bg-primary700">10/12</div>
    <div class="w11col pad10 bordered bg-primary100 dark:bg-primary700">11/12</div>
    <div class="w12col pad10 bordered bg-primary100 dark:bg-primary700">12/12</div>
</div>

grids-flex5

<div class="flex flex-wrap-tablet bordered bg-primary50 dark:bg-primary800">
    <div class="w25 w100-tablet pad10 bordered bg-primary100 dark:bg-primary700">25% . 100%</div>
    <div class="w25 w100-tablet pad10 bordered bg-primary100 dark:bg-primary700">25% . 100%</div>
    <div class="w25 w100-tablet pad10 bordered bg-primary100 dark:bg-primary700">25% . 100%</div>
    <div class="w25 w100-tablet pad10 bordered bg-primary100 dark:bg-primary700">25% . 100%</div>
</div>

grids-flex6

<div class="flex flex-wrap-tablet bordered bg-primary50 dark:bg-primary800">
    <div class="w25 w50-tablet pad10 bordered bg-primary100 dark:bg-primary700">25% . 50%</div>
    <div class="w25 w50-tablet pad10 bordered bg-primary100 dark:bg-primary700">25% . 50%</div>
    <div class="w25 w50-tablet pad10 bordered bg-primary100 dark:bg-primary700">25% . 50%</div>
    <div class="w25 w50-tablet pad10 bordered bg-primary100 dark:bg-primary700">25% . 50%</div>
</div>

grids-flex7

<div class="flex flex-wrap gap30" style="--flex-basis: 200px">
    <div class="flex-grow1 flex-basis-var w100-tablet pad10 bordered bg-primary100 dark:bg-primary700">1</div>
    <div class="flex-grow1 flex-basis-var w100-tablet pad10 bordered bg-primary100 dark:bg-primary700">2</div>
    <div class="flex-grow1 flex-basis-var w100-tablet pad10 bordered bg-primary100 dark:bg-primary700">3</div>
    <div class="flex-grow1 flex-basis-var w100-tablet pad10 bordered bg-primary100 dark:bg-primary700">4</div>
</div>

Grids-flex