FR | EN
Install
Documentation

Documentation - Grid/Flexbox.

Discover Marssel: an intelligent, minimal configuration CSS framework designed for fast interfaces and a simplified developer experience.

Startup

Basic concepts

Utilities

Components

Grid/Flexbox

Marssel offers a flexible grid system based on CSS Grid and Flexbox to create responsive and adaptive layouts with containers, rows and columns.

Breakpoints

The container automatically adapts to the breakpoints: 

sm : max-width 540px
md : max-width 720px
lg : max-width 960px
xl : max-width 1140px
xxl : max-width 1320px

Row

The row creates a flex container for the columns: 

<div class="col-[container]">
    <div class="col-[row]">
        <!-- Colonnes ici -->
    </div>
</div>

Basic columns

Create columns with col-[n] (12 column system):

Preview
Column 12/12
Column 6/12
Column 6/12
Column 4/12
Column 4/12
Column 4/12
Col 3
Col 3
Col 3
Col 3
<div class="col-[container]">
    <div class="col-[row]">
        <div class="col-[12] bg-[f3f4f6] p-[20px]">
            Column 12/12
        </div>
    </div>
</div>

<div class="col-[container]">
    <div class="col-[row]">
        <div class="col-[6] bg-[eff6ff] p-[20px]">
            Column 6/12
        </div>
        <div class="col-[6] bg-[f0fdf4] p-[20px]">
            Column 6/12
        </div>
    </div>
</div>

<div class="col-[container]">
    <div class="col-[row]">
        <div class="col-[4] bg-[eff6ff] p-[20px]">
            Column 4/12
        </div>
        <div class="col-[4] bg-[f0fdf4] p-[20px]">
            Column 4/12
        </div>
        <div class="col-[4] bg-[fffbeb] p-[20px]">
            Column 4/12
        </div>
    </div>
</div>

<div class="col-[container]">
    <div class="col-[row]">
        <div class="col-[3] bg-[eff6ff] p-[20px]">Col 3</div>
        <div class="col-[3] bg-[f0fdf4] p-[20px]">Col 3</div>
        <div class="col-[3] bg-[fffbeb] p-[20px]">Col 3</div>
        <div class="col-[3] bg-[fef2f2] p-[20px]">Col 3</div>
    </div>
</div>

Asymmetrical columns

Create layouts with columns of different sizes:

Preview
Main column (8/12)
Sidebar (4/12)
Left (3/12)
Center (6/12)
Right (3/12)
Sidebar (4/12)
Content (8/12) 
<div class="col-[container]">
    <div class="col-[row]">
        <div class="col-[8] bg-[eff6ff] p-[20px]">
            Main column (8/12)
        </div>
        <div class="col-[4] bg-[f0fdf4] p-[20px]">
            Sidebar (4/12)
        </div>
    </div>
</div>

<div class="col-[container]">
    <div class="col-[row]">
        <div class="col-[3] bg-[eff6ff] p-[20px]">Left (3/12)</div>
        <div class="col-[6] bg-[f0fdf4] p-[20px]">Center (6/12)</div>
        <div class="col-[3] bg-[fffbeb] p-[20px]">Right (3/12)</div>
    </div>
</div>

<div class="col-[container]">
    <div class="col-[row]">
        <div class="col-[4] bg-[eff6ff] p-[20px]">
            Sidebar (4/12)
        </div>
        <div class="col-[8] bg-[f0fdf4] p-[20px]">
            Content (8/12)
        </div>
    </div>
</div>

Responsive columns

Adapt the columns according to the screen size:

Preview

Card 1

Adaptive content

Card 2

Adaptive content

Card 3

Adaptive content

Main content

Full width on mobile, 8/12 on desktop

Sidebar

Full width on mobile, 4/12 on desktop

<div class="col-[container]">
    <div class="col-[row]">
        <div class="col-[12] md--col-[6] lg--col-[4] bg-[eff6ff] p-[20px] mb-[20px]">
            <h4>Card 1</h4>
            <p>Adaptive content</p>
        </div>
        <div class="col-[12] md--col-[6] lg--col-[4] bg-[f0fdf4] p-[20px] mb-[20px]">
            <h4>Card 2</h4>
            <p>Adaptive content</p>
        </div>
        <div class="col-[12] md--col-[6] lg--col-[4] bg-[fffbeb] p-[20px] mb-[20px]">
            <h4>Card 3</h4>
            <p>Adaptive content</p>
        </div>
    </div>
