Grids / Grilles

Les grilles sont des armatures qui permettent d’organiser le contenu dans des pages. On peut ainsi positionner les éléments sur un colonage de taille variable en fonction de la taille de la zone d’affichage.

Les grilles, comme tout élément des fondations, ne sont pas un composant en tant que tel, elles font partie du « core », c’est à dire des éléments obligatoires.

Usage

La grille est une aide autant pour le concepteur que pour l’utilisateur. Pour le concepteur cela permet d’avoir une méthode simplifiée de placement du contenu (et ce, de façon responsive) et pour l’utilisateur cela permet d’avoir un affichage harmonisé, quel que soit son appareil de consultation. On obtient alors des pages plus lisibles et variées tout en assurant une cohérence générale.

Une grille est constituée de colonnes, séparées par des gouttières, ainsi que d’un conteneur et des marges encadrant celui-ci à gauche et à droite.

Colonnes

Sur mobile, la grille comporte 6 colonnes.
À partir 768px, la grille contient 24 colonnes.
La largeur des colonnes varie en fonction de la taille d’écran.

Gouttières

Les gouttières sont les espaces entre les colonnes.
Ces espaces vides segmentent l’information et permettent la circulation des blancs et donc la respiration de la page.
Leur largeur est fixe : 20px.

Conteneur

Sur mobile, le conteneur a une largeur variable égale à la zone d’affichage.
À partir 768px, le conteneur à une largeur fixe dépendante de la zone d’affichage.

Marges

La grille dispose de marges latérales entre le conteneur et les bords gauche et droit de la zone d’affichage. L’objectif est que l’œil puisse bénéficier d’un confort de lecture en ne "tapant" pas contre les bords de la fenêtre du navigateur sur petit écran et en n’ayant pas des zones de contenu trop larges sur grand écran.

Référentiel

Les tailles d’écran sont définies par les points de rupture.

Taille de l’écran	320 à 359px	360 à 767px	768 à 979px	980 à 1279px	À partir de 1280px
Référence de taille	xs	sm	md	lg	xl
Nombre de colonnes	6	6	24	24	24
Largeur des colonnes	30 à ±36px	±33 à ±101px	±10px	20px	±33px
Gouttières	20px	20px	20px	20px	20px
Largeur du container	280 à 319px	300 à 707px	708px	940px	1260px
Taille de la marge externe	20px	30px	30px plus fond perdu	10px plus fond perdu	10px plus fond perdu

En italique : valeurs fluides

grille 768px — Écran tablette portrait : 768px

grille 980px — Écran tablette paysage : 980px

Style & code

Dépendances :

Classe sipaui sur un parent (par exemple le <body>),
Classes d’aide.

D’un point de vue technique, la grille s'appuie sur le modèle Flexbox, avec l’attribut column-gap.

Puisque la grille SipaUI est en `flex` elle n’est pas compatible avec Masonry.

Le conteneur de page

Le conteneur ne fait pas partie à proprement parler de la grille. Il sert à déterminer la largeur que prend la grille principale de la page (celle de premier niveau). Si vous avez besoin d’insérer une grille dans un sous-niveau, il n’y aura plus besoin de conteneur. Exemple de grille multiniveau : Page / conteneur / grille n1 / grille n2…

N. B. – Cette classe peut être placée au même niveau que la classe .sipaui si besoin.

Il utilise la classe su-container.

<style>
.demo-grille .su-container {
    background: #8da886;
}
.demo-grille .contenu {
    background: #edaeac;
}
</style>
<div class="demo-grille">
    <p class="su-margin-bottom-m">
        En vert, le conteneur avec son padding, et en rose, le contenu. 
    </p>
    <div class="su-container">
        <p class="contenu">
            Contenu
        </p>
    </div>
</div>

La grille standard

Exemple de la grille standard de 6 colonnes sur petits écrans et 24 sur grand (les colonnes supérieures à 6 sont masquées sur les petits écrans à l’aide des classes su-hidden-xs et su-hidden-sm des classes d’aide).

