Logo - laConsole

Formation Créer un Framework CSS | Le Layout

Découvrez comment structurer vos interfaces web avec un layout robuste en utilisant des conteneurs et des grilles CSS.

Icône de calendrier MAJ en
Débutant
6 chapitres

Qu’est-ce que le layout ?

Le layout d’une interface constitue la manière dont les éléments sont agencés sur une page web.

Il permet de structurer visuellement l’interface, de guider l’utilisateur et de garantir une expérience de navigation fluide et intuitive.

On associe généralement le layout aux éléments macro constituant la disposition globale d’une page web. Parmi ces composants structurels, on retrouve :

  • En-tête
  • Sidebar
  • Sections
  • Pied de page

Ils organisent les grandes parties de l’interface et définissent la manière dont elles s’articulent entre elles, par opposition aux éléments micro qui concernent les détails plus fins et spécifiques du style, comme les composants : boutons, cartes, icônes, typographies, etc.

La composition d’un layout repose essentiellement sur 2 concepts :

  1. Les conteneurs pour une mise en page robuste et esthétique.
  2. Les grilles pour disposer les éléments au sein de colonnes.

Un bon layout se doit d’être flexible pour s’adapter à différentes tailles d’écran (responsive) et doit respecter les principes de conception comme l’équilibre, la hiérarchie et la cohérence visuelle.

Conteneurs

En CSS, les conteneurs sont cruciaux pour la mise en page, regroupant et structurant les sections de contenu tout en assurant un espacement adéquat et une bonne lisibilité. Ils peuvent varier en taille et s’adapter dynamiquement à la largeur de l’écran pour une expérience utilisateur optimale.

Vous souhaitez en savoir plus sur les conteneurs en CSS ?

Nous allons dans notre framework CSS créer un conteneur pleine largeur et un conteneur limité par une largeur maximale définie par l’utilisateur.

Ces conteneurs seront les fondations sur lesquelles nous pourrons construire des layouts complexes et responsives.

Conteneur pleine largeur

Notre conteneur pleine largeur sera créé au sein d’une classe .container-full et se contentera d’ajouter des paddings à une section afin d’empêcher son contenu d’entrer en contact avec les bordures de l’écran.

css/layout/_container.css
copié ! 
.container-full {
	padding: var(--base-unit) calc(var(--base-unit) * 2);
}
Schéma - Conteneur pleine largeur
Schéma - Conteneur pleine largeur

padding

Pour une cohérence globale, la taille des paddings est basée sur notre référentiel typographique --base-unit, défini dans le fichier de configuration 📄 config.css.

  • Les paddings horizontaux (gauche et droite) mesurent --base-unit pour éloigner le contenu des bordures de l’écran.
  • Les paddings verticaux (haut et bas) mesurent 2 fois --base-unit pour bien espacer les sections entre elles car l’espace disponible est sur cet axe illimité (grâce à la possibilité de scroller).

Conteneur limité fixe

Les conteneurs limités vont voir leur capacité d’agrandissement limitée par une valeur seuil. Cette valeur est celle que nous avions défini dans la variable --max-width au sein du fichier 📄 config.css, il est désormais temps de l’exploiter pour créer nos conteneurs limités.

css/layout/_container.css
copié ! 
.container {
	padding: var(--base-unit) calc(var(--base-unit) * 2);
	max-width: var(--max-width);
	margin: 0 auto;
}
Schéma - Conteneur limité à limite fixe
Schéma - Conteneur limité à limite fixe

margin

padding

margin: 0 auto permet d’appliquer des marges automatiques à droite et à gauche. Autrement dit, cela va distribuer équitablement de part et d’autre du conteneur l’espace restant potentiel situé à droite du conteneur (non-occupé en raison de la max-width).

Cette redistribution de l’espace a pour effet de centrer le conteneur.

Grille

Je vous invite à lire cet article détaillant étape par étape comment créer une grille CSS responsive.

Notre micro framework CSS se basera sur cette dernière dont vous trouverez le code source ci-dessous. 👇

css/layout/_grid.css
copié ! 
[class*="grid-"] {
  display: grid;
}