</div>

<div class="col-[container]">
    <div class="col-[row]">
        <div class="col-[12] lg--col-[8] bg-[eff6ff] p-[20px]">
            <h4>Main content</h4>
            <p>Full width on mobile, 8/12 on desktop</p>
        </div>
        <div class="col-[12] lg--col-[4] bg-[f0fdf4] p-[20px]">
            <h4>Sidebar</h4>
            <p>Full width on mobile, 4/12 on desktop</p>
        </div>
    </div>
</div>

Auto column

Use col-[auto] for automatic width:

Preview
Auto width
Fixed column (6/12)
Auto width 
<div class="col-[container]">
    <div class="col-[row]">
        <div class="col-[auto] bg-[eff6ff] p-[20px]">
            Auto width
        </div>
        <div class="col-[6] bg-[f0fdf4] p-[20px]">
            Fixed column (6/12)
        </div>
        <div class="col-[auto] bg-[fffbeb] p-[20px]">
            Auto width
        </div>
    </div>
</div>

Gutter (spacing)

Control spacing between columns with gutter-:

Preview
Col 1
Col 2
Col 3
Col 1
Col 2
Row 1
Row 2
Col 1
Col 2
Col 3
<div class="col-[container]">
    <div class="col-[row] gutter-[20px]">
        <div class="col-[4] bg-[eff6ff] p-[20px]">Col 1</div>
        <div class="col-[4] bg-[f0fdf4] p-[20px]">Col 2</div>
        <div class="col-[4] bg-[fffbeb] p-[20px]">Col 3</div>
    </div>
</div>

<div class="col-[container]">
    <div class="col-[row] gutter-x-[30px]">
        <div class="col-[6] bg-[eff6ff] p-[20px]">Col 1</div>
        <div class="col-[6] bg-[f0fdf4] p-[20px]">Col 2</div>
    </div>
</div>

<div class="col-[container]">
    <div class="col-[row] gutter-y-[40px]">
        <div class="col-[12] bg-[eff6ff] p-[20px]">Row 1</div>
        <div class="col-[12] bg-[f0fdf4] p-[20px]">Row 2</div>
    </div>
</div>

<div class="col-[container]">
    <div class="col-[row] gutter-[10px] md--gutter-[20px] lg--gutter-[30px]">
        <div class="col-[4] bg-[eff6ff] p-[20px]">Col 1</div>
        <div class="col-[4] bg-[f0fdf4] p-[20px]">Col 2</div>
        <div class="col-[4] bg-[fffbeb] p-[20px]">Col 3</div>
    </div>
</div>

CSS Grid

Use CSS Grid for more advanced layouts:

Preview
Item 1
Item 2
Item 3
Item 4
Item 5
Item 6
Card 1
Card 2
Card 3
Card 4

Main content (2fr)

Sidebar (1fr)

Auto 1
Auto 2
Auto 3
Auto 4
<div class="d-[grid] grid-cols-[repeat(3,1fr)] gap-[20px]">
    <div class="bg-[eff6ff] p-[20px]">Item 1</div>
    <div class="bg-[f0fdf4] p-[20px]">Item 2</div>
    <div class="bg-[fffbeb] p-[20px]">Item 3</div>
    <div class="bg-[fef2f2] p-[20px]">Item 4</div>
    <div class="bg-[f5f3ff] p-[20px]">Item 5</div>
    <div class="bg-[fef9c3] p-[20px]">Item 6</div>
</div>

<div class="d-[grid] grid-cols-[1fr_1fr] md--grid-cols-[2fr_2fr] lg--grid-cols-[4fr_4fr] gap-[20px]">
    <div class="bg-[eff6ff] p-[20px]">Card 1</div>
    <div class="bg-[f0fdf4] p-[20px]">Card 2</div>
    <div class="bg-[fffbeb] p-[20px]">Card 3</div>
    <div class="bg-[fef2f2] p-[20px]">Card 4</div>