Pour construire cette grille, il faut d’abord un rang avec la classe su-row. Ce rang contient les blocs devant s'afficher en colonne. Chaque bloc prend par défaut toute la largeur du rang. Pour en faire des colonnes et leur donner une largeur spécifique, il faut leur donner des classes indiquant à partir de quel point de rupture ils deviennent une colonne et quelle largeur doit faire cette colonne. Les points de rupture sont bien sûr déclarés en xs, sm, md, lg et xl, et les largeurs en nombre de colonnes de la grille. La construction de la classe se fait donc ainsi : su-col+-point de rupture+-nombre de colonnes (exemple : su-col-md-3).

Ainsi :

su-col-xs-3 signifie que le bloc, à partir de la taille d’écran xs et au-dessus, fera la moitié de la largeur du rang (3 colonnes sur les 6 utilisées sur petit écran).
su-col-md-18 signifie que le bloc, à partir de la taille d’écran md et au-dessus, fera les 3/4 de la largeur du rang (18 colonnes sur les 24 utilisées sur grand écran).

N. B. – Il est important que la somme des -nombre de colonnes sur un rang ne soit pas supérieure à 6 sur petit écran (xs et sm) et 24 sur grand (md, lg et xl). Dans le cas contraire, les derniers blocs iront à la ligne.

N. B. 2 : la classe .su-row peut être placée au même niveau que la classe .sipaui si besoin.

<style>
.demo-grille [class*="su-col-"] {
    background: #edaeac;
}
</style>
<div class="demo-grille">
    <div class="su-row">
        <div class="su-col-xs-1 su-col-md-1"><p>1</p></div>
        <div class="su-col-xs-1 su-col-md-1"><p>2</p></div>
        <div class="su-col-xs-1 su-col-md-1"><p>3</p></div>
        <div class="su-col-xs-1 su-col-md-1"><p>4</p></div>
        <div class="su-col-xs-1 su-col-md-1"><p>5</p></div>
        <div class="su-col-xs-1 su-col-md-1"><p>6</p></div>
        <div class="su-col-xs-1 su-col-md-1 su-hidden-xs su-hidden-sm"><p>7</p></div>
        <div class="su-col-xs-1 su-col-md-1 su-hidden-xs su-hidden-sm"><p>8</p></div>
        <div class="su-col-xs-1 su-col-md-1 su-hidden-xs su-hidden-sm"><p>9</p></div>
        <div class="su-col-xs-1 su-col-md-1 su-hidden-xs su-hidden-sm"><p>10<p></div>
        <div class="su-col-xs-1 su-col-md-1 su-hidden-xs su-hidden-sm"><p>11<p></div>
        <div class="su-col-xs-1 su-col-md-1 su-hidden-xs su-hidden-sm"><p>12<p></div>
        <div class="su-col-xs-1 su-col-md-1 su-hidden-xs su-hidden-sm"><p>13<p></div>
        <div class="su-col-xs-1 su-col-md-1 su-hidden-xs su-hidden-sm"><p>14<p></div>
        <div class="su-col-xs-1 su-col-md-1 su-hidden-xs su-hidden-sm"><p>15<p></div>
        <div class="su-col-xs-1 su-col-md-1 su-hidden-xs su-hidden-sm"><p>16<p></div>
        <div class="su-col-xs-1 su-col-md-1 su-hidden-xs su-hidden-sm"><p>17<p></div>
        <div class="su-col-xs-1 su-col-md-1 su-hidden-xs su-hidden-sm"><p>18<p></div>
        <div class="su-col-xs-1 su-col-md-1 su-hidden-xs su-hidden-sm"><p>19<p></div>
        <div class="su-col-xs-1 su-col-md-1 su-hidden-xs su-hidden-sm"><p>20<p></div>
        <div class="su-col-xs-1 su-col-md-1 su-hidden-xs su-hidden-sm"><p>21<p></div>
        <div class="su-col-xs-1 su-col-md-1 su-hidden-xs su-hidden-sm"><p>22<p></div>
        <div class="su-col-xs-1 su-col-md-1 su-hidden-xs su-hidden-sm"><p>23<p></div>
        <div class="su-col-xs-1 su-col-md-1 su-hidden-xs su-hidden-sm"><p>24<p></div>
    </div>