.grid-1 { grid-template-columns: repeat(1, 1fr); }
.grid-2 { grid-template-columns: repeat(2, 1fr); }
.grid-3 { grid-template-columns: repeat(3, 1fr); }
.grid-4 { grid-template-columns: repeat(4, 1fr); }
.grid-5 { grid-template-columns: repeat(5, 1fr); }
.grid-6 { grid-template-columns: repeat(6, 1fr); }
.grid-7 { grid-template-columns: repeat(7, 1fr); }
.grid-8 { grid-template-columns: repeat(8, 1fr); }
.grid-9 { grid-template-columns: repeat(9, 1fr); }
.grid-10 { grid-template-columns: repeat(10, 1fr); }
.grid-11 { grid-template-columns: repeat(11, 1fr); }
.grid-12 { grid-template-columns: repeat(12, 1fr); }

@media (min-width: 576px) {
  .sm\:grid-1 { grid-template-columns: repeat(1, 1fr); }
  .sm\:grid-2 { grid-template-columns: repeat(2, 1fr); }
  .sm\:grid-3 { grid-template-columns: repeat(3, 1fr); }
  .sm\:grid-4 { grid-template-columns: repeat(4, 1fr); }
  .sm\:grid-5 { grid-template-columns: repeat(5, 1fr); }
  .sm\:grid-6 { grid-template-columns: repeat(6, 1fr); }
  .sm\:grid-7 { grid-template-columns: repeat(7, 1fr); }
  .sm\:grid-8 { grid-template-columns: repeat(8, 1fr); }
  .sm\:grid-9 { grid-template-columns: repeat(9, 1fr); }
  .sm\:grid-10 { grid-template-columns: repeat(10, 1fr); }
  .sm\:grid-11 { grid-template-columns: repeat(11, 1fr); }
  .sm\:grid-12 { grid-template-columns: repeat(12, 1fr); }
}

@media (min-width: 768px) {
  .md\:grid-1 { grid-template-columns: repeat(1, 1fr); }
  .md\:grid-2 { grid-template-columns: repeat(2, 1fr); }
  .md\:grid-3 { grid-template-columns: repeat(3, 1fr); }
  .md\:grid-4 { grid-template-columns: repeat(4, 1fr); }
  .md\:grid-5 { grid-template-columns: repeat(5, 1fr); }
  .md\:grid-6 { grid-template-columns: repeat(6, 1fr); }
  .md\:grid-7 { grid-template-columns: repeat(7, 1fr); }
  .md\:grid-8 { grid-template-columns: repeat(8, 1fr); }
  .md\:grid-9 { grid-template-columns: repeat(9, 1fr); }
  .md\:grid-10 { grid-template-columns: repeat(10, 1fr); }
  .md\:grid-11 { grid-template-columns: repeat(11, 1fr); }
  .md\:grid-12 { grid-template-columns: repeat(12, 1fr); }
}

@media (min-width: 992px) {
  .lg\:grid-1 { grid-template-columns: repeat(1, 1fr); }
  .lg\:grid-2 { grid-template-columns: repeat(2, 1fr); }
  .lg\:grid-3 { grid-template-columns: repeat(3, 1fr); }
  .lg\:grid-4 { grid-template-columns: repeat(4, 1fr); }
  .lg\:grid-5 { grid-template-columns: repeat(5, 1fr); }
  .lg\:grid-6 { grid-template-columns: repeat(6, 1fr); }
  .lg\:grid-7 { grid-template-columns: repeat(7, 1fr); }
  .lg\:grid-8 { grid-template-columns: repeat(8, 1fr); }
  .lg\:grid-9 { grid-template-columns: repeat(9, 1fr); }
  .lg\:grid-10 { grid-template-columns: repeat(10, 1fr); }
  .lg\:grid-11 { grid-template-columns: repeat(11, 1fr); }
  .lg\:grid-12 { grid-template-columns: repeat(12, 1fr); }
}

@media (min-width: 1200px) {
  .xl\:grid-1 { grid-template-columns: repeat(1, 1fr); }
  .xl\:grid-2 { grid-template-columns: repeat(2, 1fr); }
  .xl\:grid-3 { grid-template-columns: repeat(3, 1fr); }
  .xl\:grid-4 { grid-template-columns: repeat(4, 1fr); }
  .xl\:grid-5 { grid-template-columns: repeat(5, 1fr); }
  .xl\:grid-6 { grid-template-columns: repeat(6, 1fr); }
  .xl\:grid-7 { grid-template-columns: repeat(7, 1fr); }
  .xl\:grid-8 { grid-template-columns: repeat(8, 1fr); }
  .xl\:grid-9 { grid-template-columns: repeat(9, 1fr); }
  .xl\:grid-10 { grid-template-columns: repeat(10, 1fr); }
  .xl\:grid-11 { grid-template-columns: repeat(11, 1fr); }
  .xl\:grid-12 { grid-template-columns: repeat(12, 1fr); }
}