</div>

<div class="d-[grid] grid-cols-[2fr_1fr] gap-[20px]">
    <div class="bg-[eff6ff] p-[20px]">
        <h4>Main content (2fr)</h4>
    </div>
    <div class="bg-[f0fdf4] p-[20px]">
        <h4>Sidebar (1fr)</h4>
    </div>
</div>

<div class="d-[grid] grid-cols-[repeat(auto-fill,minmax(150px,4fr))] gap-[20px]">
    <div class="bg-[eff6ff] p-[20px]">Auto 1</div>
    <div class="bg-[f0fdf4] p-[20px]">Auto 2</div>
    <div class="bg-[fffbeb] p-[20px]">Auto 3</div>
    <div class="bg-[fef2f2] p-[20px]">Auto 4</div>
</div>

Flexbox

Use Flexbox for flexible layouts:

Preview
Item 1
Item 2
Item 3
Large (flex: 2)
Small (flex: 1)

Content-centered

LEFT
Center
RIGHT
Item 1
Item 2
Item 3
Item 4
Item 1
Item 2
Item 3
<div class="d-[flex] gap-[20px]">
    <div class="flex-[1] bg-[eff6ff] p-[20px]">Item 1</div>
    <div class="flex-[1] bg-[f0fdf4] p-[20px]">Item 2</div>
    <div class="flex-[1] bg-[fffbeb] p-[20px]">Item 3</div>
</div>

<div class="d-[flex] gap-[20px]">
    <div class="flex-[2] bg-[eff6ff] p-[20px]">Large (flex: 2)</div>
    <div class="flex-[1] bg-[f0fdf4] p-[20px]">Small (flex: 1)</div>
</div>

<div class="d-[flex] items-[center] justify-[center] h-[300px] bg-[f3f4f6]">
    <div class="bg-[ffffff] p-[40px] rounded-[8px] shadow-[0_2px_8px_rgba(0_0_0_0.1)]">
        <h4>Content-centered</h4>
    </div>
</div>

<div class="d-[flex] justify-[space-between] items-[center] p-[20px] bg-[f3f4f6]">
    <div>LEFT</div>
    <div>Center</div>
    <div>RIGHT</div>
</div>

<div class="d-[flex] flex-flow-[wrap] gap-[20px]">
    <div class="w-[calc[33%_-_14px]] bg-[eff6ff] p-[20px]">Item 1</div>
    <div class="w-[calc[33%_-_14px]] bg-[f0fdf4] p-[20px]">Item 2</div>
    <div class="w-[calc[33%_-_14px]] bg-[fffbeb] p-[20px]">Item 3</div>
    <div class="w-[calc[33%_-_14px]] bg-[fef2f2] p-[20px]">Item 4</div>
</div>

<div class="d-[flex] flex-direction-[column] gap-[20px]">
    <div class="bg-[eff6ff] p-[20px]">Item 1</div>
    <div class="bg-[f0fdf4] p-[20px]">Item 2</div>
    <div class="bg-[fffbeb] p-[20px]">Item 3</div>
</div>

Nested Grids

Nest grids for complex layouts:

Preview
Nested 1
Nested 2
Nested 3
Sidebar 
<div class="col-[container]">
    <div class="col-[row]">
        <div class="col-[12] lg--col-[8]">
            <div class="col-[row] gutter-[15px]">
                <div class="col-[6] bg-[eff6ff] p-[20px]">Nested 1</div>
                <div class="col-[6] bg-[f0fdf4] p-[20px]">Nested 2</div>
                <div class="col-[12] bg-[fffbeb] p-[20px]">Nested 3</div>
            </div>
        </div>
        <div class="col-[12] lg--col-[4] bg-[fef2f2] p-[20px]">
            Sidebar
        </div>
    </div>
</div>
← Previous Performance
Next → Spacing

Cookie settings

Choose the data you want to share.

🙏 Analytics help us prioritize the right features — data in Switzerland, never resold.

Essentials Required

Necessary for operation (session, security).