La mise en page avec CSS

148
 Les techniques de mise en page

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.
149
 Terminologie

 Grid container
 Grid Item
 Grid line : ligne de grille
 Grid Track : piste de grille
 Grid cell: cellule de grille
 Grid area: zone de grille

150
 CSS Grid Layout

CSS Grid Layout (ou « Grid »)

- est un système de layout bidimensionnel basé sur les grilles
- Il sert à concevoir 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.

151
 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.

<div class="container">
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
</div>

152
 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">
<div class="sub-item"></div>
</div>
<div class="item"></div>
</div>

153
 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).

154
 Piste de Grille

- La piste (ou plage) de grille (grid track)

- est l'espace situé entre deux lignes de grille adjacentes,
- 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.

155
 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.
- une cellule est l'intersection d'une rangée et d'une colonne.

156
 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.

157
Les Propriétés Grid

Grid container
Les propriétés
du
Grid item

158
Les propriétés du grid container

Grid-template- Grid-template- Grid-column-

Display
columns rows gap

Align-items
Grid-row-gap Grid-gap Justify-items

Justify-content Align-content

159
 Les propriétés du grid container
display

- 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; }

160
 Les propriétés du grid container
grid-template columns, , grid-template-rows

- Elles 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.
- Exemple 1:
.container {
Display: grid;
grid-template-columns: 40px 50px auto 50px 40px;
}
.item {
border: 1px solid black;
height: 100px; }

161
 Les propriétés du grid container
grid-template columns, , grid-template-rows

- Exemple 2:
.container {
Display: grid;
grid-template-columns: 2fr 2fr 2fr; /* ou repeat(3, 2fr)*/
grid-template-rows: 50px 20px;
}
.item {
border: 1px solid black;
}

Remarque : L'unité fr vous permet de spécifier la dimension d'une piste comme une fraction de l'espace
libre du container grid.
162
 Les propriétés du grid container
. 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.
- Exemple
.container{ Display: grid;
grid-template-columns: 2fr 2fr 2fr;
grid-template-rows: 50px 20px;
grid-column-gap: 10px;
grid-row-gap: 15px; }

NB: Les gouttières sont créées uniquement entre les colonnes ou les rangées, pas autour.
163
 Les propriétés du grid container
grid-gap

C'est un raccourci de grid-column-gap et grid-row-gap.

Syntaxe :
.container {
grid-gap:<grid-gap-column> <grid-gap-row> ; }
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.
164
 Les propriétés du grid container
justify-items

- Aligne le contenu à l'intérieur d'un item grille, le long de l'axe des colonnes.
- Cette valeur s'applique à tous les items grid à l'intérieur du container.
- Valeurs possibles :
- 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).

165
 Les propriétés du grid container
Justify-items

Code Affichage
.container{
justify-items: start; }

.container{
justify-items: end; }

.container{
justify-items: center;
}
.container{
justify-items: stretch;
}
166
 Les propriétés du grid container
Align-items

- Aligne le contenu situé à l'intérieur d'un item de grille le long de l'axe

des rangées
- par opposition à align-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).

167
 Les propriétés du grid container

Code Affichage
.container{
align-items: start; }

.container{
align-items: end; }

.container{
align-items: center; }

.container{
align-items: stretch; }

168
 Les propriétés du grid container
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;
- 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 ; 169
- space-evenly : place un espace égal entre chaque item de grille, y compris aux
 Les propriétés du grid container
Justify-content

Code Affichage

.container{
align-content: start; }

.container{
align-content: end; }

170
 Les propriétés du grid container
Justify-content

Code Affichage
.container{
align-content: center; }

.container{
align-content: stretch;
}

171
 Les propriétés du grid container
Justify-content

Code Affichage
.container{
align-content: space-around; }

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

172
 Les propriétés du grid container
Justify-content

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

173
Les propriétés du grid item

Justify-self Align-self

174
 Les propriétés du grid item
Justify-self

- Aligne le contenu d'un item de grille sur 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 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).
175
 Les propriétés du grid item
Justify-self

Code Affichage
.item{
justify-self: start; }

.item{
justify-self: end; }

176
 Les propriétés du grid item
Justify-self

Code Affichage
.item{
justify-self: center; }

.item{
justify-self: stretch; }

177
 Les propriétés du grid item
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).

178
 Les propriétés du grid item
align-self

Code Affichage
.item{
align-self: start; }

.item{
align-self: end; }

179
 Les propriétés du grid item
align-self

Code Affichage
.item{
align-self: center; }

.item{
align-self: stretch; }

180
 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.

181
 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.

182
La règle @media

183
 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é. 184
 Syntaxe des Media Queries CSS3

Ecran de largeur inférieure à 640 pixels.

@media screen and (max-width: 640px) {

.bloc {
display: block;
}

185
 Syntaxe des Media Queries CSS3

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;
}
}

186
 Syntaxe des Media Queries CSS3
- 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.

187