.col-1  { grid-column: span 1; }
.col-2  { grid-column: span 2; }
.col-3  { grid-column: span 3; }
.col-4  { grid-column: span 4; }
.col-5  { grid-column: span 5; }
.col-6  { grid-column: span 6; }
.col-7  { grid-column: span 7; }
.col-8  { grid-column: span 8; }
.col-9  { grid-column: span 9; }
.col-10 { grid-column: span 10; }
.col-11 { grid-column: span 11; }
.col-12 { grid-column: span 12; }

@media (min-width: 576px) {
  .sm\:col-1  { grid-column: span 1; }
  .sm\:col-2  { grid-column: span 2; }
  .sm\:col-3  { grid-column: span 3; }
  .sm\:col-4  { grid-column: span 4; }
  .sm\:col-5  { grid-column: span 5; }
  .sm\:col-6  { grid-column: span 6; }
  .sm\:col-7  { grid-column: span 7; }
  .sm\:col-8  { grid-column: span 8; }
  .sm\:col-9  { grid-column: span 9; }
  .sm\:col-10 { grid-column: span 10; }
  .sm\:col-11 { grid-column: span 11; }
  .sm\:col-12 { grid-column: span 12; }
}

@media (min-width: 768px) {
  .md\:col-1  { grid-column: span 1; }
  .md\:col-2  { grid-column: span 2; }
  .md\:col-3  { grid-column: span 3; }
  .md\:col-4  { grid-column: span 4; }
  .md\:col-5  { grid-column: span 5; }
  .md\:col-6  { grid-column: span 6; }
  .md\:col-7  { grid-column: span 7; }
  .md\:col-8  { grid-column: span 8; }
  .md\:col-9  { grid-column: span 9; }
  .md\:col-10 { grid-column: span 10; }
  .md\:col-11 { grid-column: span 11; }
  .md\:col-12 { grid-column: span 12; }
}

@media (min-width: 992px) {
  .lg\:col-1  { grid-column: span 1; }
  .lg\:col-2  { grid-column: span 2; }
  .lg\:col-3  { grid-column: span 3; }
  .lg\:col-4  { grid-column: span 4; }
  .lg\:col-5  { grid-column: span 5; }
  .lg\:col-6  { grid-column: span 6; }
  .lg\:col-7  { grid-column: span 7; }
  .lg\:col-8  { grid-column: span 8; }
  .lg\:col-9  { grid-column: span 9; }
  .lg\:col-10 { grid-column: span 10; }
  .lg\:col-11 { grid-column: span 11; }
  .lg\:col-12 { grid-column: span 12; }
}

@media (min-width: 1200px) {
  .xl\:col-1  { grid-column: span 1; }
  .xl\:col-2  { grid-column: span 2; }
  .xl\:col-3  { grid-column: span 3; }
  .xl\:col-4  { grid-column: span 4; }
  .xl\:col-5  { grid-column: span 5; }
  .xl\:col-6  { grid-column: span 6; }
  .xl\:col-7  { grid-column: span 7; }
  .xl\:col-8  { grid-column: span 8; }
  .xl\:col-9  { grid-column: span 9; }
  .xl\:col-10 { grid-column: span 10; }
  .xl\:col-11 { grid-column: span 11; }
  .xl\:col-12 { grid-column: span 12; }
}

Code complet

Voici le code complet des fichiers 📄 _container.css et 📄 _grid.css ainsi que du fichier global 📄 all.css :

css/layout/_container.css
copié ! 
.container-full {
	padding: var(--base-unit) calc(var(--base-unit) * 2);
}

.container {
	padding: var(--base-unit) calc(var(--base-unit) * 2);
	max-width: var(--max-width);
	margin: 0 auto;
}
css/layout/_grid.css
copié ! 
[class*="grid-"] {
  display: grid;
}

