path: root/files/fr/learn/css/css_layout/grids/index.html

---
title: Grilles
slug: Learn/CSS/CSS_layout/Grids
tags:
  - Apprendre
  - Article
  - CSS
  - Codage
  - Didacticiel
  - Débutant
  - Guide
  - Mise en page
  - Trames
  - Trames CSS
  - quadrillage du design
  - structure du quadrillage
  - système de trames
translation_of: Learn/CSS/CSS_layout/Grids
original_slug: Apprendre/CSS/CSS_layout/Grids
---
<div>{{LearnSidebar}}</div>

<div>{{PreviousMenuNext("Learn/CSS/CSS_layout/Flexbox", "Learn/CSS/CSS_layout/Floats", "Learn/CSS/CSS_layout")}}</div>

<p>« CSS Grid Layout » (Trames avec les CSS) est un système de mise en page bidimensionnel. Il vous permet de disposer les contenus en lignes et en colonnes ; il possède de nombreuses fonctionnalités simplifiant la construction de mises en page complexes. Cet article vous indique tout ce que vous devez savoir pour commencer une mise en page avec une trame.</p>

<table class="standard-table">
 <tbody>
  <tr>
   <th scope="row">Prérequis :</th>
   <td>Les fondamentaux du HTML (étudiez <a href="/fr/Apprendre/HTML/Introduction_%C3%A0_HTML">Introduction au HTML</a>) et une idée de la manière dont la CSS fonctionne (étudiez <a href="/fr/Apprendre/CSS/Introduction_à_CSS">Introduction aux CSS</a> et <a href="/fr/Apprendre/CSS/styliser_boites">Styles de boîtes</a>).</td>
  </tr>
  <tr>
   <th scope="row">Objectif :</th>
   <td>Comprendre les concepts fondamentaux sous-jacents de la disposition en trame et comment la mettre en œuvre en utilisant « CSS Grid ».</td>
  </tr>
 </tbody>
</table>

<h2 id="Quest_quune_disposition_en_trame">Qu'est qu'une disposition en trame ?</h2>

<p>Une trame est simplement un ensemble de lignes horizontales et verticales créant un quadrillage dans lequel nous pouvons agencer les éléments à afficher. Elles nous aident à créer des compositions dans lesquelles les éléments ne sautent pas ou ne changent pas de largeur au fur et à mesure que nous nous déplaçons d'une page à l'autre, ce qui assure une plus grande cohérence des sites Web.</p>

<p>La trame est constituée généralement de <strong>rangées</strong> (<strong>colonnes</strong> ou <strong>lignes)</strong>. L'espace entre chaque ligne ou colonne est communément appelé <strong>gouttière</strong>.</p>

<p><img alt="Schéma du quadrillage" src="grille.png"></p>

<h2 id="Création_dune_trame_CSS">Création d'une trame CSS</h2>

<p>Après avoir décidé le maillage voulu pour votre design, vous pouvez utiliser « CSS Grid Layout » pour créer une trame avec la CSS et y placer des éléments. Nous examinerons d'abord les caractéristiques de base de « Grid Layout » (disposition en quadrillage), puis nous explorerons comment créer un système de trame simple pour le projet.</p>

<h3 id="Définition_dune_trame">Définition d'une trame</h3>

<p>Pour débuter, téléchargez et ouvrez <a href="https://github.com/mdn/learning-area/blob/master/css/css-layout/grids/0-starting-point.html">le fichier de départ</a> dans l'éditeur de texte et dans le navigateur. Vous y verrez un exemple constitué d'un conteneur avec quelques enfants. Par défaut, ils sont présentés suivant le cours normal : les boîtes s'affichent donc accolées les unes au dessous des autres. Nous travaillerons avec ce fichier dans la première partie de la leçon ; nous y introduirons des changements et observerons les modifications induites dans le comportement du maillage.</p>

<p>Pour définir un tramage, on affecte la valeur <code>grid</code> à la propriété {{cssxref("display")}}. De la même manière qu'avec Flexbox, nous basculons ainsi en « Grid Layout » (disposition en quadrillage) ; tous les enfants directs du conteneur deviennent des éléments de la maille. Ajoutez ceci à la CSS du fichier :</p>

<pre class="brush: css">.container {
    display: grid;
}</pre>

<p>Contrairement au cas de Flexbox, il n'y a sur le champ aucune différence pour les éléments. Déclarer <code>display: grid</code> fournit une chaîne à un seul fil et, donc, les éléments continuent à s'afficher juxtaposés comme dans un cours normal.</p>

