blob: 54a96e3f3ac5c1173eb959a41f5147a1a0af3700 (
plain)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
|
---
title: Axe de grille
slug: Glossary/Grid_Axis
tags:
- CSS
- Glossaire
- Grilles
translation_of: Glossary/Grid_Axis
original_slug: Glossaire/Axe_de_grille
---
<p><span id="result_box" lang="fr"><span>La grille CSS est une méthode de mise en page bidimensionnelle permettant une présentation du contenu en lignes et colonnes.</span> <span>Par conséquent, dans toute grille, nous avons deux axes.</span> <span>L'axe du "bloc" ou de la colonne et l'axe "en ligne" ou de la ligne.</span></span></p>
<p><span id="result_box" lang="fr"><span>C'est sur ces axes que les items peuvent être alignés et justifiés en utilisant les propriétés définies dans</span></span> <a href="https://developer.mozilla.org/fr/docs/Web/CSS/CSS_Grid_Layout/Alignement_des_bo%C3%AEtes_avec_les_grilles_CSS">les spécifications de l'alignement des boîtes</a>.</p>
<p>En CSS l'axe des colonnes (ou des blocs) est l'axe<span id="result_box" lang="fr"><span> utilisé lors de la disposition des blocs de texte</span></span> . Si vous avez 2 paragraphes et travaillez de droite à gauche, <span id="result_box" lang="fr"><span>du haut vers le bas, ils s'alignent les uns au-dessus des autres, sur l'axe du bloc.</span></span></p>
<p><img alt="Diagram showing the block axis in CSS Grid Layout." src="https://mdn.mozillademos.org/files/14775/7_Block_Axis.png" style="height: 306px; width: 940px;"></p>
<p><span id="result_box" lang="fr"><span>L'axe de la ligne (ou en ligne) parcourt l'axe des blocs et représente la direction dans laquelle le texte est déployé.</span> <span>Ce sont nos lignes dans la mise en page des grilles CSS.</span></span></p>
<p><img alt="Diagram showing the inline axis in CSS Grid Layout." src="https://mdn.mozillademos.org/files/14773/7_Inline_Axis.png" style="height: 306px; width: 940px;"></p>
<p>La direction physique de ces axes peut changer en fonction du <a href="https://developer.mozilla.org/fr/docs/Web/CSS/CSS_Grid_Layout/Les_grilles_CSS_les_valeurs_logiques_les_modes_d_%C3%A9criture">mode d'écriture</a> du document.</p>
<h2 id="En_apprendre_plus">En apprendre plus</h2>
<h3 id="En_lire_plus">En lire plus</h3>
<ul>
<li>Guide des grilles CSS : <em><a href="https://developer.mozilla.org/fr/docs/Web/CSS/CSS_Grid_Layout/Les_concepts_de_base">Les concepts de base des grilles CSS</a></em></li>
<li>Guide des grilles CSS : <em><a href="https://developer.mozilla.org/fr/docs/Web/CSS/CSS_Grid_Layout/Alignement_des_bo%C3%AEtes_avec_les_grilles_CSS">L'alignement des boîtes avec les grilles CSS</a></em></li>
<li>Guide des grilles CSS : <em><a href="https://developer.mozilla.org/fr/docs/Web/CSS/CSS_Grid_Layout/Les_grilles_CSS_les_valeurs_logiques_les_modes_d_%C3%A9criture">Les grilles CSS, les valeurs logiques et les modes d'écriture</a></em></li>
</ul>
|
