Blocks - MaxSite Plus

grids-grid1

<div class="grid-5col grid-2col-tablet bordered bg-primary50 dark:bg-primary800">
    <div class="pad10 bordered bg-primary100 dark:bg-primary700">1</div>
    <div class="pad10 bordered bg-primary100 dark:bg-primary700">2</div>
    <div class="pad10 bordered bg-primary100 dark:bg-primary700">3</div>
    <div class="pad10 bordered bg-primary100 dark:bg-primary700">4</div>
    <div class="pad10 bordered bg-primary100 dark:bg-primary700">5</div>
</div>

grids-grid2

c<div class="grid-5col grid-2col-tablet gap20 bordered bg-primary50 dark:bg-primary800">
    <div class="pad10 bordered bg-primary100 dark:bg-primary700">1</div>
    <div class="pad10 bordered bg-primary100 dark:bg-primary700">2</div>
    <div class="pad10 bordered bg-primary100 dark:bg-primary700">3</div>
    <div class="pad10 bordered bg-primary100 dark:bg-primary700">4</div>
    <div class="pad10 bordered bg-primary100 dark:bg-primary700">5</div>
</div>

grids-grid3

c<div class="grid-5col grid-2col-tablet column-gap5 row-gap20 bordered bg-primary50 dark:bg-primary800">
    <div class="pad10 bordered bg-primary100 dark:bg-primary700">1</div>
    <div class="pad10 bordered bg-primary100 dark:bg-primary700">2</div>
    <div class="pad10 bordered bg-primary100 dark:bg-primary700">3</div>
    <div class="pad10 bordered bg-primary100 dark:bg-primary700">4</div>
    <div class="pad10 bordered bg-primary100 dark:bg-primary700">5</div>
</div>

grids-grid4

<div class="grid-var grid-var-tablet gap10 bordered bg-primary50 dark:bg-primary800" style="--grid-columns: auto auto auto auto; --grid-columns-tablet: auto auto;">
    <div class="pad10 bordered bg-primary100 dark:bg-primary700">1</div>
    <div class="pad10 bordered bg-primary100 dark:bg-primary700">2</div>
    <div class="pad10 bordered bg-primary100 dark:bg-primary700">3</div>
    <div class="pad10 bordered bg-primary100 dark:bg-primary700">4</div>
    <div class="pad10 bordered bg-primary100 dark:bg-primary700">5</div>
</div>

grids-grid5

<div class="grid-6col grid-2col-tablet gap10 bordered bg-primary50 dark:bg-primary800">
    <div class="pad10 bordered bg-primary100 dark:bg-primary700">1</div>
    <div class="pad10 bordered bg-primary100 dark:bg-primary700">2</div>
    <div class="pad10 bordered bg-primary100 dark:bg-primary700">3</div>
    <div class="pad10 bordered bg-primary100 dark:bg-primary700">4</div>
    <div class="pad10 bordered bg-primary100 dark:bg-primary700">5</div>
    <div class="pad10 bordered bg-primary100 dark:bg-primary700">6</div>
    <div class="pad10 bordered bg-primary100 dark:bg-primary700">7</div>
    <div class="pad10 bordered bg-primary100 dark:bg-primary700">8</div>
</div>

grids-grid6

<div class="grid-var grid-var-tablet gap10 bordered bg-primary50 dark:bg-primary800" style="--grid-columns: 1fr 2fr 4fr; --grid-rows: 40px 80px; --grid-columns-tablet: auto auto; --grid-row-tablet: 1/4;">
    <div class="pad10 bordered bg-primary100 dark:bg-primary700">1</div>
    <div class="pad10 bordered bg-primary100 dark:bg-primary700">2</div>
    <div class="pad10 bordered bg-primary100 dark:bg-primary700">3</div>
    <div class="pad10 bordered bg-primary100 dark:bg-primary700">4</div>
    <div class="pad10 bordered bg-primary100 dark:bg-primary700">5</div>
    <div class="pad10 bordered bg-primary100 dark:bg-primary700">6</div>
    <div class="pad10 bordered bg-primary100 dark:bg-primary700">7</div>
    <div class="pad10 bordered bg-primary100 dark:bg-primary700">8</div>
</div>

grids-grid7