.grid-1 { grid-template-columns: repeat(1, 1fr); }
.grid-2 { grid-template-columns: repeat(2, 1fr); }
.grid-3 { grid-template-columns: repeat(3, 1fr); }
.grid-4 { grid-template-columns: repeat(4, 1fr); }
.grid-5 { grid-template-columns: repeat(5, 1fr); }
.grid-6 { grid-template-columns: repeat(6, 1fr); }
.grid-7 { grid-template-columns: repeat(7, 1fr); }
.grid-8 { grid-template-columns: repeat(8, 1fr); }
.grid-9 { grid-template-columns: repeat(9, 1fr); }
.grid-10 { grid-template-columns: repeat(10, 1fr); }
.grid-11 { grid-template-columns: repeat(11, 1fr); }
.grid-12 { grid-template-columns: repeat(12, 1fr); }

@media (min-width: 576px) {
  .sm\:grid-1 { grid-template-columns: repeat(1, 1fr); }
  .sm\:grid-2 { grid-template-columns: repeat(2, 1fr); }
  .sm\:grid-3 { grid-template-columns: repeat(3, 1fr); }
  .sm\:grid-4 { grid-template-columns: repeat(4, 1fr); }
  .sm\:grid-5 { grid-template-columns: repeat(5, 1fr); }
  .sm\:grid-6 { grid-template-columns: repeat(6, 1fr); }
  .sm\:grid-7 { grid-template-columns: repeat(7, 1fr); }
  .sm\:grid-8 { grid-template-columns: repeat(8, 1fr); }
  .sm\:grid-9 { grid-template-columns: repeat(9, 1fr); }
  .sm\:grid-10 { grid-template-columns: repeat(10, 1fr); }
  .sm\:grid-11 { grid-template-columns: repeat(11, 1fr); }
  .sm\:grid-12 { grid-template-columns: repeat(12, 1fr); }
}

@media (min-width: 768px) {
  .md\:grid-1 { grid-template-columns: repeat(1, 1fr); }
  .md\:grid-2 { grid-template-columns: repeat(2, 1fr); }
  .md\:grid-3 { grid-template-columns: repeat(3, 1fr); }
  .md\:grid-4 { grid-template-columns: repeat(4, 1fr); }
  .md\:grid-5 { grid-template-columns: repeat(5, 1fr); }
  .md\:grid-6 { grid-template-columns: repeat(6, 1fr); }
  .md\:grid-7 { grid-template-columns: repeat(7, 1fr); }
  .md\:grid-8 { grid-template-columns: repeat(8, 1fr); }
  .md\:grid-9 { grid-template-columns: repeat(9, 1fr); }
  .md\:grid-10 { grid-template-columns: repeat(10, 1fr); }
  .md\:grid-11 { grid-template-columns: repeat(11, 1fr); }
  .md\:grid-12 { grid-template-columns: repeat(12, 1fr); }
}

@media (min-width: 992px) {
  .lg\:grid-1 { grid-template-columns: repeat(1, 1fr); }
  .lg\:grid-2 { grid-template-columns: repeat(2, 1fr); }
  .lg\:grid-3 { grid-template-columns: repeat(3, 1fr); }
  .lg\:grid-4 { grid-template-columns: repeat(4, 1fr); }
  .lg\:grid-5 { grid-template-columns: repeat(5, 1fr); }
  .lg\:grid-6 { grid-template-columns: repeat(6, 1fr); }
  .lg\:grid-7 { grid-template-columns: repeat(7, 1fr); }
  .lg\:grid-8 { grid-template-columns: repeat(8, 1fr); }
  .lg\:grid-9 { grid-template-columns: repeat(9, 1fr); }
  .lg\:grid-10 { grid-template-columns: repeat(10, 1fr); }
  .lg\:grid-11 { grid-template-columns: repeat(11, 1fr); }
  .lg\:grid-12 { grid-template-columns: repeat(12, 1fr); }
}