</div>

Situation réelle (dans le conteneur de page)

En combinant les diverses classes de colonnes possibles, ainsi que les classes de visibilité dépendantes des points de rupture (classes d’aide) il est donc possible de faire une mise en page complexe.

Rappel : si vous intégrez une grille dans une page complète, elle doit être intégrée dans un conteneur su-container afin de gérer son positionnement horizontal dans la page.

Dans l’exemple ci-dessous, la 1re colonne est invisible en mobile.

<style>
.demo-grille .su-container {
    background: #8da886;
}
.demo-grille .su-row {
    background: #fff;
}
.demo-grille [class*="su-col-"] {
    background: #edaeac;
}
</style>
<div class="demo-grille">
    <div class="su-container">
        <div class="su-row">
            <div class="su-hidden-sm su-col-md-12 su-col-lg-2">
                <p>
                    1.<br />
                    su-hidden-sm su-col-md-12 su-col-lg-2
                </p>
            </div>
            <div class="su-col-md-12 su-col-lg-12 su-col-xl-10">
                <p>
                    2.<br />
                    su-col-md-12 su-col-lg-12 su-col-xl-10
                </p>
            </div>
            <div class="su-col-md-12 su-col-lg-3 su-col-xl-4">
                <p>
                    3.<br />
                    su-col-md-12 su-col-lg-3 su-col-xl-4
                </p>
            </div>
            <div class="su-col-md-12 su-col-lg-7 su-col-xl-8">
                <p>
                    4.<br />
                    su-col-md-12 su-col-lg-7 su-col-xl-8
                </p>
            </div>
        </div>
    </div>
</div>

Décalage de colonnes vers la droite

À partir du bloc à déplacer

Vous pouvez décaler une colonne vers la droite en utilisant les classes su-offset+-point de rupture+-nombre de colonnes. Ces classes augmentent la marge de gauche d’une colonne de -nombre de colonnes. Par exemple, su-offset-md-2 déplace la colonne de 2 colonnes vers la droite.

N. B. – Si vous utilisez un offset, sa valeur de colonne rentre dans le calcul du nombre total de colonne dans le rang.

<style>
.demo-grille .su-container {
    background: #8da886;
}
.demo-grille .su-row {
    background: #fff;
}
.demo-grille [class*="su-col-"] {
    background: #edaeac;
}
</style>
<div class="demo-grille">
    <div class="su-container">
        <div class="su-row">
            <div class="su-col-md-6 su-offset-md-8">
                <p>
                    1.<br />
                    su-col-lg-6 su-offset-lg-8
                </p>
                <p class="contenu">
                    Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
                </p>
            </div>
            <div class="su-col-md-10">
                <p>
                    2.<br />
                    su-col-lg-10
                </p>
                <p class="contenu">
                    Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
                </p>
            </div>
        </div>
    </div>
</div>

À partir du bloc précédant celui à déplacer

Si vous avez besoin que ce soit le bloc précédant qui pousse un bloc, vous pouvez utiliser les classes su-filling+-point de rupture+-nombre de colonnes.

Dans l’exemple ci-dessous, le bloc, en même temps qu’il est déplacé vers la droite, pousse le second bloc. On aurait pu obtenir le même résultat avec un su-offset sur chaque bloc.

<style>
.demo-grille .su-container {
    background: #8da886;
}
.demo-grille .su-row {
    background: #fff;
}
.demo-grille [class*="su-col-"] {
    background: #edaeac;
}
</style>
<div class="demo-grille">
    <div class="su-container">
        <div class="su-row">
            <div class="su-col-md-4 su-offset-md-8 su-filling-md-4"">
                <p>
                    1.<br />
                    su-col-md-4 su-offset-md-8 su-filling-md-4"
                </p>
                <p class="contenu">
                    Ce bloc, en même temps qu’il est déplacé vers la droite, pousse le second bloc.
                </p>
            </div>
            <div class="su-col-md-8">
                <p>
                    2.<br />
                    su-col-md-8
                </p>
                <p class="contenu">
                    Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
                </p>
            </div>
        </div>
    </div>