<div class="grid-var grid-var-tablet bordered bg-primary50 dark:bg-primary800" style="--grid-gap: 20px 10px; --grid-columns: auto auto auto; --grid-columns-tablet: auto;">
    <div class="grid-item-var grid-item-var-tablet pad10 bordered bg-primary100 dark:bg-primary700" style="--grid-item-column: 1/3; --grid-item-row: 1/3; --grid-item-column-tablet: 1/4; --grid-item-row-tablet: 1/2">1</div>
    <div class="pad10 bordered bg-primary100 dark:bg-primary700">2</div>
    <div class="pad10 bordered bg-primary100 dark:bg-primary700">3</div>
    <div class="pad10 bordered bg-primary100 dark:bg-primary700">4</div>
    <div class="grid-item-var grid-item-var-tablet pad10 bordered bg-primary100 dark:bg-primary700" style="--grid-item-column: 2/4; --grid-item-row: 3/4; --grid-item-column-tablet: 1/4; --grid-item-row-tablet: 3/4">5</div>
</div>

grids-grid8

<div class="grid-3col grid-1col-tablet gap10 bordered bg-primary50 dark:bg-primary800">
    <div class="grid-item-var pad10 bordered bg-primary100 dark:bg-primary700" style="--grid-item-row: 1/3;">1</div>
    <div class="pad10 bordered bg-primary100 dark:bg-primary700">2</div>
    <div class="pad10 bordered bg-primary100 dark:bg-primary700">3</div>
    <div class="pad10 bordered bg-primary100 dark:bg-primary700">4</div>
    <div class="pad10 bordered bg-primary100 dark:bg-primary700">5</div>
</div>

grids-grid9

<div class="grid-3col grid-1col-tablet gap10 bordered bg-primary50 dark:bg-primary800">
    <div class="grid-item-var pad10 bordered bg-primary100 dark:bg-primary700" style="--grid-item-row: 1/4;">1</div>
    <div class="pad10 bordered bg-primary100 dark:bg-primary700">2</div>
    <div class="pad10 bordered bg-primary100 dark:bg-primary700">3</div>
    <div class="pad10 bordered bg-primary100 dark:bg-primary700">4</div>
    <div class="pad10 bordered bg-primary100 dark:bg-primary700">5</div>
    <div class="pad10 bordered bg-primary100 dark:bg-primary700">6</div>
    <div class="pad10 bordered bg-primary100 dark:bg-primary700">7</div>
</div>

grids-grid10

<div class="grid-2col grid-1col-tablet gap10 bordered bg-primary50 dark:bg-primary800">
    <div class="grid-item-var pad10 bordered bg-primary100 dark:bg-primary700" style="--grid-item-row: 1/7;">1</div>
    <div class="pad10 bordered bg-primary100 dark:bg-primary700">2</div>
    <div class="pad10 bordered bg-primary100 dark:bg-primary700">3</div>
    <div class="pad10 bordered bg-primary100 dark:bg-primary700">4</div>
    <div class="pad10 bordered bg-primary100 dark:bg-primary700">5</div>
    <div class="pad10 bordered bg-primary100 dark:bg-primary700">6</div>
    <div class="pad10 bordered bg-primary100 dark:bg-primary700">7</div>
</div>

grids-grid11

<div class="grid-3col grid-1col-tablet gap10 bordered bg-primary50 dark:bg-primary800" style="--grid-columns: 2fr 1fr 1fr;">
    <div class="grid-item-var pad10 bordered bg-primary100 dark:bg-primary700" style="--grid-item-row: 1/3;">1</div>
    <div class="pad10 bordered bg-primary100 dark:bg-primary700">2</div>
    <div class="pad10 bordered bg-primary100 dark:bg-primary700">3</div>
    <div class="pad10 bordered bg-primary100 dark:bg-primary700">4</div>
    <div class="pad10 bordered bg-primary100 dark:bg-primary700">5</div>
</div>

grids-grid12

<div class="grid-3col grid-1col-tablet gap10 bordered bg-primary50 dark:bg-primary800">
    <div class="pad10 bordered bg-primary100 dark:bg-primary700">1</div>
    <div class="pad10 bordered bg-primary100 dark:bg-primary700">2</div>
    <div class="pad10 bordered bg-primary100 dark:bg-primary700">3</div>
    <div class="grid-item-var grid-item-var-tablet pad10 bordered bg-primary100 dark:bg-primary700" style="--grid-item-column: 1/4; --grid-item-column-tablet: 1/1;">4</div>
</div>

grids-grid13

