Tutoriel de mise en page CSS : des approches classiques aux dernières techniques

Publié: 2022-03-11

Maîtriser la mise en page Web sans maîtriser CSS est à peu près aussi faisable que d'apprendre à nager sur la terre ferme. Mais contrairement à la natation - qui, une fois maîtrisée, est une compétence qui reste avec vous pour la vie - la maîtrise du CSS est un processus qui ne se termine jamais vraiment puisque le CSS lui-même évolue continuellement.

Le défi est aggravé par les différences d'implémentation et de prise en charge des CSS entre les différents navigateurs (et même entre les différentes versions du même navigateur), ainsi que par les différents taux d'adoption des recommandations CSS. Depuis plus d'une décennie, les concepteurs et développeurs Web sont aux prises avec des rafales sporadiques et incohérentes de fonctionnalités CSS3 supplémentaires prises en charge dans chaque nouvelle version de navigateur.

Quoi qu'il en soit, la maîtrise du CSS est une nécessité absolue pour tout concepteur ou développeur Web solide. Cet article vous guidera à travers certains principes de mise en page CSS fondamentaux, des techniques CSS2 classiques aux dernières approches de mise en page en CSS3.

REMARQUE : Tous les exemples de code de cet article utilisent des éléments HTML5 et la syntaxe Sass. Le code de travail complet peut être cloné à partir de https://github.com/laureanoarcanio/css-layout-examples.

Cas d'utilisation

L'une des meilleures façons d'apprendre une technologie est d'avoir un cas d'utilisation spécifique que vous essayez de prendre en charge ou un problème particulier que vous essayez de résoudre. À cette fin, nous nous concentrerons sur un cas d'utilisation avec un ensemble spécifique d'exigences.

Notre cas d'utilisation consiste en une mise en page d'application Web avec un comportement dynamique. Il aura des éléments fixes sur la page tels qu'un en-tête, un pied de page, un menu de navigation et une sous-navigation, ainsi qu'une section de contenu défilable. Voici les exigences de mise en page spécifiques :

Disposition de base
- L'en-tête, le pied de page, le menu de navigation et la sous-navigation restent tous fixes sur le défilement
- Les éléments de navigation et de sous-navigation occupent tout l'espace vertical libre
- La section Contenu utilise tout l'espace libre restant sur la page et dispose d'une zone de défilement
Comportement dynamique
- Le menu de navigation n'affiche que les icônes par défaut, mais peut être développé pour afficher également du texte (et peut ensuite être réduit pour afficher à nouveau uniquement les icônes)
Variantes de mise en page
- Certaines pages ont une sous-navigation à côté du menu de navigation et d'autres pas

Tutoriel CSS utilisant les techniques CSS2 classiques

Pour commencer, voici le balisage HTML5 que nous utiliserons avec notre exemple d'implémentation utilisant le CSS classique :

 <body class="layout-classic"> <header></header> <nav></nav> <aside></aside> <main></main> <footer></footer> </body>

Positionnement fixe

En CSS2, nous pouvons obtenir les éléments fixes de la page (en-tête, pied de page, etc.) en utilisant un modèle de mise en page positionné qui utilise un positionnement fixe.

De plus, nous utiliserons la propriété CSS z-index pour nous assurer que nos éléments fixes restent "au-dessus" des autres contenus de la page. La propriété z-index spécifie l'ordre de pile d'un élément, où un élément avec un ordre de pile supérieur est toujours "au-dessus" d'un élément avec un ordre de pile inférieur. Notez que la propriété z-index ne fonctionne qu'avec des éléments positionnés . Pour notre exemple, nous utiliserons arbitrairement une valeur z-index de 20 (qui est supérieure à la valeur par défaut) pour nous assurer que nos éléments fixes restent visuellement au premier plan.

De plus, nous allons définir la propriété width sur 100 %, ce qui indique au navigateur d'utiliser tout l'espace disponible horizontalement pour l'élément.

 #header, #footer { position: fixed; width: 100%; z-index: 20; } #header { top: 0; height: 5em; } #footer { bottom: 0; height: 3em; }