</div>

Alignement vertical

Avec SipaUI il est possible de gérer l’alignement ou l’étirement vertical des colonnes dans le rang avec les classes su-vertical-… à positionner avec la classe su-row.

Colonnes étirées

L’étirement des colonnes étant l’alignement par défaut, il n’a pas de classe spécifique.

<style>
.demo-grille [class*="su-col-"] {
    background: #edaeac;
}
</style>
<div class="demo-grille">
    <div class="su-row">
        <div class="su-col-xs-2">
            <p class="contenu">Vestibulum id ligula porta felis euismod semper. Curabitur blandit tempus porttitor. Etiam porta sem malesuada magna mollis euismod. Morbi leo risus, porta ac consectetur ac, vestibulum at eros. Vestibulum id ligula porta felis euismod semper.</p>
        </div>
        <div class="su-col-xs-2">
            <p class="contenu">Tellus Magna Vestibulum Lorem Bibendum</p>
        </div>
        <div class="su-col-xs-2">
            <p>Maecenas faucibus mollis interdum. Integer posuere erat a ante venenatis dapibus posuere velit aliquet. Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum. Donec sed odio dui. Integer posuere erat a ante venenatis dapibus posuere velit aliquet. Etiam porta sem malesuada magna mollis euismod.</p>
            <p class="contenu">Vestibulum id ligula porta felis euismod semper. Vestibulum id ligula porta felis euismod semper. Donec sed odio dui. Etiam porta sem malesuada magna mollis euismod.</p>
        </div>
    </div>
</div>

Alignement haut

Utilisation de la classe su-vertical-start.

<style>
.demo-grille [class*="su-col-"] {
    background: #edaeac;
}
</style>
<div class="demo-grille">
    <div class="su-row su-vertical-start">
        <div class="su-col-xs-2">
            <p class="contenu">Vestibulum id ligula porta felis euismod semper. Curabitur blandit tempus porttitor. Etiam porta sem malesuada magna mollis euismod. Morbi leo risus, porta ac consectetur ac, vestibulum at eros. Vestibulum id ligula porta felis euismod semper.</p>
        </div>
        <div class="su-col-xs-2">
            <p class="contenu">Tellus Magna Vestibulum Lorem Bibendum</p>
        </div>
        <div class="su-col-xs-2">
            <p>Maecenas faucibus mollis interdum. Integer posuere erat a ante venenatis dapibus posuere velit aliquet. Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum. Donec sed odio dui. Integer posuere erat a ante venenatis dapibus posuere velit aliquet. Etiam porta sem malesuada magna mollis euismod.</p>
            <p class="contenu">Vestibulum id ligula porta felis euismod semper. Vestibulum id ligula porta felis euismod semper. Donec sed odio dui. Etiam porta sem malesuada magna mollis euismod.</p>
        </div>
    </div>
</div>

Alignement centré

Utilisation de la classe su-vertical-center.

<style>
.demo-grille [class*="su-col-"] {
    background: #edaeac;
}
</style>
<div class="demo-grille">
    <div class="su-row su-vertical-center">
        <div class="su-col-xs-2">
            <p class="contenu">Vestibulum id ligula porta felis euismod semper. Curabitur blandit tempus porttitor. Etiam porta sem malesuada magna mollis euismod. Morbi leo risus, porta ac consectetur ac, vestibulum at eros. Vestibulum id ligula porta felis euismod semper.</p>
        </div>
        <div class="su-col-xs-2">
            <p class="contenu">Tellus Magna Vestibulum Lorem Bibendum</p>
        </div>
        <div class="su-col-xs-2">
            <p>Maecenas faucibus mollis interdum. Integer posuere erat a ante venenatis dapibus posuere velit aliquet. Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum. Donec sed odio dui. Integer posuere erat a ante venenatis dapibus posuere velit aliquet. Etiam porta sem malesuada magna mollis euismod.</p>
            <p class="contenu">Vestibulum id ligula porta felis euismod semper. Vestibulum id ligula porta felis euismod semper. Donec sed odio dui. Etiam porta sem malesuada magna mollis euismod.</p>
        </div>
    </div>
