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.

HTML : Créez une page HTML de base.

Afficher la solution

Solution :

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>Titre de la page</title>
	</head>
	<body>

	</body>
</html>

HTML : Ajoutez le contenu suivant à la page HTML.

<div class="container-cols">
  <div class="row">
    <div class="scale col-1">1</div>
    <div class="scale col-1">2</div>
    <div class="scale col-1">3</div>
    <div class="scale col-1">4</div>
    <div class="scale col-1">5</div>
    <div class="scale col-1">6</div>
    <div class="scale col-1">7</div>
    <div class="scale col-1">8</div>
    <div class="scale col-1">9</div>
    <div class="scale col-1">10</div>
    <div class="scale col-1">11</div>
    <div class="scale col-1">12</div>
  </div>
  
  <div class="row">
    <div class="item col-6">col-6</div>
    <div class="item col-6">col-6</div>
  </div>
  
  <div class="row">
    <div class="item col-4">col-4</div>
    <div class="item col-4">col-4</div>
    <div class="item col-4">col-4</div>
  </div>
  
  <div class="row">
    <div class="item col-3">col-3</div>
    <div class="item col-3">col-3</div>
    <div class="item col-3">col-3</div>
    <div class="item col-3">col-3</div>
  </div>
  
  <div class="row">
    <div class="item col-2">col-2</div>
    <div class="item col-8">col-8</div>
    <div class="item col-2">col-2</div>
  </div>
</div>

Détails du code :

  • container-cols : correspond à un conteneur global pour l’ensemble des lignes de contenu de la grille.
  • row : correspond à une ligne de la grille.
  • scale et item : ces classes sont uniquement destinées à la présentation de l’exercice.

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

Afficher la solution

Solution :

Code à placer dans l’en-tête de la page HTML en personnalisant la valeur de l’attribut href si nécessaire.

<link  rel="stylesheet" type="text/css" href="style.css">

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.

CSS : Transformez les éléments row, à l’intérieur du conteneur container-cols, en conteneurs flexibles de type flexbox.

Afficher la solution

Solution :

.container-cols .row {
  display: flex;
}

CSS : Insérez le code CSS suivant permettant de distinguer visuellement les futures colonnes.

.scale {
  background-color: #666;
  color: #ccc;
  text-align: center;
  margin: 3px 0;
}
.item {
  text-align: center;
  padding: 10px 3px;
  margin: 3px 0;
  border: 1px solid #ccc;
}

CSS : 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. Pensez au modèle de boîtes lors du dimensionnement des largeurs de colonnes.

Votre grille doit permettre de créer une mise en forme comme illustrée dans l’illustration ci-dessous :

Aperçu de la grille
Aperçu de la grille
Afficher un indice

Indice :

La classe col-12 aura une largeur de 100%.

La classe col-1 aura une largeur de 100 / 12 = 8.3333333333%.

Afficher la solution

Solution :

.col-1 {
  flex-basis: 8.3333333333%;
  box-sizing: border-box;
}
.col-2 {
  flex-basis: 16.6666666667%;
  box-sizing: border-box;
}
.col-3 {
  flex-basis: 25%;
  box-sizing: border-box;
}
.col-4 {
  flex-basis: 33.3333333333%;
  box-sizing: border-box;
}
.col-5 {
  flex-basis: 41.6666666667%;
  box-sizing: border-box;
}
.col-6 {
  flex-basis: 50%;
  box-sizing: border-box;
}
.col-7 {
  flex-basis: 58.3333333333%;
  box-sizing: border-box;
}
.col-8 {
  flex-basis: 66.6666666667%;
  box-sizing: border-box;
}
.col-9 {
  flex-basis: 75%;
  box-sizing: border-box;
}
.col-10 {
  flex-basis: 83.3333333333%;
  box-sizing: border-box;
}
.col-11 {
  flex-basis: 91.6666666667%;
  box-sizing: border-box;
}
.col-12 {
  flex-basis: 100%;
  box-sizing: border-box;
}

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

Aperçu de la grille avec gouttières
Aperçu de la grille avec gouttières
Afficher la solution du conteneur

Solution du conteneur :

.container-cols .row {
  display: flex;
  gap: 5px;
}
Afficher la solution complète

Solution complète :

SCSS : 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.

Afficher la solution

Solution :

Sauf mention contraire*, l'article Positionnement flexbox : Création d’une grille [CSS11] et son contenu par Julien Crego sont mis à disposition selon les termes de la licence Creative Commons

Licence Creative Commons

Attribution - Pas d’Utilisation Commerciale - Partage dans les Mêmes Conditions 4.0 International

Cette licence vous permet de remixer, arranger, et adapter cette œuvre à des fins non commerciales tant que vous créditez la source en citant le nom des auteurs et que les nouvelles œuvres sont diffusées selon les mêmes conditions.

* Cette notice est intégrée automatiquement à la fin de chaque article de ce site.

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.