OK, donc c'est l'en-tête et le pied de page. Mais qu'en est-il du #nav et du #subnav ?

Extension CSS

Pour #nav et #subnav , nous utiliserons une technique un peu plus sophistiquée appelée CSS Expansion , qui peut être utilisée lors du positionnement d'éléments fixes (c'est-à-dire à une position fixe sur la page) ou absolus (c'est-à-dire à une position spécifiée par rapport à son ancêtre le plus proche ou au bloc conteneur).

L'expansion verticale est obtenue en définissant les propriétés top et bottom d'un élément sur une valeur fixe, de sorte que l'élément s'étendra verticalement pour utiliser l'espace vertical restant en conséquence. Fondamentalement, ce que vous faites est de lier le haut de l'élément à une distance spécifique du haut de la page et le bas de l'élément à une distance spécifique du bas de la page, de sorte que l'élément se développe pour remplir tout l'espace vertical entre ces deux points.

De même, l'expansion horizontale est obtenue en définissant les propriétés left et right d'un élément sur une valeur fixe, de sorte que l'élément s'étendra horizontalement pour utiliser l'espace horizontal restant en conséquence.

Pour notre cas d'utilisation, nous devons utiliser l'expansion verticale.

 #nav, #subnav { position: fixed; top: 6em; /* leave 1em margin below header */ bottom: 4em; /* leave 1em margin above footer */ z-index: 20; } #nav { left: 0; width: 5em; } #subnav { left: 6em; /* leave 1em margin to right of nav */ width: 13em; }

Positionnement par défaut (statique)

La zone de contenu déroulante principale peut simplement s'appuyer sur le positionnement par défaut (statique), selon lequel les éléments s'affichent dans l'ordre dans lequel ils apparaissent dans le flux de documents. Étant donné que tout le reste de notre page est dans une position fixe, cet élément est le seul qui se trouve dans le flux de documents. Par conséquent, tout ce que nous devons faire pour le positionner correctement est de spécifier sa propriété margin pour éviter tout chevauchement avec l'en-tête, le pied de page et le nav/subnav fixes :

 #main { margin: 6em 0 4em 20em; }

Et avec cela, nous avons satisfait aux exigences de mise en page de base de notre cas d'utilisation en utilisant CSS2, mais nous devons encore satisfaire les exigences supplémentaires pour la fonctionnalité dynamique.

Comportement dynamique à l'aide des techniques CSS2 classiques

Les exigences stipulaient que notre menu de navigation n'afficherait par défaut que des icônes, mais pourrait également être étendu pour afficher du texte (et pourrait ensuite être réduit pour n'afficher à nouveau que des icônes).

Commençons par ajouter simplement 5em à la largeur du menu de navigation lorsqu'il est développé. Pour ce faire, nous créerons une classe CSS "étendue" que nous pourrons ajouter ou supprimer dynamiquement de l'élément de menu de navigation :

 #nav { left: 0; width: 5em; &.expanded { /* Sass notation */ width: 10em; } }