</div>

Alignement bas

Utilisation de la classe su-vertical-end.

<style>
.demo-grille [class*="su-col-"] {
    background: #edaeac;
}
</style>
<div class="demo-grille">
    <div class="su-row su-vertical-end">
        <div class="su-col-xs-2">
            <p class="contenu">Vestibulum id ligula porta felis euismod semper. Curabitur blandit tempus porttitor. Etiam porta sem malesuada magna mollis euismod. Morbi leo risus, porta ac consectetur ac, vestibulum at eros. Vestibulum id ligula porta felis euismod semper.</p>
        </div>
        <div class="su-col-xs-2">
            <p class="contenu">Tellus Magna Vestibulum Lorem Bibendum</p>
        </div>
        <div class="su-col-xs-2">
            <p>Maecenas faucibus mollis interdum. Integer posuere erat a ante venenatis dapibus posuere velit aliquet. Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum. Donec sed odio dui. Integer posuere erat a ante venenatis dapibus posuere velit aliquet. Etiam porta sem malesuada magna mollis euismod.</p>
            <p class="contenu">Vestibulum id ligula porta felis euismod semper. Vestibulum id ligula porta felis euismod semper. Donec sed odio dui. Etiam porta sem malesuada magna mollis euismod.</p>
        </div>
    </div>
</div>

Gouttière horizontale

Il est aussi possible d’ajouter une gouttière horizontale entre les éléments de la grille (grille standard comme grille automatique) avec la classe su-row-gap. Pour la grille standard, cela pourra être utile pour les éléments qui retournent à la ligne sur des écrans moins larges. Par exemple, ici les éléments sont les uns au-dessus des autres avec une gouttière horizontale séparatrice en mobile.

<style>
.demo-grille [class*="su-col-"] {
    background: #edaeac;
}
</style>
<div class="demo-grille">
    <div class="su-row su-row-gap">
        <div class="su-col-md-8">
            <p class="contenu">Vestibulum id ligula porta felis euismod semper. Curabitur blandit tempus porttitor. Etiam porta sem malesuada magna mollis euismod. Morbi leo risus, porta ac consectetur ac, vestibulum at eros. Vestibulum id ligula porta felis euismod semper.</p>
        </div>
        <div class="su-col-md-8">
            <p class="contenu">Tellus Magna Vestibulum Lorem Bibendum</p>
        </div>
        <div class="su-col-md-8">
            <p>Maecenas faucibus mollis interdum. Integer posuere erat a ante venenatis dapibus posuere velit aliquet. Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum. Donec sed odio dui. Integer posuere erat a ante venenatis dapibus posuere velit aliquet. Etiam porta sem malesuada magna mollis euismod.</p>
            <p class="contenu">Vestibulum id ligula porta felis euismod semper. Vestibulum id ligula porta felis euismod semper. Donec sed odio dui. Etiam porta sem malesuada magna mollis euismod.</p>
        </div>
    </div>
</div>

Grille libre automatique

SipaUI propose une grille de colonnes automatiques en flex. Il suffit d’ajouter la classe su-grid-auto au système de grille (su-row). Avec ce système, il est possible de générer une suite de colonnes en nombre variable qui se répartiront automatiquement dans l’espace accordé par le parent. Pour cela, il suffit de créer autant de colonnes que souhaité avec la classe su-col.

Ces colonnes seront flexibles, mais pas responsives (le nombre de colonnes sur une ligne sera toujours le même, quelle que soit la taille de l’écran). Par conséquent, il vous faudra gérer la responsivité dans vos propres CSS ou en utilisant des classes de visibilité / invisibilité responsive des classes d’aide SipaUI comme su-hidden-sm, su-visible-xl…

Par ailleurs, ces colonnes auront une largeur variable en fonction de leur contenu. Pour changer leur largeur, il faudra passer par les attributs flex, flex-grow, width ou max-width dans vos CSS.