<p>Pour voir quelque chose qui ressemble plus à un quadrillage, nous devons ajouter quelques fils de chaîne à la trame. Mettons trois colonnes de 200 pixels — vous pouvez utiliser n'importe quelle unité de taille ou bien un pourcentage pour créer ces rangées en colonne.</p>

<pre class="brush: css">.container {
    display: grid;
    grid-template-columns: 200px 200px 200px;
}</pre>

<p>Ajoutons cette déclaration dans nos règles CSS, puis actualisons la page : nous voyons que les éléments ont été arrangés et placés chacun dans une cellule du quadrillage ainsi créé.</p>

<pre class="brush: css hidden">body {
  width: 90%;
  max-width: 900px;
  margin: 2em auto;
  font: .9em/1.2 Arial, Helvetica, sans-serif;
}

.container &gt; div {
  border-radius: 5px;
  padding: 10px;
  background-color: rgb(207,232,220);
  border: 2px solid rgb(79,185,227);
}          </pre>

<pre class="brush: html hidden">&lt;div class="container"&gt;
 &lt;div&gt;Un&lt;/div&gt;
 &lt;div&gt;Deux&lt;/div&gt;
 &lt;div&gt;Trois&lt;/div&gt;
 &lt;div&gt;Quatre&lt;/div&gt;
 &lt;div&gt;Cinq&lt;/div&gt;
 &lt;div&gt;Six&lt;/div&gt;
 &lt;div&gt;Sept&lt;/div&gt;
&lt;/div&gt; </pre>

<pre class="brush: css">.container {
  display: grid;
  grid-template-columns: 200px 200px 200px;
} </pre>

<p>{{ EmbedLiveSample('Définition_dune_trame', '100%', 400) }}</p>

<h3 id="Trames_adaptables_avec_lunité_«_fr_»">Trames adaptables avec l'unité « fr »</h3>

<p>En plus de créer des fils de chaîne en unités de longueur ou de pourcentage, nous pouvons utiliser l'unité « fr » pour moduler la taille des lignes et colonnes du quadrillage. Cette unité représente une fraction de l'espace disponible du conteneur de trame.</p>

<p>En changeant la liste des chaînes par la suivante, on crée trois chaînes de <code>1fr</code>.</p>

<pre class="brush: css">.container {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
}</pre>

<p>Vous avez maintenant des chaînes de trame adaptables. L'espace est distribué en proportion de la valeur donnée à l'unité <code>fr</code> ; vous pouvez donc affecter des valeurs positives différentes à chaque piste. Par exemple, si vous changez la définition ainsi :</p>

<pre class="brush: css">.container {
    display: grid;
    grid-template-columns: 2fr 1fr 1fr;
}</pre>

<p>La première chaîne obtient <code>2fr</code> de l'espace disponible et les deux autres <code>1fr</code> ; la première chaîne sera plus large. Il est possible de mélanger des unités <code>fr</code> et des largeurs fixes pour les chaînes — dans ce cas, l'espace nécessaire aux chaînes de largeur fixée est réservé avant la distribution proportionnelle de l'espace restant aux autres chaînes.</p>

<pre class="brush: css hidden">body {
  width: 90%;
  max-width: 900px;
  margin: 2em auto;
  font: .9em/1.2 Arial, Helvetica, sans-serif;
}

.container {
  display: grid;
  grid-template-columns: 2fr 1fr 1fr;
}

.container &gt; div {
  border-radius: 5px;
  padding: 10px;
  background-color: rgb(207,232,220);
  border: 2px solid rgb(79,185,227);
}
                </pre>

<pre class="brush: html hidden">&lt;div class="container"&gt;
 &lt;div&gt;Un&lt;/div&gt;
 &lt;div&gt;Deux&lt;/div&gt;
 &lt;div&gt;Trois&lt;/div&gt;
 &lt;div&gt;Quatre&lt;/div&gt;
 &lt;div&gt;Cinq&lt;/div&gt;
 &lt;div&gt;Six&lt;/div&gt;
 &lt;div&gt;Sept&lt;/div&gt;
&lt;/div&gt;                         </pre>

<p>{{ EmbedLiveSample('Trames_adaptables_avec_lunité_«_fr_»', '100%', 400) }}</p>

<div class="note">
<p><strong>Note :</strong> L'unité <code>fr</code> distribue l'espace disponible, et non sa <em>totalité</em>. Donc, si une des pistes contient quelque chose de grande taille, il y aura moins d'espace disponible à partager.</p>
</div>