@media (min-width: 1200px) {
  .xl\:grid-1 { grid-template-columns: repeat(1, 1fr); }
  .xl\:grid-2 { grid-template-columns: repeat(2, 1fr); }
  .xl\:grid-3 { grid-template-columns: repeat(3, 1fr); }
  .xl\:grid-4 { grid-template-columns: repeat(4, 1fr); }
  .xl\:grid-5 { grid-template-columns: repeat(5, 1fr); }
  .xl\:grid-6 { grid-template-columns: repeat(6, 1fr); }
  .xl\:grid-7 { grid-template-columns: repeat(7, 1fr); }
  .xl\:grid-8 { grid-template-columns: repeat(8, 1fr); }
  .xl\:grid-9 { grid-template-columns: repeat(9, 1fr); }
  .xl\:grid-10 { grid-template-columns: repeat(10, 1fr); }
  .xl\:grid-11 { grid-template-columns: repeat(11, 1fr); }
  .xl\:grid-12 { grid-template-columns: repeat(12, 1fr); }
}

.col-1  { grid-column: span 1; }
.col-2  { grid-column: span 2; }
.col-3  { grid-column: span 3; }
.col-4  { grid-column: span 4; }
.col-5  { grid-column: span 5; }
.col-6  { grid-column: span 6; }
.col-7  { grid-column: span 7; }
.col-8  { grid-column: span 8; }
.col-9  { grid-column: span 9; }
.col-10 { grid-column: span 10; }
.col-11 { grid-column: span 11; }
.col-12 { grid-column: span 12; }

@media (min-width: 576px) {
  .sm\:col-1  { grid-column: span 1; }
  .sm\:col-2  { grid-column: span 2; }
  .sm\:col-3  { grid-column: span 3; }
  .sm\:col-4  { grid-column: span 4; }
  .sm\:col-5  { grid-column: span 5; }
  .sm\:col-6  { grid-column: span 6; }
  .sm\:col-7  { grid-column: span 7; }
  .sm\:col-8  { grid-column: span 8; }
  .sm\:col-9  { grid-column: span 9; }
  .sm\:col-10 { grid-column: span 10; }
  .sm\:col-11 { grid-column: span 11; }
  .sm\:col-12 { grid-column: span 12; }
}

@media (min-width: 768px) {
  .md\:col-1  { grid-column: span 1; }
  .md\:col-2  { grid-column: span 2; }
  .md\:col-3  { grid-column: span 3; }
  .md\:col-4  { grid-column: span 4; }
  .md\:col-5  { grid-column: span 5; }
  .md\:col-6  { grid-column: span 6; }
  .md\:col-7  { grid-column: span 7; }
  .md\:col-8  { grid-column: span 8; }
  .md\:col-9  { grid-column: span 9; }
  .md\:col-10 { grid-column: span 10; }
  .md\:col-11 { grid-column: span 11; }
  .md\:col-12 { grid-column: span 12; }
}

@media (min-width: 992px) {
  .lg\:col-1  { grid-column: span 1; }
  .lg\:col-2  { grid-column: span 2; }
  .lg\:col-3  { grid-column: span 3; }
  .lg\:col-4  { grid-column: span 4; }
  .lg\:col-5  { grid-column: span 5; }
  .lg\:col-6  { grid-column: span 6; }
  .lg\:col-7  { grid-column: span 7; }
  .lg\:col-8  { grid-column: span 8; }
  .lg\:col-9  { grid-column: span 9; }
  .lg\:col-10 { grid-column: span 10; }
  .lg\:col-11 { grid-column: span 11; }
  .lg\:col-12 { grid-column: span 12; }
}

@media (min-width: 1200px) {
  .xl\:col-1  { grid-column: span 1; }
  .xl\:col-2  { grid-column: span 2; }
  .xl\:col-3  { grid-column: span 3; }
  .xl\:col-4  { grid-column: span 4; }
  .xl\:col-5  { grid-column: span 5; }
  .xl\:col-6  { grid-column: span 6; }
  .xl\:col-7  { grid-column: span 7; }
  .xl\:col-8  { grid-column: span 8; }
  .xl\:col-9  { grid-column: span 9; }
  .xl\:col-10 { grid-column: span 10; }
  .xl\:col-11 { grid-column: span 11; }
  .xl\:col-12 { grid-column: span 12; }
}
css/layout/all.css
copié ! 
@import '_container.css';
@import '_grid.css';

Le style du layout du framework est importé dans 📄 app.css :

css/app.css
copié ! 
@import 'config.css';
@import 'base/all.css';
@import 'layout/all.css';
@import 'components/all.css';
@import 'utilities/all.css';