DEVELOPPEMENT WEB ET MULTIMEDIA AU 2022-2023

Chapitre 7: La mise en page avec CSS

Introduction
Il y a plusieurs façons de mettre en page un site. Au fil du temps, plusieurs techniques ont
existé :

- Au début, les webmasters utilisaient des tableaux HTML pour faire la mise en page.
- Puis, CSS est apparu et on a commencé à faire une mise en page à l'aide de la propriété
float.
- Cette technique avait des inconvénients. Une autre, plus pratique, a consisté à créer des
éléments de type inline-block sur la page.
- Aujourd'hui, il existe deux nouvelles techniques permettant la mise en page en CSS :
CSS Grid Layout et Flexbox.

Dans ce chapitre on va aborder la technique des grilles CSS (CSS Grid Layout) ainsi que les
Media Query permettant de rendre les pages responsives.

I. Les bases
CSS Grid Layout (ou « Grid ») est un système de layout bidimensionnel basé sur les grilles qui a
pour ambition ni plus ni moins que de révolutionner la façon dont nous concevons les
interfaces utilisateur basées sur des grilles.

Il est facile de se lancer dans Grid. Il suffit de définir un élément container comme une grille,
via la propriété display:grid, de régler les dimensions des colonnes et des rangées avec
grid-template-columns et grid-template-rows et de placer ses éléments enfants dans la grille avec
grid-column et grid-row.

II. Terminologie importante

Avant de plonger dans les concepts de Grid, il est important de bien comprendre la
terminologie.

1. Container Grid
C'est l'élément sur lequel s'applique display: grid. C'est donc le parent direct de tous les items
grid. Dans cet exemple, container est le container grid.

ISET BIZERTE 1
DEVELOPPEMENT WEB ET MULTIMEDIA AU 2022-2023

Exemple

<div class="container">
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
</div>
2. Item Grid
L'enfant (c'est-à-dire le descendant direct) du container grid. Ici, les éléments item sont des
items grid, mais ce n'est pas le cas de sub-item.

Exemple

<div class="container">
<div class="item"></div>
<div class="item">
<p class="sub-item"></p>
</div>
<div class="item"></div>
</div>
3. Ligne de Grille
Les lignes qui divisent et constituent la structure de la grille. Elles peuvent être verticales («
lignes de grille de colonnes ») ou horizontales (« lignes de grille de rangées ») et sont situées
d'un côté ou de l'autre d'une rangée ou d'une colonne. Ici, la ligne jaune est un exemple de
ligne de grille de colonne (column grid line).

4. Piste de Grille
La piste (ou plage) de grille (grid track) est l'espace situé entre deux lignes de grille adjacentes,
en d'autres termes ce sont les colonnes ou les rangées de la grille. Ci-dessous, la piste de grille
est située entre les deuxième et troisième lignes de rangée.

ISET BIZERTE 2
DEVELOPPEMENT WEB ET MULTIMEDIA AU 2022-2023

5. Cellule de Grille
La cellule de grille (grid cell) est l'espace situé entre deux lignes de grille adjacentes de rangée et
deux lignes de grille adjacentes de colonne. C'est une « unité » de la grille. Ci-dessous, la cellule
de grille est entre les lignes de grille de rangée 1 & 2, et les lignes de grille de colonne 2 & 3. Dit
autrement, une cellule est l'intersection d'une rangée et d'une colonne.

6. Zone de Grille
La zone de grille (grid area) est l'espace entouré par quatre lignes de grille. Une zone de grille
peut comprendre n'importe quel nombre de cellules. Voici la zone de grille entre les lignes de
grille de rangée 1 & 3 et les lignes de grille de colonne 1 & 3.

III. Les Propriétés Grid

Nous allons voir d'abord les propriétés du parent (le grid container), puis celles des enfants (les
grid items).

NB : Dans ce chapitre, nous allons citer les propriétés les plus importantes. Pour plus de détails
vous pouvez consulter les références à la fin de ce chapitre.

ISET BIZERTE 3
DEVELOPPEMENT WEB ET MULTIMEDIA AU 2022-2023

1. Grid Container
C'est l'élément sur lequel s'applique display: grid. C'est donc le parent direct de tous les items
grid. Dans cet exemple, container est le container grid.

a. display
Définit l'élément en tant que container grid et établit un nouveau contexte de formatage de son
contenu.

Valeurs :
 grid : génère une grille de niveau bloc ;