<h3 id="Espaces_entre_pistes">Espaces entre pistes</h3>

<p>Pour créer des « gouttières » entre chaînes et trames, nous nous servons des propriétés {{cssxref("grid-column-gap")}} et {{cssxref("grid-row-gap")}} pour, respectivement, les espacements entre colonnes et entre lignes ; la propriété {{cssxref("grid-gap")}} définit les deux d'un coup.</p>

<pre class="brush: css">.container {
    display: grid;
    grid-template-columns: 2fr 1fr 1fr;
    grid-gap: 20px;
}</pre>

<p>Ces espacements peuvent être définis avec n'importe quelle unité de longueur ou un pourcentage, mais pas avec l'unité <code>fr</code>.</p>

<pre class="brush: css hidden">body {
  width: 90%;
  max-width: 900px;
  margin: 2em auto;
  font: .9em/1.2 Arial, Helvetica, sans-serif;
}

.container {
  display: grid;
  grid-template-columns: 2fr 1fr 1fr;
  grid-gap: 20px;
}

.container &gt; div {
  border-radius: 5px;
  padding: 10px;
  background-color: rgb(207,232,220);
  border: 2px solid rgb(79,185,227);
}
                </pre>

<pre class="brush: html">&lt;div class="container"&gt;
 &lt;div&gt;Un&lt;/div&gt;
 &lt;div&gt;Deux&lt;/div&gt;
 &lt;div&gt;Trois&lt;/div&gt;
 &lt;div&gt;Quatre&lt;/div&gt;
 &lt;div&gt;Cinq&lt;/div&gt;
 &lt;div&gt;Six&lt;/div&gt;
 &lt;div&gt;Sept&lt;/div&gt;
&lt;/div&gt;
</pre>
</div>
</div>

<p>{{ EmbedLiveSample('Grid_3', '100%', 400) }}</p>

<div class="note">
<p><strong>Note :</strong> Les propriétés <em>*gap</em> étaient traditionnellement préfixées par <code>grid-</code>, mais la norme a été modifiée avec l'intention de la rendre utilisable dans les diverses méthodes de mise en page. Actuellement, Edge et Firefox prennent en charge la version non préfixée ; les versions préfixées seront maintenues en tant qu'alias, de sorte qu'elles seront utilisables en toute sécurité pendant un certain temps. En appliquant le principe de précaution, vous pouvez doubler et mettre les deux types de propriétés pour « blinder » votre code.</p>
</div>

<pre class="brush: css">.container {
  display: grid;
  grid-template-columns: 2fr 1fr 1fr;
  grid-gap: 20px;
  gap: 20px;
}</pre>

<h3 id="Répétition_des_listes_de_pistes">Répétition des listes de pistes</h3>

<p>Vous pouvez répéter tout ou partie d'une liste de chaînes à l'aide d'une notation adaptée. Modifiez la liste des chaînes ainsi :</p>

<pre class="brush: css">.container {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    grid-gap: 20px;
}</pre>

<p>Nous obtenons 3 chaînes de <code>1fr</code> de large, comme précédemment. La première valeur passée à la fonction <code>repeat</code> est le nombre de répétitions de la liste, définie par le paramètre suivant : celui-ci peut être une ou plusieurs chaînes que vous voulez répéter.</p>

<h3 id="Trame_implicite_et_explicite">Trame implicite et explicite</h3>

<p>Nous n'avons jusqu'à présent défini que des  chaînes en colonnes, mais on peut aussi les créer en lignes pour recevoir les contenus. C'est un exemple de trame explicite (la chaîne) vs. implicite (la trame). La chaîne explicite est celle créée avec <code>grid-template-columns</code> <strong>ou</strong> <code>grid-template-rows</code>. La trame implicite est créée lorsque l'on met du contenu dans ce quadrillage — comme dans les rangées de nos exemples. La cahîne explicite et la trame  implicite sont analogues aux axes principal et croisé de Flexbox.</p>

<p>Par défaut, les rangées de la trame implicite sont <code>auto</code> dimensionnées, ce qui signifie qu'elles sont, en général, suffisamment grandes pour accueillir le contenu. Si vous voulez que les rangées de trame créées par le navigateur aient une taille donnée, utilisez les propriétés  {{cssxref("grid-auto-rows")}} et {{cssxref("grid-auto-columns")}}. Si vous ajoutez la propriété <code>grid-auto-rows</code> avec une valeur de <code>100px</code> dans la CSS, vous verrez que le rangées créées ont maintenant 100 pixels de haut.</p>

