FR | EN
Installer
Documentation

Documentation - Grid / Flexbox.

Découvrez Marssel : un framework CSS intelligent, configuration minimale, conçu pour des interfaces rapides et une expérience développeur simplifiée.

Démarrage

Concepts de base

Utilitaires

Composants

Grid / Flexbox

Marssel propose un système de grille flexible basé sur CSS Grid et Flexbox pour créer des layouts responsive et adaptatifs avec containers, rows et colonnes.

Breakpoints

Le container s'adapte automatiquement aux breakpoints : 

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

Row

La row crée un conteneur flex pour les colonnes : 

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

Colonnes basiques

Créez des colonnes avec col-[n] (système sur 12 colonnes) :

Aperçu
Colonne 12/12
Colonne 6/12
Colonne 6/12
Colonne 4/12
Colonne 4/12
Colonne 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]">
            Colonne 12/12
        </div>
    </div>
</div>

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

<div class="col-[container]">
    <div class="col-[row]">
        <div class="col-[4] bg-[eff6ff] p-[20px]">
            Colonne 4/12
        </div>
        <div class="col-[4] bg-[f0fdf4] p-[20px]">
            Colonne 4/12
        </div>
        <div class="col-[4] bg-[fffbeb] p-[20px]">
            Colonne 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>

Colonnes asymétriques

Créez des layouts avec colonnes de tailles différentes :

Aperçu
Colonne principale (8/12)
Sidebar (4/12)
Left (3/12)
Center (6/12)
Right (3/12)
Sidebar (4/12)
Contenu (8/12) 
<div class="col-[container]">
    <div class="col-[row]">
        <div class="col-[8] bg-[eff6ff] p-[20px]">
            Colonne principale (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]">
            Contenu (8/12)
        </div>
    </div>
</div>

Colonnes responsive

Adaptez les colonnes selon la taille d'écran :

Aperçu

Card 1

Contenu adaptatif

Card 2

Contenu adaptatif

Card 3

Contenu adaptatif

Contenu principal

Pleine largeur sur mobile, 8/12 sur desktop

Sidebar

Pleine largeur sur mobile, 4/12 sur 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>Contenu adaptatif</p>
        </div>
        <div class="col-[12] md--col-[6] lg--col-[4] bg-[f0fdf4] p-[20px] mb-[20px]">
            <h4>Card 2</h4>
            <p>Contenu adaptatif</p>
        </div>
        <div class="col-[12] md--col-[6] lg--col-[4] bg-[fffbeb] p-[20px] mb-[20px]">
            <h4>Card 3</h4>
            <p>Contenu adaptatif</p>
        </div>
    </div>
</div>

<div class="col-[container]">
    <div class="col-[row]">
        <div class="col-[12] lg--col-[8] bg-[eff6ff] p-[20px]">
            <h4>Contenu principal</h4>
            <p>Pleine largeur sur mobile, 8/12 sur desktop</p>
        </div>
        <div class="col-[12] lg--col-[4] bg-[f0fdf4] p-[20px]">
            <h4>Sidebar</h4>
            <p>Pleine largeur sur mobile, 4/12 sur desktop</p>
        </div>
    </div>
</div>

Colonne auto

Utilisez col-[auto] pour une largeur automatique :

Aperçu
Largeur automatique
Colonne fixe (6/12)
Largeur automatique 
<div class="col-[container]">
    <div class="col-[row]">
        <div class="col-[auto] bg-[eff6ff] p-[20px]">
            Largeur automatique
        </div>
        <div class="col-[6] bg-[f0fdf4] p-[20px]">
            Colonne fixe (6/12)
        </div>
        <div class="col-[auto] bg-[fffbeb] p-[20px]">
            Largeur automatique
        </div>
    </div>
</div>

Gutter (espacement)

Contrôlez l'espacement entre les colonnes avec gutter- :

Aperçu
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

Utilisez CSS Grid pour des layouts plus avancés :

Aperçu
Item 1
Item 2
Item 3
Item 4
Item 5
Item 6
Card 1
Card 2
Card 3
Card 4

Contenu principal (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>Contenu principal (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

Utilisez Flexbox pour des layouts flexibles :

Aperçu
Item 1
Item 2
Item 3
Large (flex: 2)
Small (flex: 1)

Contenu centré

Gauche
Centre
Droite
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>Contenu centré</h4>
    </div>
</div>

<div class="d-[flex] justify-[space-between] items-[center] p-[20px] bg-[f3f4f6]">
    <div>Gauche</div>
    <div>Centre</div>
    <div>Droite</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>

Grilles imbriquées

Imbriquez des grilles pour des layouts complexes :

Aperçu
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>
← Précédent Performance
Suivant → Espacement

Réglages des cookies

Choisissez les données que vous souhaitez partager.

🙏 Les analytics nous aident à prioriser les bonnes fonctionnalités — données en Suisse, jamais revendues.

Essentiels Requis

Nécessaires au fonctionnement (session, sécurité).