Voici un exemple de code JavaScript (dans cet exemple, nous utilisons jQuery) qui peut être utilisé pour basculer dynamiquement le menu de navigation entre le mode développé et réduit, en fonction du clic de l'utilisateur sur l'icône de bascule de navigation :

 $('.layout-classic #nav').on('click', 'li.nav-toggle', function() { $('#nav'').toggleClass('expanded'); });

Et avec cela, notre menu de navigation peut maintenant être développé ou réduit dynamiquement. Génial.

Eh bien, plutôt bien, mais pas tout à fait. Bien que le menu de navigation puisse maintenant se développer et se contracter, il ne fonctionne pas bien avec le reste de la page. Le menu de navigation étendu chevauche maintenant la sous-navigation, ce qui n'est certainement pas le comportement souhaité.

Cela révèle l'une des principales limites de CSS2 ; à savoir, il y a beaucoup trop de choses qui doivent être codées en dur avec des valeurs de position fixes. Par conséquent, pour les autres éléments de la page qui doivent être repositionnés pour s'adapter au menu de navigation étendu, nous devons définir des classes CSS "étendues" supplémentaires avec des valeurs de position encore plus fixes.

 #subnav { left: 6em; width: 13em; &.expanded { left: 11em; /* move it on over */ } } #main { margin: 6em 0 4em 20; z-index: 10; &.expanded { margin-left: 25em; /* move it on over */ } }

Nous devons ensuite étendre notre code JavaScript pour ajouter un ajustement dynamique de ces autres éléments également lorsque l'utilisateur clique sur la bascule de navigation :

 $('.layout-classic #nav').on('click', 'li.nav-toggle', function() { $('#nav, #subnav, #main').toggleClass('expanded'); });

OK, ça marche mieux.

Variations de mise en page à l'aide des techniques CSS2 classiques

Abordons maintenant l'exigence d'avoir des pages qui masquent le sous-menu de navigation. Plus précisément, nous souhaitons que le menu de sous-navigation soit masqué lorsque l'utilisateur clique sur l'icône "utilisateurs" dans la zone de navigation principale.

Donc d'abord, nous allons créer une nouvelle classe "hidden" qui applique display: none :

 .hidden { display: none; }

Et encore une fois, nous utiliserons JavaScript (jQuery) pour appliquer la classe CSS "cachée" à l'élément #subnav lorsque l'utilisateur clique sur l'icône des utilisateurs :

 $('#nav.fa-user').on('click', function() { $('#subnav').toggleClass('hidden'); });

Avec cet ajout, l'élément #subnav est correctement masqué lorsque l'utilisateur clique sur l'icône "utilisateurs", mais l'espace qu'il occupait reste inutilisé , plutôt que les autres éléments se développent pour utiliser l'espace libéré par l'élément #subnav .

Afin d'obtenir le comportement souhaité lorsque nous masquons l'élément #subnav , nous utiliserons l'un des sélecteurs CSS les moins connus, mais très utiles, connu sous le nom de sélecteur de frère adjacent .

Sélecteur CSS frère adjacent

Le sélecteur de frère adjacent vous permet de spécifier deux éléments, en sélectionnant uniquement les instances du deuxième élément qui suivent immédiatement le premier élément spécifié.

Par exemple, ce qui suit sélectionnera uniquement les éléments avec l'ID main qui suivent immédiatement un élément avec l'ID subnav :

 #subnav + #main { margin-left: 20em; }

L'extrait CSS ci-dessus définit la marge gauche de #main à 20em si et seulement si elle suit immédiatement un #subnav affiché.

Cependant, si #nav est développé (ce qui entraîne également l'ajout de la classe expanded à #main , sur la base de notre code précédent), nous déplaçons la marge gauche de #main à 25em.

 #subnav + #main.expanded { margin-left: 25em; }

Et, si #subnav est caché, nous déplaçons la marge gauche de #main jusqu'à 6em pour être juste à côté de #nav :

 #subnav.hidden + #main { margin-left: 6em; }

(Remarque : l'un des inconvénients de l'utilisation du sélecteur de frère adjacent est qu'il nous oblige à toujours avoir #subnav présent dans le DOM, qu'il soit affiché ou non.)

Enfin, si #subnav est masqué et que #nav est développé, nous définissons la marge gauche de #main à 11em :

 #subnav.hidden + #main.expanded { margin-left: 11em; }

Cela nous permet de relier les choses ensemble sans aucun code JavaScript lourd, mais nous pouvons également voir à quel point ce code peut devenir compliqué si nous ajoutons plus d'éléments à la page. Nous voyons encore une fois qu'avec CSS2, beaucoup de codage en dur des valeurs de position est nécessaire pour que les choses fonctionnent correctement.

Tirer parti de CSS3

CSS3 offre des fonctionnalités et des techniques de mise en page considérablement améliorées qui le rendent beaucoup plus facile à utiliser et beaucoup moins dépendant des valeurs codées en dur. CSS3 est intrinsèquement conçu pour prendre en charge un comportement plus dynamique et est, en ce sens, plus "programmable". Examinons certaines de ces nouvelles fonctionnalités en rapport avec notre cas d'utilisation.

Fonction CSS3 `calc()`

La nouvelle fonction CSS3 calc() peut être utilisée pour calculer dynamiquement les valeurs des propriétés CSS (notez cependant que la prise en charge varie selon les navigateurs). L'expression fournie à la fonction calc() peut être n'importe quelle expression simple combinant les opérateurs arithmétiques de base ( + , - , * , / ) en utilisant les règles de priorité des opérateurs standard.

L'utilisation de la fonction calc() peut aider à éviter une grande partie du codage en dur des valeurs requises par CSS2. Dans notre cas, cela nous permet de réaliser une expansion CSS de manière plus dynamique. Par exemple:

 #nav, #subnav { position: fixed; height: calc(100% - 10em); /* replaces */ z-index: 20; }

Avec la spécification de height ci-dessus utilisant la fonction calc() , nous obtenons le même résultat qu'en CSS2 avec top:6em et bottom:4em , mais d'une manière beaucoup plus flexible et adaptative, et sans avoir besoin de coder en dur la position du top et du bottom valeurs.

Disposition de la boîte flexible CSS3

Flexbox est une nouvelle mise en page introduite dans CSS3 (la prise en charge varie selon les navigateurs). La disposition de la boîte flexible simplifie l'organisation des éléments sur une page d'une manière qui se comporte de manière prévisible sur différentes tailles d'écran, résolutions et appareils. Il est donc particulièrement utile dans le cadre du responsive web design.

Les fonctionnalités clés incluent :

Le positionnement des éléments enfants est beaucoup plus facile et les mises en page complexes peuvent être réalisées plus simplement et avec un code plus propre.
Les éléments enfants peuvent être disposés dans n'importe quelle direction et peuvent avoir des dimensions flexibles pour s'adapter à l'espace d'affichage.
Les éléments enfants étendent automatiquement le contrat pour s'adapter à l'espace libre disponible.

Flexbox introduit son propre ensemble unique de termes et de concepts. Quelques-uns d'entre eux incluent:

Conteneur flexible. Un élément avec sa propriété display définie sur flex ou inline-flex qui sert d'élément conteneur pour les éléments flexibles.
Article flexible. Tout élément dans un conteneur flexible. (Remarque : le texte directement contenu dans un conteneur flexible est enveloppé dans un élément flexible anonyme.)
Haches . Chaque mise en page flexbox a une flex-directio qui désigne l' axe principal le long duquel les éléments flexibles sont disposés. L' axe transversal est alors l'axe perpendiculaire à l'axe principal.
Lignes. Les éléments flexibles peuvent être disposés sur une seule ligne ou sur plusieurs lignes selon la propriété flex-wrap .
Dimensions. Les équivalents flexbox de height et width sont main size et cross size , qui spécifient respectivement les tailles de l'axe principal et de l'axe transversal du conteneur flexible.

OK, donc avec cette brève introduction, voici le balisage alternatif que nous pouvons utiliser si nous utilisons une mise en page flexbox :

 <body class="layout-flexbox"> <header></header> <div class="content-area"> <nav></nav> <aside></aside> <main></main> </div> <footer></footer> </body>

Pour notre exemple de cas d'utilisation, notre mise en page principale (en-tête, contenu, pied de page) est verticale, nous allons donc configurer notre boîte flexible pour utiliser une disposition en colonnes :

 .layout-flexbox { display: flex; flex-direction: column; }

Bien que notre mise en page principale soit verticale, les éléments de notre zone de contenu (nav, subnav, main) sont disposés horizontalement. Chaque conteneur flexible ne peut définir qu'une seule direction (c'est-à-dire que sa disposition doit être horizontale ou verticale). Par conséquent, lorsque la mise en page nécessite plus que cela (un cas courant étant la mise en page d'une application), nous pouvons imbriquer plusieurs conteneurs les uns dans les autres, chacun avec une mise en page directionnelle différente.

C'est pourquoi nous avons ajouté un conteneur supplémentaire (que j'ai appelé content-area ) enveloppant #nav , #subnav et #main . De cette façon, la mise en page globale peut être verticale, tandis que le contenu de la zone de contenu peut être disposé horizontalement.

Maintenant, pour positionner nos éléments flexibles, nous allons utiliser la propriété flex qui est un raccourci pour flex: <flex-grow> <flex-shrink> <flex-basis>; . Ces trois propriétés flexibles sont celles qui déterminent la manière dont nos éléments flexibles répartissent l'espace libre restant entre eux dans le sens du flux, comme suit :

flex-grow : spécifie combien un élément peut croître par rapport au reste des éléments flexibles à l'intérieur du même conteneur
flex-shrink : spécifie comment un élément peut rétrécir par rapport au reste des éléments flexibles à l'intérieur du même conteneur
flex-basis : spécifie la taille initiale d'un élément (c'est-à-dire avant qu'il ne rétrécisse ou ne grossisse)

Conteneurs flexibles CSS : croisés ou principaux

Définir flex-grow et flex-shrink à zéro signifie que la taille de l'élément est fixe et qu'il ne grandira ni ne rétrécira pour s'adapter à l'espace libre disponible. Voici ce que nous faisons pour notre en-tête et notre pied de page puisqu'ils ont une taille fixe :

 #header { flex: 0 0 5em; } #footer { flex: 0 0 3em; }

Pour qu'un élément occupe tout l'espace libre disponible, définissez ses valeurs flex-grow et flex-shrink sur 1 et définissez sa valeur flex-basis sur auto . C'est ce que nous faisons pour la zone de contenu car nous voulons qu'elle occupe tout l'espace libre disponible.

Et comme nous l'avons déjà dit, nous voulons que les éléments à l'intérieur content-area soient disposés dans le sens des lignes, nous allons donc ajouter display: flex ; et flex-direction: row; . Cela fait de content-area un nouveau conteneur flexible pour #nav , #subnav et `#main.

Voici donc ce que nous obtenons pour le CSS pour content-area :

 .content-area { display: flex; flex-direction: row; flex: 1 1 auto; /* take up all available space */ margin: 1em 0; min-height: 0; /* fixes FF issue with minimum height */ }

Dans la zone de contenu, #nav et #subnav ont des tailles fixes, nous définissons donc simplement la propriété flex en conséquence :

 #nav { flex: 0 0 5em; margin-right: 1em; overflow-y: auto; } #subnav { flex: 0 0 13em; overflow-y: auto; margin-right: 1em; }

(Notez que j'ai ajouté overflow-y: hidden à ces spécifications CSS pour surmonter le contenu dépassant et dépassant la hauteur du conteneur. Chrome n'en a en fait pas besoin, contrairement à FireFox.)

#main occupera le reste de l'espace libre :

 #main { flex: 1 1 auto; overflow-y: auto; }

Tout cela a l'air bien, alors ajoutons maintenant notre comportement dynamique à cela et voyons comment cela se passe.

Le JavaScript est identique à ce que nous avions auparavant (sauf ici, la classe de conteneur d'éléments CSS que nous spécifions est layout-flexbox alors qu'avant c'était layout-classic ):

 $('.layout-flexbox #nav').on('click', 'li.nav-toggle', function() { $('#nav').toggleClass('expanded'); });

Nous ajoutons la classe expanded au CSS comme suit :

 #nav { flex: 0 0 5em; /* collapsed size */ margin-right: 1em; overflow-y: auto; &.expanded { flex: 0 0 10em; /* expanded size */ } }

Et voila !

Notez que cette fois, nous n'avons pas besoin d'informer les autres éléments du changement de largeur, car la disposition de la boîte flexible gère tout cela pour nous.

La seule chose qui reste alors est de cacher le sous-nav. Et devine quoi? Cela "fonctionne simplement" aussi, sans aucune modification supplémentaire, en utilisant le même code JavaScript qu'auparavant. Flexbox connaît l'espace libre et fait automatiquement fonctionner notre mise en page sans code supplémentaire. Plutôt cool.

Flexbox fournit également des moyens intéressants de centrer les éléments verticaux et horizontaux. Nous réalisons ici à quel point il est important pour un langage de présentation d'inclure la notion d'espace libre et à quel point notre code peut devenir évolutif en utilisant ce type de techniques. D'un autre côté, les concepts et la notation ici peuvent prendre un peu plus de temps à maîtriser que le CSS classique.

Disposition de la grille CSS3

Si la mise en page Flexbox est à la pointe de CSS3, alors la mise en page en grille peut être considérée comme à la pointe de la technologie. La spécification W3C est encore à l'état de brouillon et sa prise en charge des navigateurs est encore assez limitée. (Il est activé dans Chrome via l'indicateur "fonctionnalités expérimentales de la plate-forme Web" dans chrome://flags).

Cela dit, personnellement, je ne considère pas ce projet comme révolutionnaire. Au contraire, comme l'indiquent les principes de conception HTML5 : "Lorsqu'une pratique est déjà répandue parmi les auteurs, envisagez de l'adopter plutôt que de l'interdire ou d'inventer quelque chose de nouveau".

En conséquence, les grilles basées sur le balisage sont utilisées depuis longtemps, donc maintenant la mise en page de la grille CSS suit vraiment ce même paradigme, offrant tous ses avantages et bien plus encore dans la couche de présentation sans aucune exigence de balisage.

L'idée générale est d'avoir une disposition de grille prédéfinie, fixe ou flexible où nous pouvons positionner nos éléments. Comme la flexbox, elle fonctionne également sur le principe de l'espace libre et nous permet de définir des "directions" verticales et horizontales dans le même élément, ce qui apporte des avantages en termes de taille de code et de flexibilité.

La disposition en grille introduit 2 types de grilles ; à savoir, explicite et implicite . Pour plus de simplicité, nous allons nous concentrer sur les grilles explicites.

Comme flexbox, la mise en page Grid introduit son propre ensemble unique de termes et de concepts. Quelques-uns d'entre eux incluent:

Conteneur de grille. Un élément avec sa propriété d' display définie sur "grid" ou "inline-grid" dans lequel les éléments contenus sont disposés en se positionnant et en s'alignant sur une grille prédéfinie (mode explicite). La grille est un ensemble croisé de lignes de grille horizontales et verticales qui divisent l'espace du conteneur de grille en cellules de grille. Il existe deux ensembles de lignes de grille ; un pour définir les colonnes et un orthogonal pour définir les lignes.
Grille piste. L'espace entre deux lignes de grille adjacentes. Chaque piste de grille se voit attribuer une fonction de dimensionnement, qui contrôle la largeur ou la hauteur de la colonne ou de la rangée, et donc la distance entre ses lignes de grille de délimitation.
Cellule de la grille. L'espace entre deux rangées adjacentes et deux lignes de grille de colonnes adjacentes. C'est la plus petite unité de la grille qui peut être référencée lors du positionnement des éléments de la grille.
Longueur souple. Une dimension spécifiée avec l'unité fr , qui représente une fraction de l'espace libre dans le conteneur de la grille.

Esquisse de mise en page de la grille CSS

Voici le balisage alternatif que nous pouvons utiliser si nous utilisons une mise en page Grid :

 <body class="layout-grid"> <header></header> <nav></nav> <aside></aside> <main></main> <footer></footer> </body>

Notez qu'avec cette mise en page, nous n'avons pas besoin d'un wrapper supplémentaire pour la zone de contenu comme nous l'avons fait pour la flexbox, car ce type de mise en page nous permet de définir la désignation de l'espace des éléments dans les deux sens dans le même conteneur de grille.

Plongeons maintenant dans le CSS :

 .layout-grid { display: grid; grid-template-columns: auto 0 auto 1em 1fr; grid-template-rows: 5em 1em 1fr 1em 3em; }

Nous avons défini display: grid; sur notre conteneur. Les propriétés grid-template-columns et grid-template-rows sont chacune spécifiées comme une liste d'espaces entre les pistes de la grille. En d'autres termes, ces valeurs ne sont pas la position des lignes de grille ; ils représentent plutôt la quantité d'espace entre deux pistes.

Notez que les unités de mesure peuvent être spécifiées comme suit :

une longueur
un pourcentage de la taille du conteneur de grille
une mesure du contenu occupant la colonne ou la ligne, ou
une fraction de l'espace libre dans la grille

Donc avec grid-template-columns: auto 0 auto 1em 1fr; nous aurons:

1 piste définissant 2 colonnes de largeur auto (espace #nav )
1 gouttière de 0 (la marge pour #subnav est au niveau de l'élément, car elle peut être présente ou non, ainsi on évite d'avoir une double gouttière)
1 piste définissant 2 colonnes de largeur auto (espace #subnav )
1 gouttière de 1em
1 piste utilisant 1fr pour #main (prendra tout l'espace restant)

Ici, nous utilisons fortement la valeur auto pour la piste, ce qui nous permet d'avoir des colonnes dynamiques où la position et la taille des lignes sont définies par leur contenu maximum. (Nous devrons donc préciser les tailles des éléments #nav et #subnav , ce que nous ferons sous peu.)

De même, pour les lignes de lignes, nous avons grid-template-rows: 5em 1em 1fr 1em 3em; qui définit notre #header et #footer à fixer et tous les éléments entre pour utiliser l'espace libre restant tout en utilisant 1em gouttières.

Voyons maintenant comment nous plaçons les éléments réels à positionner dans notre grille définie :

 #header { grid-column: 1 / 6; grid-row: 1 / 2; } #footer { grid-column: 1 / 6; grid-row: 5 / 6; } #main { grid-column: 5 / 6; grid-row: 3 / 4; overflow-y: auto; }

Cela spécifie que nous voulons que notre en-tête soit entre les lignes de grille 1 et 6 (pleine largeur), et entre les lignes de grille 1 et 2 pour nos lignes. Idem pour le pied de page, mais entre les deux dernières lignes (plutôt que les deux premières). Et la zone principale est définie de manière appropriée pour l'espace qu'elle est censée occuper.

Notez que les propriétés grid-column et grid-row sont des raccourcis pour spécifier respectivement grid-column-start / grid-column-end et grid-row-start / grid-row-end .

OK, revenons à #nav et #subnav . Comme nous avons précédemment placé #nav et #subnav dans la piste avec des valeurs automatiques, nous devons spécifier la largeur de ces éléments (idem pour le mode étendu, nous modifions simplement sa largeur et la disposition de la grille s'occupe du reste).

 #nav { width: 5em; grid-column: 1 / 2; grid-row: 3 / 4; &.expanded { width: 10em; } } #subnav { grid-column: 3 / 4; grid-row: 3 / 4; width: 13em; /* track has gutter of 0, so add margin here */ margin-left: 1em; }

Alors maintenant, nous pouvons basculer notre #nav et également masquer/supprimer le #subnav et tout fonctionne parfaitement ! La disposition de la grille nous permet également d'utiliser des alias pour nos lignes, de sorte que la modification des grilles n'éclatera pas le code car il est mappé sur un nom et non sur une ligne de grille. J'attends avec impatience que cela soit plus largement pris en charge par plus de navigateurs.

Conclusion

Même avec les techniques CSS classiques, il y a beaucoup plus à faire que ce que de nombreux développeurs Web réalisent ou exploitent. Cela dit, une grande partie de cela peut être assez fastidieuse et peut impliquer un codage en dur des valeurs à plusieurs reprises dans une feuille de style.

CSS3 a commencé à fournir des techniques de mise en page beaucoup plus sophistiquées et flexibles qui sont beaucoup plus faciles à programmer et qui évitent une grande partie de l'ennui des spécifications CSS antérieures.

La maîtrise de ces techniques et paradigmes – à la fois pour CSS2 et CSS3 – est essentielle pour tirer parti de tout ce que CSS a à offrir afin d'optimiser à la fois l'expérience utilisateur et la qualité de votre code. Cet article ne représente vraiment que la pointe de l'iceberg de tout ce qu'il y a à apprendre et de tout ce qui peut être accompli avec la puissance et la flexibilité de CSS. Allez-y !

En relation : * Explorer SMACSS : architecture évolutive et modulaire pour CSS *