<pre class="brush: css hidden">body {
  width: 90%;
  max-width: 900px;
  margin: 2em auto;
  font: .9em/1.2 Arial, Helvetica, sans-serif;
}

.container &gt; div {
  border-radius: 5px;
  padding: 10px;
  background-color: rgb(207,232,220);
  border: 2px solid rgb(79,185,227);
}                  </pre>

<pre class="brush: html hidden">&lt;div class="container"&gt;
 &lt;div&gt;Un&lt;/div&gt;
 &lt;div&gt;Deux&lt;/div&gt;
 &lt;div&gt;Trois&lt;/div&gt;
 &lt;div&gt;Quatre&lt;/div&gt;
 &lt;div&gt;Cinq&lt;/div&gt;
 &lt;div&gt;Six&lt;/div&gt;
 &lt;div&gt;Sept&lt;/div&gt;
&lt;/div&gt;
                        </pre>

<pre class="brush: css">.container {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-auto-rows: 100px;
  grid-gap: 20px;
}</pre>

<p>{{ EmbedLiveSample('Trame_implicite_et_explicite', '100%', 400) }}</p>

<h3 id="La_fonction_minmax">La fonction minmax()</h3>

<p>Les rangées de trame de 100 pixels de haut ne seront pas très utiles si nous y plaçons des contenus de plus de 100 pixels de haut : il y aurait alors débordement. Il est préférable d'avoir des pistes d'<em>au moins</em> 100 pixels de haut, mais susceptibles de s'agrandir si le contenu déposé le nécessite. C'est un constat classique à propos du web : vous ne savez jamais vraiment quelle sera la hauteur d'un élément ; du contenu supplémentaire ou des tailles de police plus grandes peuvent amener des problèmes avec des designs en pixels visant la perfection dans toute dimension.</p>

<p>La fonction <code>minmax</code> nous permet de fixer une taille maximale et minimale pour une trame, par exemple <code>minmax(100px, auto)</code>. La taille minimale est de 100 px, mais la maximale est <code>auto</code> — elle  s'agrandira selon le contenu. Changeons <code>grid-auto-rows</code> en utilisant une valeur <code>minmax</code> :</p>

<pre class="brush: css">.container {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    grid-auto-rows: minmax(100px, auto);
    grid-gap: 20px;
}</pre>

<p>Si vous ajoutez du contenu supplémentaire, vous verrez que la trame grandit pour permettre l'incorporation. Notez que l'agrandissement est général pour toute la rangée.</p>

<h3 id="Autant_de_chaînes_que_possibles">Autant de chaînes que possibles</h3>

<p>Il est possible de combiner nos savoirs à propos des listes de pistes, la notation <code>repeat</code> et <code>minmax()</code> pour créer un modèle utile. Parfois, demander à ce que la génèration automatique crée autant de chaînes que possibles dans un conteneur nous faciliterait la tâche. Pour réaliser cela, définissez la valeur de <code>grid-template-columns</code> égale à <code>repeat()</code> avec le mot-clé <code>auto-fill</code> comme premier paramètre au lieu d'un nombre. Pour le second paramètre de la fonction, utilisez <code>minmax()</code> avec pour minimum la taille souhaitée pour la piste et 1fr pour maximum.</p>

<p>Essayez ceci dans le fichier avec la CSS ci-dessous :</p>

<pre class="brush: css hidden">body {
  width: 90%;
  max-width: 900px;
  margin: 2em auto;
  font: .9em/1.2 Arial, Helvetica, sans-serif;
}

.container &gt; div {
  border-radius: 5px;
  padding: 10px;
  background-color: rgb(207,232,220);
  border: 2px solid rgb(79,185,227);
}
                </pre>

<pre class="brush: html hidden">&lt;div class="container"&gt;
  &lt;div&gt;Un&lt;/div&gt;
  &lt;div&gt;Deux&lt;/div&gt;
  &lt;div&gt;Trois&lt;/div&gt;
  &lt;div&gt;Quatre&lt;/div&gt;
  &lt;div&gt;Cinq&lt;/div&gt;
  &lt;div&gt;Six&lt;/div&gt;
  &lt;div&gt;Sept&lt;/div&gt;
&lt;/div&gt;                       </pre>

