Système de grille

Conseils

Le système de grille à 12 colonnes est une méthode populaire pour créer des mises en page réactives. Il est basé sur la division d’une page Web en 12 colonnes distinctes, qui peuvent être combinées de diverses façons pour créer différentes mises en page. Chaque élément de la mise en page se voit attribuer un certain nombre de colonnes. Par exemple, trois colonnes de largeur égale comprendraient chacune quatre colonnes de la grille originale.

Sur les écrans de petite taille, la grille peut être ajustée de façon que les colonnes s’empilent verticalement plutôt qu’horizontalement. Cela se fait généralement à l’aide de requêtes média. Cette flexibilité permet à la mise en page de s’ajuster de manière fluide aux différentes tailles d’écran. La mise en page reste ainsi propre et organisée, quel que soit le type d’appareil utilisé pour consulter le site Web.

Le système de grille à boîtes flexibles de 12 colonnes fait appel à une série de conteneurs, de lignes et de colonnes pour mettre en page et aligner le contenu.

• Conteneur : Le conteneur centre le contenu et assure le remplissage horizontal.
• Ligne : Les lignes servent à englober les colonnes.
• Colonne : Les colonnes permettent de créer différentes mises en page. Leurs noms de classe indiquent le nombre de colonnes utilisées dans le modèle. Par exemple : .col-6

Points de rupture

Le système de grille comprend cinq points de rupture distincts. Vous pouvez utiliser des classes propres aux points de rupture pour contrôler le rendu de la mise en page aux divers points de rupture. Le système de grille est d’abord conçu pour les appareils mobiles.

Dispositions en grille

Voici les dispositions en grille recommandées. Pour d’autres combinaisons, contactez l’équipe du système de conception du GNB.

12 colonnes

Il s’agit d’une colonne pleine largeur englobant tous les points de rupture.

<div class="container">
    <div class="row">
        <div class="col-12">
            <!-- Votre contenu ici -->
        </div>
    </div>
</div>

4 + 8 colonnes

Ces colonnes apparaissent empilées et en pleine largeur par défaut, puis passent à une disposition en 4 + 8 colonnes à partir du point de rupture « grand ».

<div class="container">
    <div class="row">
        <div class="col-lg-4">
            <!-- Votre contenu ici -->        
        </div>
        <div class="col-lg-8">
            <!-- Votre contenu ici -->        
        </div>
    </div>
</div>

6 + 6 colonnes

Ces colonnes apparaissent d’abord comme empilées et en pleine largeur, puis passent à une disposition côte à côte à partir du point de rupture « moyen ».

<div class="container">
    <div class="row">
        <div class="col-md-6">
            <!-- Votre contenu ici -->
        </div>
        <div class="col-md-6">
            <!-- Votre contenu ici -->
        </div>
    </div>
</div>

3 + 3 + 3 + 3 colonnes

Ces colonnes apparaissent d’abord comme empilées et en pleine largeur, puis passent à une disposition en 6 + 6 colonnes au point de rupture « moyen », puis à une disposition en 3 + 3 + 3 + 3 colonnes à partir du point de rupture « grand ».

<div class="container">
    <div class="row">
        <div class="col-md-6 col-lg-3">
            <!-- Votre contenu ici -->
        </div>
        <div class="col-md-6 col-lg-3">
            <!-- Votre contenu ici -->
        </div>
        <div class="col-md-6 col-lg-3">
            <!-- Votre contenu ici -->
        </div>
        <div class="col-md-6 col-lg-3">
            <!-- Votre contenu ici -->
        </div>
    </div>
</div>

4 + 4 + 4 colonnes

Ces colonnes apparaissent d’abord comme empilées et en pleine largeur, puis passent à une disposition en 6 + 6 colonnes au point de rupture « moyen », puis à une disposition en 4 + 4 + 4 colonnes à partir du point de rupture « grand ».

<div class="container">
    <div class="row">
        <div class="col-md-6 col-lg-4">
            <!-- Votre contenu ici -->
        </div>
        <div class="col-md-6 col-lg-4">
            <!-- Votre contenu ici -->
        </div>
        <div class="col-md-6 col-lg-4">
            <!-- Votre contenu ici -->
        </div>
    </div>
</div>

8 + 4 colonnes

Ces colonnes apparaissent d’abord comme empilées et en pleine largeur par défaut, puis passent à une disposition en 8 + 4 colonnes à partir du point de rupture « grand ».

<div class="container">
    <div class="row">
        <div class="col-lg-8">
            <!-- Votre contenu ici -->
        </div>
        <div class="col-lg-4">
            <!-- Votre contenu ici -->    
        </div>
    </div>
</div>