Grid

Options

Classe Elément Niveau Description
.grid <div> Parent Créer une grille dont les enfants sont répartis sur une seule ligne.
.grid[1-12] <div> Parent Créer une grille et dimensionner les enfants de 1/12 à 12/12.
.grid[1-12][XS, S, M, L, XL] <div> Parent Changer la dimension des enfants suivant la résolution de l'écran.
.col[1-12] <div> Enfant Dimensionner spéciquement un enfant d'une grille.
.col[1-12][XS, S, M, L, XL] <div> Enfant Changer la dimension d'un enfant suivant la résolution de l'écran.
.colMin <div> Enfant Réduit la dimension de l'élément au maximum. Fonctionne uniquement avec .grid.
.gutter
.gutter[L, XL, XXL]
<div> Parent Créer un espace entre les enfants d'une grille.
.flexStart
.flexCenter
.flexEnd
.flexAround
.flexBetween
<div> Parent Gérer l'alignement horizontal des enfants.
.flexTop
.flexMiddle
.flexBottom
<div> Parent Gérer l'alignement vertical des enfants.

Complémentarités intéressantes

Classe Elément Description
.card
.childCard
<div> Une carte peut-être appliquée directement aux enfants d'une grille.
.child{ColorName}
.childBg{ColorName}
<div> Appliquer un style à tous les enfants d'un grille.

Exemples

Exemple 1

Colonne 1

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed vehicula augue eget erat lobortis efficitur.

Colonne 2

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed vehicula augue eget erat lobortis efficitur.

<div class="grid6 gutter">
    <div>
        <p class="p4">Colonne 1</p>
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed vehicula augue eget erat lobortis efficitur.</p>
    </div>
    <div>
        <p class="p4">Colonne 2</p>
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed vehicula augue eget erat lobortis efficitur.</p>
    </div>
</div>

Exemple 2

Colonne 1

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed vehicula augue eget erat lobortis efficitur.

Colonne 2

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed vehicula augue eget erat lobortis efficitur.

<div class="grid6 childCard">
    <div class="bgRed light">
        <p class="p4">Colonne 1</p>
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed vehicula augue eget erat lobortis efficitur.</p>
    </div>
    <div class="bgGreen light">
        <p class="p4">Colonne 2</p>
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed vehicula augue eget erat lobortis efficitur.</p>
    </div>
</div>

Exemple 3

Lorem ipsum dolor sit amet.

Lorem ipsum dolor sit amet, consectetur adipiscing elit.

Lorem ipsum .

<div class="grid gutter center childCard childBgColor1 childLight">
    <div><p>Lorem ipsum dolor sit amet.</p></div>
    <div><p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p></div>
    <div><p>Lorem ipsum .</p></div>
</div>

Exemple 4

1

2

3

4

5

6

<div class="grid4 gutterL center childCard childBgColor1 childLight">
    <div><p>1</p></div>
    <div><p>2</p></div>
    <div><p>3</p></div>
    <div><p>4</p></div>
    <div><p>5</p></div>
    <div><p>6</p></div>
</div>

Exemple 5

1

2

3 (col2)

4 (col2)

5 (col8)

6 (col4)

<div class="grid4 gutter center childCard childBgColor1 childLight">
    <div><p>1</p></div>
    <div><p>2</p></div>
    <div class="col2"><p>3 (col2)</p></div>
    <div class="col2"><p>4 (col2)</p></div>
    <div class="col8"><p>5 (col8)</p></div>
    <div class="col4"><p>6 (col4)</p></div>
</div>

Exemple 6

1 (colMin)

2

3

<div class="grid gutter center childCard childBgColor1 childLight">
    <div class="colMin"><p>1 (colMin)</p></div>
    <div><p>2</p></div>
    <div><p>3</p></div>
</div>

Exemple 7

1

2

3

4

5

6

1

2

3

4

5

6

<div class="grid4 grid6M grid12S gutterXXL center childCard childBgColor1 childLight">
    <div><p>1</p></div>
    <div><p>2</p></div>
    <div><p>3</p></div>
    <div><p>4</p></div>
    <div><p>5</p></div>
    <div><p>6</p></div>
</div>
<div class="grid gutter center childCard childBgColor1 childLight">
    <div class="col4 col6M col12S"><p>1</p></div>
    <div class="col2 col6M col12S"><p>2</p></div>
    <div class="col6"><p>3</p></div>
    <div class="col4 col6M col12S"><p>4</p></div>
    <div class="col4 col12M"><p>5</p></div>
    <div class="col4 col12M"><p>6</p></div>
</div>

Exemple 8

1

2

3

<div class="grid2 gutter flexAround center childCard childBgColor1 childLight">
    <div><p>1</p></div>
    <div><p>2</p></div>
    <div><p>3</p></div>
</div>

Exemple 9

1

2

3

<div class="grid4 gutter flexBottom center childCard childBgColor1 childLight">
    <div style="height: 100px"><p>1</p></div>
    <div style="height: 50px"><p>2</p></div>
    <div style="height: 150px"><p>3</p></div>
</div>