<pre class="brush: css">.container {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  grid-auto-rows: minmax(100px, auto);
  grid-gap: 20px;
}</pre>

<p>{{ EmbedLiveSample('Autant_de_chaînes_que_possibles', '100%', 400) }}</p>

<p>Il a été créé autant de chaînes de 200 pixels qu'il y a de place dans le conteneur, puis l'espace restant a été partagé entre toutes les colonnes — le maximum de 1fr répartit, comme nous le savons déjà, l'espace de façon égale entre rangées.</p>

<h2 id="Placement_sur_les_lignes">Placement sur les lignes</h2>

<p>Nous passons maintenant de la création du quadrillage à la mise en place des choses sur dans celui-ci. Le quadrillage a toujours des fils de chaîne, ils commencent à 1 et sont en  relation avec le Writing Mode (mode d'écriture) du document. Ainsi, en anglais, la rangée de la chaîne 1 sera une colonne et se trouvera à gauche du quadrillage et la rangée de la trame sera une ligne 1 en haut. En arabe, la rangée de la chaîne 1 se situera du côté droit, car l'arabe s'écrit de droite à gauche.</p>

<p>Nous pouvons placer les choses dans ces rangées en indiquant les rangées de début et de fin. Pour ce faire, nous utilisons les propriétés suivantes :</p>

<ul>
 <li>{{cssxref("grid-column-start")}}</li>
 <li>{{cssxref("grid-column-end")}}</li>
 <li>{{cssxref("grid-row-start")}}</li>
 <li>{{cssxref("grid-row-end")}}</li>
</ul>

<p>Ces propriétés acceptent toutes un numéro de ligne comme valeur. Vous pouvez également utiliser les formes abrégées de ces propriétés :</p>

<ul>
 <li>{{cssxref("grid-column")}}</li>
 <li>{{cssxref("grid-row")}}</li>
</ul>

<p>Cela vous permet de définir les rangées de départ et de fin simultanément, en les séparant avec un <code>/</code> — une barre inclinée.</p>

<p><a href="https://github.com/mdn/learning-area/blob/master/css/css-layout/grids/8-placement-starting-point.html">Pour débuter, téléchargez ce fichier</a>. Il comporte déjà une définition de quadrillage et un seul article. Constatez que le placement automatique met les éléments dans chaque cellule du quadrillage créé.</p>

<p>À la place, nous allons mettre la totalité des éléments du site sur le quadrillage en utilisant les rangées de la chaîne (les colonnes dans notre cas). Ajoutez les règles ci-après à la fin de la CSS :</p>

<pre class="brush: css">header {
  grid-column: 1 / 3;
  grid-row: 1;
}

article {
  grid-column: 2;
  grid-row: 2;
}

aside {
  grid-column: 1;
  grid-row: 2;
}

footer {
  grid-column: 1 / 3;
  grid-row: 3;
}</pre>

<pre class="brush: css hidden">                body {
                    width: 90%;
                    max-width: 900px;
                    margin: 2em auto;
                    font: .9em/1.2 Arial, Helvetica, sans-serif;
                }

                .container {
                    display: grid;
                    grid-template-columns: 1fr 3fr;
                    grid-gap: 20px;
                }
header {
    grid-column: 1 / 3;
    grid-row: 1;
}

article {
    grid-column: 2;
    grid-row: 2;
}

aside {
    grid-column: 1;
    grid-row: 2;
}

footer {
    grid-column: 1 / 3;
    grid-row: 3;
}

header,
footer {
  border-radius: 5px;
  padding: 10px;
  background-color: rgb(207,232,220);
  border: 2px solid rgb(79,185,227);
}

aside {
  border-right: 1px solid #999;
}
</pre>

<pre class="brush: html hidden">&lt;div class="container"&gt;
  &lt;header&gt;Voici mon joli blog&lt;/header&gt;
  &lt;article&gt;
    &lt;h1&gt;Mon article&lt;/h1&gt;
    &lt;p&gt;Duis felis orci, pulvinar id metus ut, rutrum luctus orci. Cras porttitor imperdiet nunc, at ultricies tellus laoreet sit amet. Sed auctor cursus massa at porta. Integer ligula ipsum, tristique sit amet orci vel, viverra egestas ligula. Curabitur vehicula tellus neque, ac ornare ex malesuada et. In vitae convallis lacus. Aliquam erat volutpat. Suspendisse ac imperdiet turpis. Aenean finibus sollicitudin eros pharetra congue. Duis ornare egestas augue ut luctus. Proin blandit quam nec lacus varius commodo et a urna. Ut id ornare felis, eget fermentum sapien.&lt;/p&gt;

    &lt;p&gt;Nam vulputate diam nec tempor bibendum. Donec luctus augue eget malesuada ultrices. Phasellus turpis est, posuere sit amet dapibus ut, facilisis sed est. Nam id risus quis ante semper consectetur eget aliquam lorem. Vivamus tristique elit dolor, sed pretium metus suscipit vel. Mauris ultricies lectus sed lobortis finibus. Vivamus eu urna eget velit cursus viverra quis vestibulum sem. Aliquam tincidunt eget purus in interdum. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.&lt;/p&gt;
  &lt;/article&gt;
  &lt;aside&gt;
    &lt;h2&gt;Autres sujets&lt;/h2&gt;
    &lt;p&gt;Nam vulputate diam nec tempor bibendum. Donec luctus augue eget malesuada ultrices. Phasellus turpis est, posuere sit amet dapibus ut, facilisis sed est.&lt;/p&gt;
  &lt;/aside&gt;
  &lt;footer&gt;Contactez moi@monsite.com&lt;/footer&gt;
&lt;/div&gt;               </pre>

<p>{{ EmbedLiveSample('Placement_sur_les_lignes', '100%', 400) }}</p>

<div class="note">
<p><strong>Note :</strong> vous pouvez aussi utiliser la valeur <code>-1</code> pour cibler la dernière rangée de la chaîne  et compter vers l'intérieur à partir de la fin en utilisant des valeurs négatives. Cependant, cela ne fonctionne que pour la chaîne explicite. La valeur <code>-1</code> ne ciblera pas le rang de fin de trame implicite.</p>
</div>

<h2 id="Placer_avec_«_grid-template-areas_»">Placer avec « grid-template-areas »</h2>

<p>Une autre façon de placer des éléments dans le quadrillage consiste à utiliser la propriété  {{cssxref("grid-template-areas")}} en donnant un nom au divers éléments du design.</p>

<p>Supprimez le placement sur les lignes du dernier exemple (ou bien rechargez le fichier pour avoir un nouveau point de départ) et ajoutez ceci à la CSS.</p>

<pre class="brush: css">.container {
  display: grid;
  grid-template-areas:
      "header header"
      "sidebar content"
      "footer footer";
  grid-template-columns: 1fr 3fr;
  grid-gap: 20px;
}

header {
  grid-area: header;
}

article {
  grid-area: content;
}

aside {
  grid-area: sidebar;
}

footer {
  grid-area: footer;
}</pre>

<p>Actualisez la page et vous verrez que vos éléments ont été placés comme la fois précédente sans que nous ayons besoin d'utiliser un quelconque numéro de ligne !</p>


<pre class="brush: css hidden">body {
  width: 90%;
  max-width: 900px;
  margin: 2em auto;
  font: .9em/1.2 Arial, Helvetica, sans-serif;
}

header,
footer {
  border-radius: 5px;
  padding: 10px;
  background-color: rgb(207,232,220);
  border: 2px solid rgb(79,185,227);
}

aside {
  border-right: 1px solid #999;
}

.container {
  display: grid;
  grid-template-areas:
  "header header"
  "sidebar content"
  "footer footer";
  grid-template-columns: 1fr 3fr;
  grid-gap: 20px;
}

header {
  grid-area: header;
}

article {
  grid-area: content;
}

aside {
  grid-area: sidebar;
}

footer {
  grid-area: footer;
}
                </pre>

<pre class="brush: html hidden">&lt;div class="container"&gt;
  &lt;header&gt;Voici mon joli blog&lt;/header&gt;
  &lt;article&gt;
    &lt;h1&gt;Mon article&lt;/h1&gt;
    &lt;p&gt;Duis felis orci, pulvinar id metus ut, rutrum luctus orci. Cras porttitor imperdiet nunc, at ultricies tellus laoreet sit amet. Sed auctor cursus massa at porta. Integer ligula ipsum, tristique sit amet orci vel, viverra egestas ligula. Curabitur vehicula tellus neque, ac ornare ex malesuada et. In vitae convallis lacus. Aliquam erat volutpat. Suspendisse ac imperdiet turpis. Aenean finibus sollicitudin eros pharetra congue. Duis ornare egestas augue ut luctus. Proin blandit quam nec lacus varius commodo et a urna. Ut id ornare felis, eget fermentum sapien.&lt;/p&gt;

    &lt;p&gt;Nam vulputate diam nec tempor bibendum. Donec luctus augue eget malesuada ultrices. Phasellus turpis est, posuere sit amet dapibus ut, facilisis sed est. Nam id risus quis ante semper consectetur eget aliquam lorem. Vivamus tristique elit dolor, sed pretium metus suscipit vel. Mauris ultricies lectus sed lobortis finibus. Vivamus eu urna eget velit cursus viverra quis vestibulum sem. Aliquam tincidunt eget purus in interdum. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.&lt;/p&gt;
  &lt;/article&gt;
  &lt;aside&gt;
    &lt;h2&gt;Autres sujets&lt;/h2&gt;
    &lt;p&gt;Nam vulputate diam nec tempor bibendum. Donec luctus augue eget malesuada ultrices. Phasellus turpis est, posuere sit amet dapibus ut, facilisis sed est.&lt;/p&gt;
  &lt;/aside&gt;
  &lt;footer&gt;Contactez moi@monsite.com&lt;/footer&gt;
&lt;/div&gt;               </pre>

<p>{{ EmbedLiveSample('Placer_avec_«_grid-template-areas_»', '100%', 400) }}</p>

<p>Les règles pour <code>grid-template-areas</code> sont les suivantes :</p>

<ul>
 <li>toute cellule du quadrillage doit être remplie.</li>
 <li>pour couvrir deux cellules, répétez le nom.</li>
 <li>pour laisser une cellule vide, utilisez un point <code>.</code> .</li>
 <li>les zones doivent être rectangulaires — vous ne pouvez pas avoir une zone en L par exemple.</li>
 <li>les zones ne peuvent pas être répétées dans des emplacements différents.</li>
</ul>

<p>Vous pouvez jouer avec la disposition, en modifiant le pied de page pour qu'il ne soit placé que sous le contenu et que la barre latérale soit sur toute la hauteur de la page, par exemple. C'est une très belle façon de décrire une disposition, car elle est évidente à la seule lecture de la CSS.</p>

<h2 id="«_CSS_Grid_»_une_structure_de_quadrillage">« CSS Grid » : une structure de quadrillage</h2>

<p>Les « structures » de quadrillage se fondent sur une série de 12 à 16 rangées ; avec « CSS Grid », vous n'avez pas besoin d'outils tierce partie pour créer la structure — elle est déjà dans les spécifications.</p>

<p><a href="https://github.com/mdn/learning-area/blob/master/css/css-layout/grids/11-grid-system-starting-point.html">Chargez le fichier de départ</a>. Il contient un conteneur à 12 colonnes et le même balisage que celui utilisé dans les deux exemples précédents. Nous pouvons maintenant utiliser le placement  sur les lignes pour mettre le contenu sur le quadrillage à 12 colonnes.</p>

<pre class="brush: css">header {
  grid-column: 1 / 13;
  grid-row: 1;
}

article {
  grid-column: 4 / 13;
  grid-row: 2;
}

aside {
  grid-column: 1 / 4;
  grid-row: 2;
}

footer {
  grid-column: 1 / 13;
  grid-row: 3;
}</pre>

<pre class="brush: css hidden">body {
  width: 90%;
  max-width: 900px;
  margin: 2em auto;
  font: .9em/1.2 Arial, Helvetica, sans-serif;
}

.container {
  display: grid;
  grid-template-columns: repeat(12, minmax(0,1fr));
  grid-gap: 20px;
}

header {
  grid-column: 1 / 13;
  grid-row: 1;
}

article {
  grid-column: 4 / 13;
  grid-row: 2;
}

aside {
  grid-column: 1 / 4;
  grid-row: 2;
}

footer {
  grid-column: 1 / 13;
  grid-row: 3;
}

header,
footer {
  border-radius: 5px;
  padding: 10px;
  background-color: rgb(207,232,220);
  border: 2px solid rgb(79,185,227);
}

aside {
  border-right: 1px solid #999;
}
                </pre>

<pre class="brush: html hidden">&lt;div class="container"&gt;
  &lt;header&gt;Voici mon joli blog&lt;/header&gt;
  &lt;article&gt;
    &lt;h1&gt;Mon article&lt;/h1&gt;
    &lt;p&gt;Duis felis orci, pulvinar id metus ut, rutrum luctus orci. Cras porttitor imperdiet nunc, at ultricies tellus laoreet sit amet. Sed auctor cursus massa at porta. Integer ligula ipsum, tristique sit amet orci vel, viverra egestas ligula. Curabitur vehicula tellus neque, ac ornare ex malesuada et. In vitae convallis lacus. Aliquam erat volutpat. Suspendisse ac imperdiet turpis. Aenean finibus sollicitudin eros pharetra congue. Duis ornare egestas augue ut luctus. Proin blandit quam nec lacus varius commodo et a urna. Ut id ornare felis, eget fermentum sapien.&lt;/p&gt;

    &lt;p&gt;Nam vulputate diam nec tempor bibendum. Donec luctus augue eget malesuada ultrices. Phasellus turpis est, posuere sit amet dapibus ut, facilisis sed est. Nam id risus quis ante semper consectetur eget aliquam lorem. Vivamus tristique elit dolor, sed pretium metus suscipit vel. Mauris ultricies lectus sed lobortis finibus. Vivamus eu urna eget velit cursus viverra quis vestibulum sem. Aliquam tincidunt eget purus in interdum. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.&lt;/p&gt;
  &lt;/article&gt;
  &lt;aside&gt;
    &lt;h2&gt;Autres sujets&lt;/h2&gt;
    &lt;p&gt;Nam vulputate diam nec tempor bibendum. Donec luctus augue eget malesuada ultrices. Phasellus turpis est, posuere sit amet dapibus ut, facilisis sed est.&lt;/p&gt;
  &lt;/aside&gt;
  &lt;footer&gt;Contactez moi@monsite.com&lt;/footer&gt;
&lt;/div&gt;               </pre>

<p>{{ EmbedLiveSample('«_CSS_Grid_»_une_structure_de_quadrillage', '100%', 400) }}</p>

<p>Si vous utilisez <a href="/fr/docs/Tools/Page_Inspector/How_to/Examine_grid_layouts">Firefox Grid Inspector</a> (Inspecteur &gt; Mise en page &gt; Grilles) pour superposer les lignes du quadrillage sur le design, vous verrez comment le quadrillage à 12 colonnes fonctionne.</p>

<p><img alt="A 12 column grid overlaid on our design." src="trames.png"></p>

<h2 id="Résumé">Résumé</h2>

<p>Dans cet aperçu, nous avons parcouru les principales caractéristiques de la mise en page avec les fonctionnalités des « CSS Grid Layout ». Vous devriez pouvoir commencer à l'utiliser dans vos mises en page. Pour en savoir plus sur les spécifications, lisez nos guides sur la disposition en trame ; leurs intitulés sont rappelés ci-dessous.</p>

<h2 id="Voir_également">Voir également</h2>

<ul>
 <li><a href="/fr/docs/Web/CSS/CSS_Grid_Layout#Guides">CSS Grid guides</a></li>
 <li><a href="/fr/docs/Tools/Page_Inspector/How_to/Examine_grid_layouts">CSS Grid Inspector: Examine grid layouts</a></li>
</ul>

<p>{{PreviousMenuNext("Learn/CSS/CSS_layout/Flexbox", "Learn/CSS/CSS_layout/Floats", "Learn/CSS/CSS_layout")}}</p>



<h2 id="Dans_ce_module">Dans ce module</h2>

<ul>
 <li><a href="/fr/docs/Learn/CSS/CSS_layout/Introduction">Introduction to CSS layout</a></li>
 <li><a href="/fr/docs/Learn/CSS/CSS_layout/Normal_Flow">Normal Flow</a></li>
 <li><a href="/fr/docs/Learn/CSS/CSS_layout/Flexbox">Flexbox</a></li>
 <li><a href="/fr/docs/Learn/CSS/CSS_layout/Grids">Grid</a></li>
 <li><a href="/fr/docs/Learn/CSS/CSS_layout/Floats">Floats</a></li>
 <li><a href="/fr/docs/Learn/CSS/CSS_layout/Positioning">Positioning</a></li>
 <li><a href="/fr/docs/Learn/CSS/CSS_layout/Multiple-column_Layout">Multiple-column Layout</a></li>
 <li><a href="/fr/docs/Learn/CSS/CSS_layout/Legacy_Layout_Methods">Legacy Layout Methods</a></li>
 <li><a href="/fr/docs/Learn/CSS/CSS_layout/Supporting_Older_Browsers">Supporting older browsers</a></li>
 <li><a href="/fr/docs/Learn/CSS/CSS_layout/Fundamental_Layout_Comprehension">Fundamental Layout Comprehension Assessment</a></li>
</ul>