GusCSS - Documentation de la Grille

Conteneur Centré

Colonne 1
Colonne 2
Colonne 3

Exemple de Code

<div class="row">
    <div class="col-md-4 col-lg-3">Colonne 1</div>
    <div class="col-md-4 col-lg-6">Colonne 2</div>
    <div class="col-md-4 col-lg-3">Colonne 3</div>
</div>

Conteneur Fluid

Colonne 1
Colonne 2

Exemple de Code

<div class="row">
    <div class="col-sm-6 col-md-4">Colonne 1</div>
    <div class="col-sm-6 col-md-8">Colonne 2</div>
</div>

Colonnes Empilées sur Mobile

Colonne 1
Colonne 2
Colonne 3
Colonne 4
Colonne 5
Colonne 6

Exemple de Code

<div class="row">
    <div class="col-6 col-md-4">Colonne 1</div>
    <div class="col-6 col-md-4">Colonne 2</div>
    <div class="col-6 col-md-4">Colonne 3</div>
    <div class="col-6 col-md-4">Colonne 4</div>
    <div class="col-6 col-md-4">Colonne 5</div>
    <div class="col-6 col-md-4">Colonne 6</div>
</div>

Colonnes de Largeur Variable

Colonne 1
Colonne 2
Colonne 3

Exemple de Code

<div class="row">
    <div class="col-lg-2">Colonne 1</div>
    <div class="col-lg-4">Colonne 2</div>
    <div class="col-lg-6">Colonne 3</div>
</div>

Toutes les Colonnes

1
1
1
1
1
1
1
1
1
1
1
1

Exemple de Code

<div class="row">
    <div class="col-1">1</div>
    <div class="col-1">1</div>
    <div class="col-1">1</div>
    <div class="col-1">1</div>
    <div class="col-1">1</div>
    <div class="col-1">1</div>
    <div class="col-1">1</div>
    <div class="col-1">1</div>
    <div class="col-1">1</div>
    <div class="col-1">1</div>
    <div class="col-1">1</div>
    <div class="col-1">1</div>
</div>

Colonnes Spécifiques à Chaque Breakpoint

Colonne Responsive

Exemple de Code

<div class="row">
    <div class="col-sm-4 col-md-6 col-lg-8">Colonne Responsive</div>
</div>