Image de couverture - Guide : Créer des Conteneurs en CSS

Guide : Créer des Conteneurs en CSS

Apprenez à créer des conteneurs en CSS pour structurer vos interfaces web de manière efficace et esthétique.

Icône de calendrier
Icône de chronomètre 6 min

Vous avez acquis les bases du langage CSS et souhaitez désormais construire des interfaces robustes et responsives. Bienvenue au pays des conteneurs, un concept tout aussi important que les grilles (grid) ou encore les boîtes flexibles (flexbox) pour la mise en page.

L’importance du vide

Les espaces vides sur une interface peuvent sembler insignifiants, mais ils sont cruciaux car ils permettent :

  1. De structurer visuellement le contenu
  2. D’orienter le regard de l’utilisateur
  3. De faciliter la lecture en aérant l’interface

Si les espacements entre les éléments sont de manière générale essentiels pour construire une interface de qualité, une typologie d’espacement est visible sur la plupart des interfaces : on parle de conteneurs.

Pourquoi créer des conteneurs ?

Une page web est constituée d’une ou plusieurs sections empilées verticalement.

Schéma - Des conteneurs pour espacer les sections
Schéma - Des conteneurs pour espacer les sections

Deux règles doivent alors être respectées pour un affichage aéré de ces sections :

  1. Elles doivent être suffisamment espacées les unes des autres.
  2. Leur contenu ne doit jamais toucher les bordures de l’écran.

Ces règles sont respectées à travers la création de conteneurs.

En CSS, les conteneurs sont des éléments essentiels pour la mise en page. Ils permettent de regrouper et de structurer ces sections de contenu, en assurant un espacement adéquat et une bonne lisibilité.

Les conteneurs sont définis à l’échelle macroscopique de notre balisage HTML, puisqu’ils interviennent généralement peu après la balise <body> dans l’arborescence HTML d’une page web.

<body>
	<div>Container 1</div>
	<div>Container 2</div>
	<div>Container 3</div>
</body>

Les conteneurs peuvent être de différentes tailles et peuvent s’adapter dynamiquement à la largeur de l’écran pour offrir une expérience utilisateur optimale.

Créer des conteneurs en CSS

Avant d’aborder la création de conteneurs en CSS, il est important de comprendre qu’il existe 2 grands types de conteneurs : les conteneurs pleine largeur, les conteneurs limités.

Ces conteneurs seront implémentées au sein de classes CSS définissant subtilement :

  • Des marges internes (padding)
  • Des marges externes (margin)
  • Des largeurs (width et max-width)

Conteneur pleine largeur

Le rôle d’un conteneur pleine largeur est d’ajouter des paddings verticaux et horizontaux à une section de sorte à ce qu’elle ne touche aucun autre élément.

Définissons-le au sein d’une classe nommée .container-full.

copié !
<div class="container-full">...</div>
copié !
.container-full {
	padding: 20px 40px;
}
Schéma - Conteneur pleine largeur
Schéma - Conteneur pleine largeur

padding

Conteneur limité

Etant donné que tous les supports (mobiles, tablettes, PC…) n’offrent pas la même largeur, il est souvent d’usage de définir une largeur maximale (max-width) pour éviter que les conteneurs ne s’étendent trop sur des larges écrans.

🤔 Pourquoi limiter la largeur des conteneurs ?

Contraindre la taille des conteneurs est essentiel pour 2 raisons principales :

  • Lisibilité du texte : pour éviter que les paragraphes de texte ne s’étendent sur de trop grandes lignes, ce qui nuit à la lisibilité d’un contenu.
  • Affichage des médias : pour éviter que des contenus tels que des médias ne s’étirent trop, provoquant ainsi un effet de contenu massif (la hauteur d’une image ou d’un lecteur vidéo restant proportionnelle à la largeur de l’élément, celui-ci va potentiellement prendre toute la place à l’écran)

Limite fixe

Le conteneur limité va bénéficier des mêmes marges internes que le conteneur plein, à la seule différence qu’il va contraindre son contenu à ne pas dépasser une certaine largeur.

copié !
<div class="container">...</div>
copié !
.container {
	padding: 20px 40px;
	max-width: 1000px;
	margin: 0 auto;
}
Schéma - Conteneur limité à limite fixe
Schéma - Conteneur limité à limite fixe

margin

padding

  • max-width limite ici la taille du conteneur à 1000px.
  • margin: 0 auto est une technique largement utilisée par les intégrateurs web pour distribuer l’espace restant après le conteneur (créé par la contrainte de max-width) de manière équitable à gauche et à droite du conteneur. Cela va naturellement avoir pour effet de le centrer.

Les colonnes vides créées par les marges externes automatiques sont appelées « gouttières ».

Si une seule max-width ne vous suffit pas pour votre interface, vous pouvez alors en créer plusieurs pour avoir des conteneurs de largeur variable.

copié !
<div class="container-md">...</div>
copié !
.container-xs,
.container-sm,
.container-md,
.container-lg,
.container-xl {
	padding: 20px 40px;
	width: 100%;
	margin: 0 auto;
}

.container-xs {
	max-width: 500px;
}

.container-sm {
	max-width: 750px;
}

.container-md {
	max-width: 1000px;
}

.container-lg {
	max-width: 1250px;
}

.container-xl {
	max-width: 1500px;
}
Schéma - Conteneur limité à limites variables
Schéma - Conteneur limité à limites variables

margin

padding

Limites variables

Si vous souhaitez voir apparaître des gouttières sur les extrémités de vos conteneurs sans pour autant que celles-ci grandissent indéfiniment après leur apparition, vous pouvez définir plusieurs max-width qui seront effectives pour des points de ruptures (breakpoints) spécifiques.

Ce type de conteneur responsive agit comme un conteneur limité mais avec plus de flexibilité puisqu’il va permettre de « redéfinir » ponctuellement la taille des gouttières en redéfinissant la max-width à chaque breakpoint.

Voici un tableau récapitulatif illustrant la taille maximale occupée par un conteneur responsive en fonction du point de rupture effectif :

Résolution< 500px≥ 500px≥ 750px≥ 1000px≥ 1250px≥ 1500px
max-width100%95%87.5%80%72.5%65%
copié !
<div class="container">...</div>
copié !
.container {
	padding: 20px 40px;
	width: 100%;
	margin: 0 auto;
}

@media (width < 500px) {
	.container {
		max-width: 100%;
	}
}

@media (width >= 500px) {
	.container {
		max-width: 95%;
	}
}

@media (width >= 750px) {
	.container {
		max-width: 87.5%;
	}
}

@media (width >= 1000px) {
	.container {
		max-width: 80%;
	}
}

@media (width >= 1250px) {
	.container {
		max-width: 72.5%;
	}
}

@media (width >= 1500px) {
	.container {
		max-width: 65%;
	}
}
  • Sur petits supports (mobile, petite tablette en portrait…), pas question de gâcher de l’espace, la max-width occupe donc 100% de l’espace disponible jusqu’à 500px.
  • De 500px à 750px, on crée de petites gouttières occupant 5% de l’espace disponible.
  • Au-delà de 750px on commence à allouer plus d’espace aux gouttières en procédant à une décrémentation de 7.5% à chaque breakpoint.

Créer des conteneurs CSS est désormais pour vous un jeu d’enfant ! ✨

Lire aussi