Il faut toutefois noter que ce système de colonage automatique est un outil pour des cas particuliers, mais il ne doit en aucun cas remplacer la grille standard pour la mise en page générale d’un site éditorial.

<style>
.demo-grille .su-col {
    background: #edaeac;
}
</style>
<div class="demo-grille">
    <div class="su-grid-auto su-row">
        <div class="su-col"><p>Contenu</p></div>
        <div class="su-col"><p>Contenu</p></div>
        <div class="su-col"><p>Contenu</p></div>
        <div class="su-col"><p>Contenu</p></div>
    </div>
</div>

Avec gouttière

Vous pouvez rajouter les gouttières standards de 20px avec la classe su-column-gap sur le rang (l’ancienne classe su-has-gutter est toujours disponible pour la rétro-compatibilité).

<style>
.demo-grille .su-col {
    background: #edaeac;
}
</style>
<div class="demo-grille">
    <div class="su-grid-auto su-row su-column-gap">
        <div class="su-col"><p>Contenu</p></div>
        <div class="su-col"><p>Contenu</p></div>
        <div class="su-col"><p>Contenu</p></div>
        <div class="su-col"><p>Contenu</p></div>
    </div>
</div>

Wrap

Par défaut, les colonnes de la grille automatique restent sur une ligne et s'adaptent en largeur à leur contenu. Quand elles sont trop larges pour tenir sur cette largeur, elles sortent du conteneur. Pour corriger ce problème, vous pouvez gérer localement la largeur de vos colonnes (comme expliqué plus haut) pour qu'elles tiennent sur la ligne ou mettre en place un retour à la ligne automatique.

Pour mettre en place ce retour automatique, utilisez la classe su-wrap sur le rang. Dans ce cas, la dernière colonne d’une ligne laissera un espace à sa droite (cf. ci-dessous). À vous de régler la largeur de vos colonnes (avec les attributs flex, flex-grow, width ou max-width dans vos CSS). Vous pouvez d’ailleurs gérer ces tailles en fonction de media-queries…

Exemple de base

<style>
.demo-grille .su-col {
    background: #edaeac;
}
</style>
<div class="demo-grille">
    <div class="su-grid-auto su-row su-wrap">
        <div class="su-col">
            <p>Contenu 1</p>
            <p>Lorem ipsum dolor sit amet, consectetur.</p>
        </div>
        <div class="su-col">
            <p>Contenu 2</p>
            <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit.</p>
        </div>
        <div class="su-col">
            <p>Contenu 3</p>
            <p>Lorem ipsum dolor sit amet.</p>
        </div>
        <div class="su-col">
            <p>Contenu 4</p>
            <p>Lorem ipsum dolor sit amet.</p>
        </div>
        <div class="su-col">
            <p>Contenu 5</p>
            <p>Lorem ipsum dolor sit amet.</p>
        </div>
        <div class="su-col">
            <p>Contenu 6</p>
            <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
        </div>
        <div class="su-col">
            <p>Contenu 7</p>
            <p>Lorem ipsum dolor sit amet.</p>
        </div>
    </div>
</div>

Exemple avec gouttières

<style>
.demo-grille .su-col {
    background: #edaeac;
}
</style>
<div class="demo-grille">
    <div class="su-grid-auto su-row su-wrap su-column-gap su-row-gap">
        <div class="su-col">
            <p>Contenu 1</p>
            <p>Lorem ipsum dolor sit amet, consectetur.</p>
        </div>
        <div class="su-col">
            <p>Contenu 2</p>
            <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit.</p>
        </div>
        <div class="su-col">
            <p>Contenu 3</p>
            <p>Lorem ipsum dolor sit amet.</p>
        </div>
        <div class="su-col">
            <p>Contenu 4</p>
            <p>Lorem ipsum dolor sit amet.</p>
        </div>
        <div class="su-col">
            <p>Contenu 5</p>
            <p>Lorem ipsum dolor sit amet.</p>
        </div>
        <div class="su-col">
            <p>Contenu 6</p>
            <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
        </div>
        <div class="su-col">
            <p>Contenu 7</p>
            <p>Lorem ipsum dolor sit amet.</p>
        </div>
    </div>
