Répartir parfaitement des items avec width: calc(…) et Flexbox

Florian Calvat
, 13 août 2025

Quand on crée une grille de cartes ou d’éléments avec Flexbox, on veut souvent répartir 3 éléments par ligne, avec des espaces constants entre eux. Mais un problème classique se pose :
👉 Comment gérer la dernière ligne si elle ne contient que 1 ou 2 éléments ?

🧨 Le problème classique

Prenons un container avec 3 cartes par ligne. Quand on en a un multiple de 3 (3, 6, 9…), tout va bien.
Mais si on en a 4, 5, 7… la dernière ligne est incomplète, et les éléments peuvent :

Être mal alignés (pas de centrage)
Avoir une largeur déformée
Être trop petits à cause des flex: 1 ou d’un width: 33.33% qui n’intègre pas les marges

✅ La solution : width: calc(...)

Plutôt que de laisser le navigateur faire ses calculs, on reprend la main avec calc() :

				
					width: calc((100% - 80px) / 3);

100% : largeur totale disponible
80px : total des espaces entre les 3 éléments (par exemple 2 × gap: 40px)
/ 3 : nombre d’éléments souhaité par ligne

Même si une ligne n’a que 1 ou 2 éléments, leur largeur restera la même, et ils ne s’étireront pas.

💻 Exemple concret

HTML

				
					<div class="container">
  <div class="item">1</div>
  <div class="item">2</div>
  <div class="item">3</div>
  <div class="item">4</div>
  <div class="item">5</div>
</div>

CSS

				
					.container {
  display: flex;
  flex-wrap: wrap;
  gap: 40px;
}

.item {
  width: calc((100% - 80px) / 3);
  background: #eee;
  padding: 20px;
  box-sizing: border-box;
}

💡 Ici, flex-wrap: wrap permet aux items d’aller à la ligne quand il n’y a plus de place, tout en gardant exactement la même largeur sur toutes les lignes, même s’il n’y a qu’un ou deux items à la fin.

📱 Ajout du responsive

Combine avec des media queries pour adapter dynamiquement le nombre de colonnes :

				
					@media (min-width: 1024px) {
  .item {
    width: calc((100% - 80px) / 3);
  }
}

@media (min-width: 768px) and (max-width: 1023px) {
  .item {
    width: calc((100% - 40px) / 2);
  }
}

@media (max-width: 767px) {
  .item {
    width: 100%;
  }
}

🎯 Conclusion

Utiliser width: calc(...) avec Flexbox permet de :

Garder des espacements constants entre les éléments
Aligner parfaitement les éléments sur toutes les lignes
Éviter les pièges des grilles incomplètes
Construire des grilles responsives simples et efficaces