<div class="grid-3col grid-1col-tablet gap10 bordered bg-primary50 dark:bg-primary800">
    <div class="grid-item-var grid-item-var-tablet pad10 bordered bg-primary100 dark:bg-primary700" style="--grid-item-row: 1/1;">1</div>
    <div class="grid-item-var grid-item-var-tablet pad10 bordered bg-primary100 dark:bg-primary700" style="--grid-item-row: 2/2;">2</div>
    <div class="grid-item-var grid-item-var-tablet pad10 bordered bg-primary100 dark:bg-primary700" style="--grid-item-row: 3/3;">3</div>
    <div class="grid-item-var grid-item-var-tablet pad10 bordered bg-primary100 dark:bg-primary700" style="--grid-item-row: 4/4;">4</div>
    <div class="pad10 bordered bg-primary100 dark:bg-primary700">5</div>
    <div class="pad10 bordered bg-primary100 dark:bg-primary700">6</div>
    <div class="pad10 bordered bg-primary100 dark:bg-primary700">7</div>
    <div class="pad10 bordered bg-primary100 dark:bg-primary700">8</div>
    <div class="grid-item-var grid-item-var-tablet pad10 bordered bg-primary100 dark:bg-primary700" style="--grid-item-column: 2/4;">9</div>
    <div class="grid-item-var grid-item-var-tablet pad10 bordered bg-primary100 dark:bg-primary700" style="--grid-item-column: 2/4;">10</div>
</div>

grids-grid14

<div class="grid-3col grid-1col-tablet gap10 bordered bg-primary50 dark:bg-primary800" style="--grid-columns: 1fr 1fr 1fr">
    <div class="grid-item-var grid-item-var-tablet pad10 bordered bg-primary100 dark:bg-primary700" style="--grid-item-row: 1/3;">1</div>
    <div class="grid-item-var grid-item-var-tablet pad10 bordered bg-primary100 dark:bg-primary700" style="--grid-item-column: 2/4;">2</div>
    <div class="pad10 bordered bg-primary100 dark:bg-primary700">3</div>
    <div class="pad10 bordered bg-primary100 dark:bg-primary700">4</div>
</div>

grids-grid15

<div class="grid-2col grid-1col-tablet gap10 bordered bg-primary50 dark:bg-primary800">
    <div class="pad10 bordered bg-primary100 dark:bg-primary700">1</div>
    <div class="pad10 bordered bg-primary100 dark:bg-primary700">2</div>
    <div class="grid-item-var grid-item-var-tablet pad10 bordered bg-primary100 dark:bg-primary700" style="--grid-item-column: 1/3;">3</div>
</div>

grids-grid16

<div class="grid-2col grid-1col-tablet gap10 bordered bg-primary50 dark:bg-primary800">
    <div class="pad10 bordered bg-primary100 dark:bg-primary700">1</div>
    <div class="pad10 bordered bg-primary100 dark:bg-primary700">2</div>
    <div class="pad10 bordered bg-primary100 dark:bg-primary700">3</div>
    <div class="pad10 bordered bg-primary100 dark:bg-primary700">4</div>
    <div class="grid-item-var grid-item-var-tablet pad10 bordered bg-primary100 dark:bg-primary700" style="--grid-item-column: 1/3;">5</div>
</div>

grids-grid17

<div class="grid-3col grid-1col-tablet gap10 bordered bg-primary50 dark:bg-primary800">
    <div class="grid-area grid-area-tablet pad10 bordered bg-primary100 dark:bg-primary700" style="--grid-area: 1/1;">1</div>
    <div class="grid-area grid-area-tablet pad10 bordered bg-primary100 dark:bg-primary700" style="--grid-area: 2/1;">2</div>
    <div class="grid-area grid-area-tablet pad10 bordered bg-primary100 dark:bg-primary700" style="--grid-area: 3/1;">3</div>
    
    <div class="grid-area grid-area-tablet pad10 bordered bg-primary150 dark:bg-primary700 order-last-tablet" style="--grid-area: 1/2/span 3;">4</div>
    
    <div class="grid-area grid-area-tablet pad10 bordered bg-primary100 dark:bg-primary700" style="--grid-area: 1/3;">5</div>
    <div class="grid-area grid-area-tablet pad10 bordered bg-primary100 dark:bg-primary700" style="--grid-area: 2/3;">6</div>
    <div class="grid-area grid-area-tablet pad10 bordered bg-primary100 dark:bg-primary700" style="--grid-area: 3/3;">7</div>
</div>

Grids-grid