</div>

Exemple avec gestion locale de la taille

<style>
.demo-grille .su-col {
    background: #edaeac;
}
.quart {width: calc(25% - 15px)}
</style>
<div class="demo-grille">
    <div class="su-grid-auto su-row su-wrap su-column-gap su-row-gap">
        <div class="su-col quart">
            <p>Contenu 1</p>
            <p>Lorem ipsum dolor sit amet, consectetur.</p>
        </div>
        <div class="su-col quart">
            <p>Contenu 2</p>
            <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit.</p>
        </div>
        <div class="su-col quart">
            <p>Contenu 3</p>
            <p>Lorem ipsum dolor sit amet.</p>
        </div>
        <div class="su-col quart">
            <p>Contenu 4</p>
            <p>Lorem ipsum dolor sit amet.</p>
        </div>
        <div class="su-col quart">
            <p>Contenu 5</p>
            <p>Lorem ipsum dolor sit amet.</p>
        </div>
        <div class="su-col quart">
            <p>Contenu 6</p>
            <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
        </div>
    </div>
</div>

Alignements horizontaux

Comme dit plus haut, le contenu de la grille libre est automatiquement aligné à gauche dans l’espace accordé par le parent. Pour plus de possibilités, les classes su-row-center, su-row-right et su-row-space-between permettent d’aligner les enfants de la grille (colonnes ou n’importe quel objet de niveau 1) au centre, à droite ou à chaque extrémité avec des espaces répartis.

Pour un objet qui a une taille définie, il n’y a besoin de rien de plus.

<style>
.demo-grille .su-col {
    background: #edaeac;
}
</style>
<div class="demo-grille">
    <div class="su-grid-auto su-row su-row-right">
        <button class="su-button su-secondary su-small su-margin-right-m">Bouton 1</button>
        <button class="su-button su-primary su-small">Bouton 2</button>
    </div>
</div>

Pour un objet sans taille définie (comme une colonne), il faut définir cette taille.

<style>
.demo-grille .su-col {
    background: #edaeac;
}
.taille-fixe {width: 100px}
</style>
<div class="demo-grille">
    <div class="su-grid-auto su-row su-column-gap su-row-center">
        <div class="su-col taille-fixe">Lorem ipsum dolor sit amet.</div>
        <div class="su-col taille-fixe">Lorem ipsum dolor sit amet, consectetur adipisicing elit.</div>
    </div>
</div>

Grilles imbriquées

Vous pouvez imbriquer une grille (standard ou automatique) dans une colonne. La seule contrainte est de n'utiliser le conteneur que sur la première grille.

<style>
.demo-grille .su-container {
    background: #8da886;
}
.demo-grille .su-row {
    background: #fff;
}
.demo-grille .su-col,
.demo-grille [class*="su-col-"] {
    background: #edaeac;
}
</style>
<div class="demo-grille">
    <div class="su-container">
        <div class="su-row">
            <div class="su-col-md-12 su-col-lg-16">
                <div class="su-grid-auto su-row">
                    <div class="su-col">
                        <p class="contenu">
                            Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
                        </p>
                    </div>
                    <div class="su-col">
                        <p class="contenu">
                            Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
                        </p>
                    </div>
                </div>
            </div>
            <div class="su-col-md-12 su-col-lg-8">
                <p class="contenu">
                    Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
                </p>
            </div>
        </div>
    </div>
</div>

Liste des classes disponibles

Grille standard :

su-container
su-row
su-col-xs-1…
su-visible-xs… (dépendant des Helpers (classes d’aide)
su-hidden-xs… (dépendant des Helpers (classes d’aide)
su-offset-xs-1…
su-filling-xs-1…
su-vertical-start
su-vertical-center
su-vertical-end
su-row-gap

Grille libre :

su-container
su-grid-auto
su-row
su-row-center
su-row-right
su-col
su-column-gap
su-row-gap
su-visible-xs… (dépendant des Helpers (classes d’aide)
su-hidden-xs… (dépendant des Helpers (classes d’aide)
su-vertical-start
su-vertical-center
su-vertical-end
su-wrap