Positionnement flexbox : Création d’une grille CSS11

Cet exercice consiste à créer une grille de mise en forme en utilisant les propriétés des flexbox en CSS.

Créez une page HTML avec le code suivant.

<div class="col-conteneur">
    <div class="echelle col-1">1</div>
    <div class="echelle col-1">2</div>
    <div class="echelle col-1">3</div>
    <div class="echelle col-1">4</div>
    <div class="echelle col-1">5</div>
    <div class="echelle col-1">6</div>
    <div class="echelle col-1">7</div>
    <div class="echelle col-1">8</div>
    <div class="echelle col-1">9</div>
    <div class="echelle col-1">10</div>
    <div class="echelle col-1">11</div>
    <div class="echelle col-1">12</div>
            
    <div class="element col-6">col-6</div>
    <div class="element col-6">col-6</div>
            
    <div class="element col-4">col-4</div>
    <div class="element col-4">col-4</div>
    <div class="element col-4">col-4</div>
            
    <div class="element col-3">col-3</div>
    <div class="element col-3">col-3</div>
    <div class="element col-3">col-3</div>
    <div class="element col-3">col-3</div>
            
    <div class="element col-2">col-2</div>
    <div class="element col-8">col-8</div>
    <div class="element col-2">col-2</div>
</div>

Les deux classes echelle et element ne sont pas utiles dans le fonctionnement de la grille. Utilisez-les pour la mise en forme des futures cellules.

Créez une feuille de styles et intégrez-la dans votre page HTML.

Attention
À partir de maintenant, vous n’avez plus à toucher à la page HTML. Pour la suite de l’exercice, vous ne travaillerez plus que dans la feuille de style.

Créez un conteneur flex à partir du bloc avec la classe col-conteneur.

Créez une grille permettant de mettre en forme du contenu sous la forme de colonne. La grille doit être composée de 12 colonnes. Vous devez donc créer les classes : col-1, col-2, col-3, jusqu’à col-12. Votre grille doit permettre de créer une mise en forme comme illustrée dans l’illustration ci-dessous :

Ajoutez une gouttière entre les cellules de votre grille.

Si vous connaissez la syntaxe SCSS, créez un mixin pour pouvoir gérer la grille avec le nombre de colonnes et la largeur de la gouttière en paramètres.

Cela peut vous intéresser :

Laisser un commentaire

Votre adresse de messagerie ne sera pas publiée. Les champs obligatoires sont indiqués avec *

Ce site utilise Akismet pour réduire les indésirables. En savoir plus sur comment les données de vos commentaires sont utilisées.