Exemple
.container{
display: grid;
}
b. grid-template columns, grid-template-rows
Définissent les colonnes et rangées de la grille via une liste de valeurs séparées par un espace.
Les valeurs représentent la dimension de la piste (track) et l'espace entre les pistes représente la
ligne de grille.

Valeurs :
 <track-size> : peut être une longueur, un pourcentage, ou une fraction de l'espace libre
dans la grille (via l'unité fr) ;
 <line-name> : un nom arbitraire choisi par vous ;

Syntaxe
.container {
grid-template-columns: <track-size> ... | <line-name> <track-size> ... ;
grid-template-rows: <track-size> ... | <line-name> <track-size> ... ;
}
Exemple 1:
. container {
Display: grid;
grid-template-columns: 40px 50px auto 50px 40px;
}
.item {
border: 1px solid black;
height: 100px;
}

ISET BIZERTE 4
 DEVELOPPEMENT WEB ET MULTIMEDIA AU 2022-2023

40px 50px auto 50px 40px

Exemple 2 :
. container {
Display: grid;
grid-template-columns: 2fr 2fr 2fr;
grid-template-rows: 50px 20px;
}
.item {
border: 1px solid black;
}
2fr 2fr 2fr

50px

20px

L'unité fr vous permet de spécifier la dimension d'une piste comme une fraction de l'espace
libre du container grid.

Exemple 3 : Si votre définition contient des parties qui se répètent, vous pouvez utiliser la
notation repeat() pour alléger le code.
. container {
Display: grid;
grid-template-columns: repeat(3, 2fr); /* au lieu de 2fr 2fr 2fr */
…
}
c. grid-column-gap et grid-row-gap
Spécifie la dimension des lignes de grille. On peut les voir comme des largeurs de gouttières
entre les colonnes ou les rangées.

Valeurs :
 <line-size> : une longueur

Syntaxe
.container {
grid-column-gap: <line-size>;
grid-row-gap: <line-size>;
}

ISET BIZERTE 5
 DEVELOPPEMENT WEB ET MULTIMEDIA AU 2022-2023

Exemple
.container{
Display: grid;
grid-template-columns: 2fr 2fr 2fr;
grid-template-rows: 50px 20px;
grid-column-gap: 10px;
grid-row-gap: 15px;
}

2fr 2fr 2fr

50px

15px

20px

10px
Les gouttières sont créées uniquement entre les colonnes ou les rangées, pas autour.
d. grid-gap
C'est un raccourci de grid-column-gap et grid-row-gap.

Valeurs :
 <grid-column-gap><grid-row-gap> : une longueur

Syntaxe
.container {
grid-gap: <grid-column-gap> <grid-row-gap>;
}

Exemple
.container{
Display: grid;
grid-template-columns: 2fr 2fr 2fr;
grid-template-rows: 50px 20px;
grid-gap: 10px 15px;
}
Si aucun grid-row-gap n'est spécifié, il prend la même valeur que grid-column-gap.

e. justify-items
Aligne le contenu à l'intérieur d'un item grille, le long de l'axe des colonnes (par opposition à
align-items qui les aligne le long de l'axe des rangées). Cette valeur s'applique à tous les items
grid à l'intérieur du container.

ISET BIZERTE 6
DEVELOPPEMENT WEB ET MULTIMEDIA AU 2022-2023

Valeurs :
 start : aligne le contenu à partir de la gauche de la zone de grille ;
 end : aligne le contenu en partant de la droite de la zone de grille ;
 center : aligne le contenu au centre de la zone de grille ;
 stretch : remplit toute la largeur de la zone de grille (c'est la valeur par défaut).

Syntaxe
.container {
justify-items: start | end | center | stretch;
}

Exemples
.container{
justify-items: start;
}

.container{
justify-items: end;
}

.container{
justify-items: center;
}

.container{
justify-items: stretch;
}

f. align-items
Aligne le contenu situé à l'intérieur d'un item de grille le long de l'axe des rangées (par
opposition à justify-items qui l'aligne le long de l'axe des colonnes). Cette valeur s'applique à
tous les items grid à l'intérieur du container.

Valeurs :
 start : aligne le contenu à partir du sommet de la zone de grille ;
 end : aligne le contenu en partant du bas de la zone de grille ;
 center : aligne le contenu au centre de la zone de grille ;
 stretch : remplit toute la hauteur de la zone de grille (c'est la valeur par défaut).

Syntaxe
.container {
align-items: start | end | center | stretch;
}

ISET BIZERTE 7
DEVELOPPEMENT WEB ET MULTIMEDIA AU 2022-2023

Exemples
.container{
align-items: start;
}

.container{
align -items: end;
}

.container{
align -items: center;
}

.container{
align -items: stretch;
}

g. justify-content
Parfois la dimension totale de votre grille semblera inférieure à la dimension de son container
grid. Cela peut arriver si tous les items grid sont dimensionnés avec des unités non-flexibles
comme px. Dans ce cas, vous pouvez régler l'alignement de la grille à l'intérieur du container.
Cette propriété aligne la grille le long de l'axe des colonnes.

Valeurs :
 start : aligne la grille à partir de la gauche de la grille container (container grid);
 end : aligne la grille à partir de la droite de la grille container;
 center : aligne la grille au centre de la grille container;
 stretch : redimensionne les items pour permettre à la grille de remplir toute la largeur
de la grille container.
 space-around : place un espace égal entre chaque item de grille, et un demi-espace aux
extrémités ;
 space-between : place un espace égal entre chaque item de grille, et aucun espace aux
extrémités ;
 space-evenly : place un espace égal entre chaque item de grille, y compris aux
extrémités.

Syntaxe
.container {
justify-content: start | end | center | stretch | space-around | space-between | space-evenly;
}

ISET BIZERTE 8
DEVELOPPEMENT WEB ET MULTIMEDIA AU 2022-2023

Exemples
.container{
justify-content: start;
}

.container{
justify-content: end;
}

.container{
justify-content: center;
}

.container{
justify-content: stretch;
}

.container{
justify-content: space-between;
}

.container{
justify-content: space-evenly;
}

h. align-content
Parfois la dimension totale de votre grille semblera inférieure à la dimension de son container
grid. Cela peut arriver si tous les items grid sont dimensionnés avec des unités non-flexibles
comme px. Dans ce cas, vous pouvez régler l'alignement de la grille à l'intérieur du container.
Cette propriété aligne la grille le long de l'axe des rangées.

Valeurs :
 start : aligne la grille à partir du sommet de la grille container (container grid);
 end : aligne la grille à partir du bas de la grille container;
 center : aligne la grille au centre de la grille container;
 stretch : redimensionne les items pour permettre à la grille de remplir toute la hauteur
de la grille container.
 space-around : place un espace égal entre chaque item de grille, et un demi-espace aux
extrémités ;

ISET BIZERTE 9
DEVELOPPEMENT WEB ET MULTIMEDIA AU 2022-2023

 space-between : place un espace égal entre chaque item de grille, et aucun espace aux
extrémités ;
 space-evenly : place un espace égal entre chaque item de grille, y compris aux
extrémités.

Syntaxe
.container {
align-content: start | end | center | stretch | space-around | space-between | space-evenly;
}

Exemples

.container{ .container{
align-content: start; align-content: end;
} }

.container{ .container{
align-content: center; align-content: stretch;
} }

.container{ .container{
align-content: space-around; align-content: space-between;

ISET BIZERTE 10
DEVELOPPEMENT WEB ET MULTIMEDIA AU 2022-2023

} }

.container{
align-content: space-evenly;
}

2. Grid Items
Dans cette partie, nous allons citer juste les propriétés les plus importantes. Pour plus de détails
vous pouvez consulter les références à la fin de ce chapitre

a. justify-self
Aligne le contenu d'un item de grille sur l'axe des colonnes (par opposition à align-self qui
l'aligne le long de l'axe des rangées). Cette propriété s'applique au contenu d'un item de grille et
uniquement à lui.

Valeurs :
 start : aligne le contenu sur la gauche de la zone de grille ;
 end : aligne le contenu sur la droite de la zone de grille ;
 center : aligne le contenu au centre de la zone de grille ;
 stretch : Remplit toute la largeur de la zone de grille (c'est la valeur par défaut).

Syntaxe
.item {
justify-self: start | end | center | stretch;
}

Exemples

ISET BIZERTE 11
DEVELOPPEMENT WEB ET MULTIMEDIA AU 2022-2023

.item{
justify-self: start;
}

. item {
justify- self: end;
}

. item {
justify- self: center;
}

. item {
justify- self: stretch;
}

b. align-self
Aligne le contenu d'un item de grille sur l'axe des rangées (par opposition à justify-self qui
l'aligne le long de l'axe des colonnes). Cette propriété s'applique au contenu d'un item de grille
et uniquement à lui.

Valeurs :
 start : aligne le contenu sur le sommet de la zone de grille ;
 end : aligne le contenu sur le bas de la zone de grille ;
 center : aligne le contenu au centre de la zone de grille ;
 stretch : Remplit toute la hauteur de la zone de grille (c'est la valeur par défaut).

Syntaxe
.item {
align-self: start | end | center | stretch;
}

Exemples

ISET BIZERTE 12
DEVELOPPEMENT WEB ET MULTIMEDIA AU 2022-2023

.item{
justify-self: start;
}

. item {
justify- self: end;
}

. item {
justify- self: center;
}

. item {
justify- self: stretch;
}

IV. Les Media-Query

La spécification CSS3 Media Queries définit les techniques pour l'application de feuilles de
styles en fonction des périphériques de consultation utilisés pour du HTML

Responsive Web Design = Adapter dynamiquement le design à l'aide de CSS.

Il s’agit d’associer des règles CSS complémentaires pour l'impression, modifiant la mise en
page, favorisant tel élément ou faisant disparaître un autre inutile à la sortie sur papier, par
exemple un menu de navigation.

1. La règle @media
Ces directives peuvent parfaitement être intégrées au sein même d'une feuille de style grâce à
une règle @media suivie directement du type.

@media print { Lors de l’impression

#menu, #footer, aside {
display:none;
} Ces éléments ne s’afficheront pas
body {
font-size:120%;
color:black; On augmente la taille du texte
}
}
Avec une couleur de texte noire

L'attribut media peut prendre (depuis CSS2) les valeurs suivantes :

ISET BIZERTE 13
DEVELOPPEMENT WEB ET MULTIMEDIA AU 2022-2023

Media Signification
screen écrans
handheld Périphériques mobiles ou de petite taille
print Impression
speech Synthèses vocales
braille Plages braille
embossed Imprimantes braille
projection Projecteurs (ou présentations avec slides)
tty Terminal
tv Téléviseur
all Tous les précédents

2. Syntaxe des Media Queries CSS3

Une media query est une expression dont la valeur est toujours vraie ou fausse.

Il suffit d'associer les différentes déclarations possibles avec un opérateur logique pour définir
l'ensemble des conditions à réunir pour l'application des styles.

Les opérateurs logiques peuvent être :

 and : "et",
 only : "uniquement"
 not : "non".

Pour obtenir l'équivalent du "ou", il suffit d'énumérer différentes media queries à la suite,
séparées par des virgules : si l'une d'entre elles est valable, alors l'ensemble de la règle sera
appliqué.

Exemple 1 : Ecran de largeur inférieure à 640 pixels.

@media screen and (max-width: 640px) {
.bloc {
display: block;
clear: both;
}
}
Exemple 2 : Ecran dont la résolution en largeur est comprise entre 200 et 640 pixels.
@media screen and (min-width: 200px) and (max-width: 640px) {
.bloc {
display: block;
clear: both;
}
}
3. Fonctionnalités

ISET BIZERTE 14
DEVELOPPEMENT WEB ET MULTIMEDIA AU 2022-2023

La plupart des critères (ou fonctionnalités) peuvent être préfixés par min- et max- lorsqu'elles
acceptent des valeurs numériques pour définir des valeurs minimales ou maximales à respecter.

Critère Signification
color support de la couleur (bits/pixel)
device-aspect-ratio ratio du périphérique de sortie (par exemple 16/9)
aspect-ratio ratio de la zone d'affichage
device-height dimension en hauteur du périphérique
device-width dimension en largeur du périphérique
scan type de balayage des téléviseurs (progressive ou interlace)
grid périphérique bitmap ou grille (ex : lcd)
height dimension en hauteur de la zone d'affichage
width dimension en largeur de la zone d'affichage
monochrome périphérique monochrome ou niveaux de gris (bits/pixel)
orientation orientation du périphérique (portait ou landscape)
resolution résolution du périphérique (en dpi, dppx, ou dpcm)

Les dimensions pourront être évaluées avec des unités (px, em). Les ratio avec des fractions
(entier/entier). Une résolution sera définie en dpi (points par pouce) ou en dpcm (points par
centimètres).


Liens :
 https://la-cascade.io/css-grid-layout-guide-complet/ CSS Grids
 https://css.developpez.com/tutoriels/css-guide-complet/ CSS Grids
 https://www.alsacreations.com/article/lire/930-css3-media-queries.html Media Queries
 https://openclassrooms.com/fr/courses/1603881-apprenez-a-creer-votre-site-web-avec-html5-et-
css3/3298561-la-mise-en-page-avec-flexbox Flexbox

ISET BIZERTE 15