
La propriété `align-items` est liée à la mise en page CSS. Elle affecte la façon dont les éléments sont alignés à la fois **dans les mises en page [Flexbox](/articles/flexbox-guide-complet) et [Grid](/articles/css-grid-layout-guide-complet)**.

- [align-items dans Flexbox](/articles/flexbox-guide-complet#align-items)
- [align-items dans Grid](/articles/css-grid-layout-guide-complet#ai)

## Syntaxe

```css
align-items: flex-start | flex-end | center | baseline | stretch;
```

La propriété `align-items` définit le comportement par défaut pour la disposition des éléments le long de l'axe transversal (perpendiculaire à l'axe principal).

Imaginez une mise en page flexbox horizontale. Ce flux horizontal est l'axe _principal_, donc align-items est l'alignement _opposé_ à celui-ci, sur l'axe _vertical_. Gardez à l'esprit que ça change évidemment lorsque l'axe principal change, et que l'axe transversal change avec lui.

Vous pouvez considérer `align-items` comme la version `justify-content` pour l'axe transversal (perpendiculaire à l'axe principal).

<p class="is-style-explanation">Le reste de cet article est plutôt axé sur flexbox plutôt que sur grid. Les concepts sont toujours très similaires, mais il existe quelques différences. Par exemple, dans flexbox, les axes peuvent changer, alors que dans grid ils ne le peuvent pas. Ça a pour conséquence par exemple le fait que flexbox a des valeurs comme `flex-start` alors que dans grid, c'est juste `start`.</p>

## Démo (flexbox)

<figure class="break-out">
	<div><iframe loading="lazy" decoding="async" id="cp_embed_AvXmrQ/2bfe2c024739bdd4098572f87d1bf585" src="//codepen.io/KittyGiraudel/embed/AvXmrQ/2bfe2c024739bdd4098572f87d1bf585?height=640&amp;theme-id=light&amp;slug-hash=AvXmrQ/2bfe2c024739bdd4098572f87d1bf585&amp;user=KittyGiraudel&amp;default-tab=result" scrolling="no" frameborder="0" height="640" allowtransparency="true" allowfullscreen="true" name="CodePen Embed" title="CodePen Embed" class="cp_embed_iframe " style="width: 100%; overflow: hidden;"></iframe></div>
</figure>

<div class="pen">
<img src="/images/codepen.png" alt="" class="codepen-icon"><span>voir <a href="https://codepen.io/KittyGiraudel/pen/AvXmrQ/2bfe2c024739bdd4098572f87d1bf585">
  CSS-Tricks: :nth-last-child</a> de Kitty Giraudel dans <a href="https://codepen.io">CodePen</a></span>
</div>


align-items

Alignement en CSS, un guide complet

Approfondir la propriété display : la génération de boîtes


Une mise en page `flex` ou `grid` commence par la déclaration `display: flex` ou `display: grid`. Ces méthodes de mise en page sont des valeurs de la propriété [CSS display]('https://developer.mozilla.org/fr/docs/Web/CSS/display'). Nous avons tendance à ne pas beaucoup parler de cette propriété en tant que telle, nous concentrant plutôt sur les valeurs de `flex` ou de `grid`. Cependant, il y a des choses intéressantes à comprendre au sujet de `display` et de la façon dont elle est définie, qui vous faciliteront grandement la vie lorsque vous utiliserez CSS pour votre mise en page.

Dans cet article, le premier d'une série de deux, je vais examiner la manière dont les valeurs de `display` sont définies dans la spécification de niveau 3. Il s'agit d'un changement par rapport à la façon dont nous définissions `display` dans les versions précédentes de CSS. Même s'ils peuvent déranger, de prime abord, ceux d'entre nous qui font du CSS depuis de nombreuses années, je pense que ces changements aident vraiment à expliquer ce qui se passe lorsque nous modifions la valeur `display` d'un élément.

## Éléments block et inline

L'une des premières choses que nous enseignons aux personnes qui découvrent le CSS, ce sont les concepts d'éléments en `block` et `inline`. Nous expliquons que certains éléments de la page sont `display : block` et qu'ils possèdent, de ce fait, certaines caractéristiques. Ils s'étirent dans le sens de la ligne, en occupant tout l'espace disponible. Ils s'ouvrent sur une nouvelle ligne&nbsp;; nous pouvons leur donner une largeur, une hauteur, une marge ainsi qu'un remplissage, et ces propriétés éloigneront d'autres éléments de la page.

Nous savons également que certains éléments sont `display : inline`. Les éléments en ligne sont comme les mots d'une phrase&nbsp;; ils ne provoquent pas un saut à la ligne, ils réservent un caractère d'espace blanc entre eux. Si vous ajoutez des marges et du padding, ces éléments s'afficheront mais ne repousseront pas les autres éléments.

Le comportement des éléments block et inline est fondamental pour CSS et pour qu'un document HTML correctement balisé soit lisible par défaut. Cette disposition est appelée "Block and Inline Layout" (_disposition en bloc et en ligne_) ou “Normal Flow” (_flux normal_), car c'est la façon dont les éléments se disposent si nous ne faisons rien d'autre pour eux.

## Valeurs internes et externes de display

Nous comprenons ces notions de block et inline, mais que se passe-t-il si nous appliquons `display: grid` à un élément ? Est-ce quelque chose de complètement différent&nbsp;? Si nous regardons un composant sur lequel nous avons spécifié `display: grid`, en tant qu'élément parent dans la mise en page il se comporte comme un élément de niveau bloc. L'élément s'étire et occupe tout l'espace disponible dans la dimension en ligne, il commence sur une nouvelle ligne. Il se comporte exactement comme un élément de type bloc en termes de comportement par rapport au reste de la mise en page. Pourtant nous n'avons pas dit `display: block`, n'est-ce pas&nbsp;?

En fait, il s'avère que si. Dans la [spécification Display](https://www.w3.org/TR/css-display-3/), niveau 3, la valeur de `display` est définie par deux mots-clés. Ces mots-clés définissent la valeur **externe** de display, qui sera `inline` ou `block` et définira donc _comment l'élément se comporte dans la mise en page par rapport aux éléments qui l'entourent_. Ils définissent également la valeur **interne** de l'élément —&nbsp;ou comment _les enfants directs_ de cet élément se comportent.

Autrement dit, que lorsque vous écrivez `display: grid`, ce que vous dites réellement c'est `display : block grid`. Vous demandez _un conteneur de grille de niveau bloc_. Un élément qui aura tous les attributs de `block` - vous pouvez lui donner une `height` et une `width`, une `margin` et un `padding`, et il s'étirera pour remplir le conteneur. Les enfants de ce conteneur, cependant, ont reçu la valeur interne de grid et deviennent donc des `items` de grille. Le comportement de ces _[grid items](/articles/css-grid-layout-guide-complet#griditem)_ est défini dans la spécification de grille CSS : la spécification de `display` nous donne un moyen d'indiquer au navigateur que c'est la méthode de mise en page que nous voulons utiliser.

Je pense que cette façon de considérer `display` est extrêmement utile&nbsp;; elle explique de façon claire et directe ce que nous faisons avec les différentes méthodes de mise en page. Si vous deviez spécifier `display: inline flex`, à quoi vous attendriez-vous&nbsp;? Eh bien sans doute à une boîte se comportant comme un élément inline, avec des enfants qui seraient des items flex.

Il y a quelques autres choses qui s'expliquent facilement lorsqu'on envisage `display` de cette nouvelle manière, et je vais en examiner quelques-unes dans la suite de cet article.

## Nous revenons toujours au flux normal

Pour comprendre ces propriétés d'affichage internes et externes, il peut être utile d'observer ce qui se passe si nous ne modifions pas du tout la valeur d'affichage. Si nous écrivons du HTML et que nous l'affichons dans un navigateur, nous obtenons une disposition en bloc et en ligne, ou un flux normal. Les éléments s'affichent comme des éléments bloc ou en ligne.

<figure class="break-out">
	<div><iframe loading="lazy" decoding="async" id="cp_embed_ZZzPQE" src="//codepen.io/rachelandrew/embed/ZZzPQE?height=400&amp;theme-id=light&amp;slug-hash=ZZzPQE&amp;user=rachelandrew&amp;default-tab=result" scrolling="no" frameborder="0" height="400" allowtransparency="true" allowfullscreen="true" name="CodePen Embed" title="CodePen Embed" class="cp_embed_iframe " style="width: 100%; overflow: hidden;"></iframe></div>
</figure>

<div class="pen">
<img src="/images/codepen.png" alt="" class="codepen-icon"><span>voir <a href="https://codepen.io/rachelandrew/pen/ZZzPQE">
  Block and Inline Layout</a> de rachelandrew dans <a href="https://codepen.io">CodePen</a></span>
</div>

L'exemple ci-dessous contient des balises que j'ai transformées en objet média, en faisant en sorte que les `div` `display: flex` (les deux enfants directs) deviennent des items flex, de sorte que l'image se trouve maintenant dans une rangée avec le contenu. Si vous regardez le contenu cependant, il y a un titre et un paragraphe qui s'affichent à nouveau en flux normal. Les enfants directs de l'objet média sont devenus des items flex&nbsp;; leurs enfants reviennent à un flux normal à moins que nous ne changions la valeur de display sur l'item flex. Le conteneur flex lui-même est une boîte de niveau bloc, comme vous pouvez le voir par le fait que la bordure s'étend jusqu'aux bords de son parent.

<figure class="break-out">
	<div><iframe loading="lazy" decoding="async" id="cp_embed_gyYEPz" src="//codepen.io/rachelandrew/embed/gyYEPz?height=530&amp;theme-id=light&amp;slug-hash=gyYEPz&amp;user=rachelandrew&amp;default-tab=result" scrolling="no" frameborder="0" height="530" allowtransparency="true" allowfullscreen="true" name="CodePen Embed" title="CodePen Embed" class="cp_embed_iframe " style="width: 100%; overflow: hidden;"></iframe></div>
</figure>

<div class="pen">
<img src="/images/codepen.png" alt="" class="codepen-icon"><span>voir <a href="https://codepen.io/rachelandrew/pen/ZZzPQE">
  Block and Inline Layout with Flex Component</a> de rachelandrew dans <a href="https://codepen.io">CodePen</a></span>
</div>

Si vous travaillez ainsi, les éléments de votre page se disposeront d'eux-mêmes avec cette belle disposition de flux normal lisible, plutôt que de lutter contre et d'essayer de tout placer. Vous êtes également moins susceptible de rencontrer des problèmes d'accessibilité, car vous travaillez avec l'ordre du document, ce qui est exactement ce que fait un lecteur d'écran ou une personne qui navigue dans le document via la tabulation.

## Expliquer `flow-root` et `inline-block`

La valeur de `inline-block` est également susceptible d'être familière à ceux d'entre nous qui font du CSS depuis un certain temps. Cette valeur est un moyen d'[obtenir certains comportements de bloc sur un élément inline](/articles/la-difference-entre-block-et-inline). Par exemple, un élément [inline-block]('inline-block') peut avoir une largeur et une hauteur. Un élément avec `display: inline-block` se comporte également d'une manière intéressante en ce qu'il crée un contexte de formatage de type bloc (_Block Formatting Context_, BFC).

Un BFC fait certaines choses utiles en termes de mise en page, par exemple, il contient des floats. Pour en savoir plus sur les contextes de mise en forme des blocs, consultez mon article précédent intitulé "[Understanding CSS Layout And The Block Formatting Context](https://www.smashingmagazine.com/2017/12/understanding-css-layout-block-formatting-context/)". Par conséquent, dire `display: inline-block` vous donne une _boîte inline_ qui établit également un BFC.

Comme vous le découvrirez (si vous lisez l'article susmentionné sur le Contexte de formatage block), il existe une valeur plus récente de display qui crée aussi explicitement un BFC. Il s'agit de la valeur [`flow-root`](https://developer.mozilla.org/en-US/docs/Web/CSS/display#flow-root). Cette valeur crée un BFC sur un bloc, plutôt que sur un élément inline.

- `display : inline-block` vous donne un BFC sur une boîte inline.
- `display : flow-root` vous donne un BFC sur une boîte block.

Vous vous dites probablement que tout cela est un peu confus&nbsp;: pourquoi avons-nous deux mots-clés complètement différents ici, et qu'est-il arrivé à la syntaxe à deux valeurs dont nous parlions auparavant&nbsp;? Eh bien cela nous amène justement à ce que je dois maintenant expliquer à propos de `display`&nbsp;: _CSS a un historique dont nous devons tenir compte_ en termes de propriété `display`.

### Valeurs historiques de la propriété display

La spécification CSS2 détaillait les valeurs suivantes pour la propriété `display`&nbsp;:

- `inline`
- `bloc`
- `inline-block`
- `list-item`
- `none`
- `table`
- `inline-table`

Nous avons également défini les diverses propriétés internes du tableau, telles que `table-cell`, dont nous ne nous occuperons pas dans cet article.

Nous avons ensuite ajouté à celles-ci quelques valeurs pour l'affichage, afin de prendre en charge la mise en page flex et grid&nbsp;:

- `grid`
- `inline-grid`
- `flex`
- `inline-flex`

Remarque : la spécification définit également `ruby` et `inline-ruby` pour prendre en charge le texte Ruby, ce que vous pouvez lire dans [la spécification Ruby](https://drafts.csswg.org/css-ruby-1/#ruby-def).

Ce sont toutes des valeurs uniques pour la propriété `display`, définies avant que la spécification ne soit mise à jour. Un aspect fondamental de la construction de CSS est que nous ne devons jamais casser le Web ; **nous ne pouvons pas _simplement_ changer les choses**. Nous ne pouvons pas décider soudainement que tout le monde doit utiliser cette nouvelle syntaxe à deux valeurs et que, par conséquent, tous les sites Web construits avec la syntaxe à une seule valeur se casseront si un développeur ne revient pas en arrière pour les corriger&nbsp;!

En réfléchissant à ce problème, vous apprécierez peut-être cette [liste d'erreurs](https://wiki.csswg.org/ideas/mistakes) dans la conception de CSS qui sont moins des erreurs dans de nombreux cas que des choses qui ont été conçues sans boule de cristal pour voir dans l'avenir&nbsp;! Cependant, le fait est que nous ne pouvons pas casser le Web, c'est pourquoi nous avons cette situation où actuellement les navigateurs supportent un ensemble de valeurs uniques pour l'affichage, et la spécification passe à deux valeurs pour l'affichage.

La façon dont nous contournons cette situation est de spécifier des valeurs anciennes et courtes pour l'affichage, ce qui inclut toutes ces valeurs uniques. Cela signifie qu'un mappage peut être défini entre les valeurs uniques et les nouvelles valeurs à deux mots-clés. Ce qui nous donne le tableau de valeurs suivant :

<table class='specificTable'><thead><tr><th>Valeur Simple</th><th>Valeur en 2 mots</th><th>Description</th></tr></thead><tbody><tr><td><code>block</code></td><td><code>block flow</code></td><td>Block box with normal flow inner</td></tr><tr><td><code>flow-root</code></td><td><code>block flow-root</code></td><td>Block box defining a BFC</td></tr><tr><td><code>inline</code></td><td><code>inline flow</code></td><td>Inline box with normal flow inner</td></tr><tr><td><code>inline-block</code></td><td><code>inline flow-root</code></td><td>Inline box defining a BFC</td></tr><tr><td><code>list-item</code></td><td><code>block flow list-item</code></td><td>Block box with normal flow inner and additional marker box</td></tr><tr><td><code>flex</code></td><td><code>block flex</code></td><td>Block box with inner flex layout</td></tr><tr><td><code>inline-flex</code></td><td><code>inline flex</code></td><td>Inline box with inner flex layout</td></tr><tr><td><code>grid</code></td><td><code>block grid</code></td><td>Block box with inner grid layout</td></tr><tr><td><code>inline-grid</code></td><td><code>inline grid</code></td><td>Inline box with inner grid layout</td></tr><tr><td><code>table</code></td><td><code>block table</code></td><td>Block box with inner table layout</td></tr><tr><td><code>inline-table</code></td><td><code>inline table</code></td><td>Inline box with inner table layout</td></tr></tbody></table>

Pour expliquer comment ça marche, nous prenons l'exemple d'un conteneur de grille. Dans le monde à deux valeurs, nous créerions un conteneur de grille de niveau bloc avec&nbsp;:

```css
.container {
  display: block grid;
}
```

Cependant, le mot-clé _legacy_ fait la même chose :

```css
.container {
  display: grid;
}
```

Si, à la place, nous voulions un conteneur de grille en ligne, dans le monde à deux valeurs, nous utiliserions :

```css
.container {
  display: inline grid;
}
```

et avec les valeurs _legacy_ :

```css
.container {
  display: inline-grid;
}
```

Après ce petit détour historique, nous pouvons maintenant revenir au point de départ de cette conversation et nous pencher sur `display: inline-block`. En regardant le tableau, vous pouvez voir que c'est défini dans le monde à deux valeurs comme `display: inline flow-root`. Il correspond maintenant à `display: flow-root` qui, dans un monde à deux valeurs, serait `display: block flow-root`. Un peu de rangement et de clarification de la façon dont ces choses sont définies. Une refactorisation de CSS, si vous voulez.

## Prise en charge de la syntaxe à deux valeurs par les navigateurs

Pour l'instant, les navigateurs ne prennent pas en charge la syntaxe à deux valeurs pour la propriété display. Le bogue d'implémentation pour Firefox peut être trouvé [ici](https://bugzilla.mozilla.org/show_bug.cgi?id=1038294). L'implémentation —&nbsp;lorsqu'elle aura lieu&nbsp;— consistera essentiellement à aliaser les anciennes valeurs vers les versions à deux valeurs. Il faudra donc attendre un bon moment avant que vous puissiez réellement utiliser ces versions à deux valeurs dans votre code. Cependant, ce n'est pas vraiment le sujet de cet article. Je pense plutôt que le fait d'examiner les valeurs d'affichage à la lumière du modèle à deux valeurs permet d'expliquer une grande partie de ce qui se passe.

Lorsque vous définissez la disposition d'une boîte en CSS, vous définissez ce qui arrive à cette boîte en termes de **comportement par rapport à toutes les autres boîtes de la mise en page**. Vous définissez également le comportement des enfants de cette boîte. Vous pouvez penser de cette manière bien avant de pouvoir déclarer explicitement les valeurs comme deux choses distinctes, car les mots-clés hérités correspondent à ces valeurs, et ça vous aidera à comprendre ce qui se passe lorsque vous modifiez la valeur de `display`.


Approfondir la propriété display : les deux valeurs de display

Comment apprendre CSS

Comprendre CSS Grid : créer un container Grid

Avec Grid, on peut toujours placer les items entre une ligne de grille et une autre. Mais il existe une autre façon de décrire notre mise en page, une façon plus _visuelle_. Dans ce troisième volet de notre série nous allons voir comment utiliser la propriété [grid-template-areas](/articles/css-grid-layout-guide-complet#gta)
pour définir un placement sur la grille et nous découvrirons comme elle fonctionne réellement.

## Décrire une mise en page avec grid-template-areas

La propriété `grid-template-areas` accepte pour valeur une ou plusieurs chaînes de caractères. Chacune, entourée de guillemets, représente une rangée de notre grille. Nous pouvons utiliser la propriété sur une grille définie avec `grid-template-rows` et `grid-template-columns`, ou nous pouvons créer notre mise en page, auquel cas toutes les rangées seront automatiquement dimensionnées.

La propriété et les valeurs qui suivent décrivent une grille comportant quatre zones —&nbsp;chacune s'étend sur deux pistes de colonnes et deux pistes de rangées. Une zone (_area_) peut s'étendre sur plusieurs pistes lorsqu'on en répète le nom dans toutes les cellules qu'on veut couvrir&nbsp;:

```
grid-template-areas: "one one two two"
                     "one one two two"
                     "three three four four"
                     "three three four four";

```

Les items sont placés dans la mise en page en étant nommés dans la propriété `grid-area`. Si nous voulons placer un élément ayant une classe `test` dans la zone de la grille qui s'appelle `one`, il suffit d'écrire&nbsp;:

```
.test {
  grid-area: one;
}
```

Regardons cela en action dans le codepen qui suit. J'ai quatre items, avec des classes nommées un à quatre (one to four), qui sont assignées aux zones de grille correspondantes via la propriété `grid-area` et qui s'affichent donc dans les boîtes correctes de la grille.

<figure class="break-out">
	<div><iframe loading="lazy" decoding="async" id="cp_embed_VwLLRKE" src="//codepen.io/rachelandrew/embed/VwLLRKE?height=640&amp;theme-id=light&amp;slug-hash=VwLLRKE&amp;user=rachelandrew&amp;default-tab=result" scrolling="no" frameborder="0" height="640" allowtransparency="true" allowfullscreen="true" name="CodePen Embed" title="CodePen Embed" class="cp_embed_iframe " style="width: 100%; overflow: hidden;"></iframe></div>
</figure>

<div class="pen">
<img src="/images/codepen.png" alt="" class="codepen-icon"><span>voir <a href="https://codepen.io/rachelandrew/pen/VwLLRKE/">
  Grid template areas : exemple simple</a> de rachelandrew dans <a href="https://codepen.io">CodePen</a></span>
</div>

Si vous utilisez l'inspecteur Grid de Firefox, vous pouvez voir les noms des zones et les lignes de grille, montrant que chaque item s'étend en effet sur deux rangées et deux colonnes —&nbsp;le tout sans faire aucun positionnement basé sur les lignes pour l'item lui-même.



<figure role="group"><img src="/images/smashing-grid-area1.webp" alt="chaque item s'étend sur deux rangées et deux colonnes"/></figure>

## Règles d'utilisation de grid-template-areas

Il ya des règles à suivre lorsqu'on crée une mise en page de cette façon. Ne pas les respecter rendra les valeurs invalides et notre mise en page ne fonctionnera pas. La première règle est que **nous devons décrire une grille complète**, chaque cellule de la grille doit être remplie.

Si l'on veut laisser une ou plusieurs cellules vides, on exprime ce choix en insérant un point `.` ou une série de points `...` sans espace entre eux.

Si je change les valeurs de notre grille ainsi&nbsp;:

```
grid-template-areas: "one one two two"
                     "one one two two"
                     ". . four four"
                     "three three four four";

```

j'ai maintenant deux cellules sans contenu à l'intérieur. L'item `three` n'est affiché que dans la dernière rangée de la grille.



<figure role="group"><img src="/images/smashing-grid-area2.webp" alt="il y a maintenant un espace vide dans notre grille"/></figure>

**Nous ne pouvons définir chaque zone qu'une seule fois**, c'est à dire que nous ne pouvons utiliser cette propriété pour copier du contenu à deux endroits sur la grille&nbsp;! Les valeurs qui suivent seraient invalides et la propriété dans son ensemble serait ignorée, car nous avons dupliqué la zone `three`&nbsp;:

```
grid-template-areas: "one one three three"
                     "one one two two"
                     "three three four four"
                     "three three four four";
```

On ne peut pas non plus créer une zone non-rectangulaire, la propriété ne peut pas être utilisée pour créer une zone en forme de T ou de L, et les valeurs ci-dessous sont également invalides&nbsp;:

```
grid-template-areas: "one one two two"
                     "one one one one"
                     "three three four four"
                     "three three four four";
```

## Formater les chaînes de caractères

Dans mon CSS, j'aime bien afficher les valeurs de `grid-template-area` comme je le fais ci-dessus, avec chaque chaîne de caractères qui représente une rangée et chacune disposée en-dessous de la rangée précédente, car cela me donne une représentation visuelle de ma mise en page.

Pour améliorer encore la visualisation, on peut ajouter des espaces entre chaque cellule, mais aussi des points multiples pour les cellules vides, ainsi tout est bien aligné&nbsp;:

```
grid-template-areas: "one   one   two  two"
                     "one   one   two  two"
                     "..... ..... four four"
                     "three three four four";
```

Ceci étant, on peut, de manière tout à fait valide, aligner toutes les chaînes de caractères sur une seule ligne, on pourrait donc écrire&nbsp;:

```
grid-template-areas: "one one two two" "one one two two" "three three four four" "three three four four";
```

## Expliquer grid-template-areas et grid-area

La raison pour laquelle chaque zone doit être un rectangle complet est qu'elle doit avoir la même forme que si elle avait été créée par un placement basé sur les lignes. Si nous poursuivons avec notre exemple précédent, nous pourrions réaliser cette mise en page avec des lignes de grille comme dans le codepen ci-dessous. Ici, j'ai créé ma grille comme avant. Cette fois par contre, j'ai utilisé les lignes de grille pour positionner via les propriétés (raccourcies) `grid-column-start`, `grid-column-end`, `grid-row-start` et `grid-row-end`.

<figure class="break-out">
	<div><iframe loading="lazy" decoding="async" id="cp_embed_LYEdOdB" src="//codepen.io/rachelandrew/embed/LYEdOdB?height=460&amp;theme-id=light&amp;slug-hash=LYEdOdB&amp;user=rachelandrew&amp;default-tab=result" scrolling="no" frameborder="0" height="460" allowtransparency="true" allowfullscreen="true" name="CodePen Embed" title="CodePen Embed" class="cp_embed_iframe " style="width: 100%; overflow: hidden;"></iframe></div>
</figure>

<div class="pen">
<img src="/images/codepen.png" alt="" class="codepen-icon"><span>voir <a href="https://codepen.io/rachelandrew/pen/LYEdOdB/">
  Grid template areas : placement basé sur les lignes</a> de rachelandrew dans <a href="https://codepen.io">CodePen</a></span>
</div>

Note : si vous avez lu mon précédent article [Comprendre CSS Grid : les lignes Grid](/articles/comprendre-cssgrid-lines) vous savez déjà qu'il est possible d'utiliser `grid-area` comme un raccourci pour déclarer les quatre lignes en une fois.

Cela signifie que nous pourrions aussi créer notre mise en page avec l'ordre de lignes suivant&nbsp;:

- `grid-row-start`
- `grid-column-start`
- `grid-row-end`
- `grid-column-end`

```
.one {
  grid-area: 1 / 1 / 3 / 3;
}

.two {
  grid-area: 1 / 3 / 3 / 5;
}

.three {
  grid-area: 3 / 1 / 5 / 3;
}

.four {
  grid-area: 3 / 3 / 5 / 5;
}
```

la propriété `grid-area` est intéressante en ce qu'elle peut prendre des numéros de ligne ou des noms de ligne. Mais il est important de comprendre comment elle fonctionne dans chaque mode.

### Utiliser grid-area avec des numéros de ligne

Si vous utilisez la propriété `grid-area` avec des numéros de ligne, alors les lignes seront assignées dans l'ordre décrit ci-dessus.

Si vous omettez des valeurs —&nbsp;en ne fournissant qu'un, deux, ou trois numéros de ligne&nbsp;— les valeurs manquantes sont réglées sur `auto` ce qui signifie que la zone s'étendra sur une piste (ce qui est la valeur par défaut). Donc le CSS suivant placerait un item `grid-row-start: 3` avec toutes les autres valeurs réglées sur `auto`, et donc, l'item serait auto-placé dans la première piste de colonne disponible, et s'étendrait sur une piste de rangée et une piste de colonne.

```
grid-area: 3;
```

### Utiliser grid-area avec des idents

Si nous utilisons **ident** (qui est la façon pour Grid Layout d'appeller une zone nommée), alors la propriété `grid-area` prend aussi quatre lignes. Si vous avez des lignes nommées dans votre grille, comme décrit dans [Comprendre CSS Grid : créer un container Grid](/articles/comprendre-cssgrid-creer-un-container-grid), alors vous pouvez utiliser ces lignes nommées tout comme les lignes numérotées.

Attention cependant car, selon que vous utilisez ident avec des lignes nommées ou numérotées, le comportement sera différent dans le cas où vous omettez quelques lignes.

Ci-dessous, j'ai créé une grille avec des lignes nommées et utilisé `grid-area` pour placer un item (en omettant la valeur finale)&nbsp;:

```
.grid {
  display: grid;
  grid-template-columns:
      [one-start three-start] 1fr 1fr
      [one-end three-end two-start four-start] 1fr 1fr [two-end four-end];
  grid-template-rows:
    [one-start two-start] 100px 100px
    [one-end two-end three-start four-start] 100px 100px [three-end four-end];;
}

.two {
  grid-area: two-start / two-start / two-end;
}
```

Il nous manque donc le nom de ligne pour `grid-column-end`. La spécification dit que dans cette situation, `grid-column-end` doit utiliser une copie de `grid-column-start`. Si `grid-column-end` et `grid-column-start` sont identiques, alors la ligne finale est oubliée, et la valeur est réglée sur `auto`, donc l'item s'étend sur une piste, comme dans la version numérotée.

La même chose se produit si nous omettons la troisième valeur `grid-row-end`&nbsp;; elle devient la même que `grid-row-start` et donc devient `auto`.

Jetez un œil à cet exemple codepen de la façon dont `grid-area` est utilisé et comment il change ensuite la mise en page de l'item&nbsp;:

<figure class="break-out">
	<div><iframe loading="lazy" decoding="async" id="cp_embed_oNXXOvR" src="//codepen.io/rachelandrew/embed/oNXXOvR?height=640&amp;theme-id=light&amp;slug-hash=oNXXOvR&amp;user=rachelandrew&amp;default-tab=result" scrolling="no" frameborder="0" height="640" allowtransparency="true" allowfullscreen="true" name="CodePen Embed" title="CodePen Embed" class="cp_embed_iframe " style="width: 100%; overflow: hidden;"></iframe></div>
</figure>

<div class="pen">
<img src="/images/codepen.png" alt="" class="codepen-icon"><span>voir <a href="https://codepen.io/rachelandrew/pen/oNXXOvR/">
  Grid template areas : idents manquants dans grid-area</a> de rachelandrew dans <a href="https://codepen.io">CodePen</a></span>
</div>

Ceci explique pourquoi `grid-area` fonctionne avec une seule valeur ident représentant une zone nommée.

Quand nous créons une zone nommée avec la propriété `grid-template-areas`, le bord de chaque zone peut être référencé par un nom de ligne qui est le même que le nom de la zone utilisée. Dans notre cas, nous avons pu prendre notre zone nommée `one` et placer notre item en utilisant des lignes nommées comme suit&nbsp;:

```
.one {
  grid-row-start: one;
  grid-row-end: one;
  grid-column-start: one;
  grid-row-end: one;
}
```

Quand nous disons `grid-area: one`, nous omettons les trois dernières valeurs du raccourci `grid-area`&nbsp;; elles finissent comme des copies de notre première valeur —&nbsp;toutes, dans notre cas deviennent `one` et l'item est placé exactement comme dans la version longue de notre css.

Le fonctionnement du nommage dans Grid layout est très intelligent et permet des choses bien intéressantes que j'ai décrites dans mes articles précédents [Naming Things In CSS Grid Layout](https://www.smashingmagazine.com/2017/10/naming-things-css-grid-layout/) et [Editorial Design Patterns With CSS Grid And Named Columns](https://www.smashingmagazine.com/2019/10/editorial-design-patterns-css-grid-subgrid-naming/) (en anglais).

## Mettre en page des items avec grid-template-areas

Avec `grid-template-areas`, une cellule ne peut être occupée que par un seul nom, cependant nous pouvons toujours ajouter des items à la grille après avoir réalisé notre mise en page principale de cette manière. Pour cela, nous avons les lignes numérotées, comme d'habitude.

Dans l'exemple codepen suivant, j'ai ajouté un item supplémentaire et je l'ai placé par-dessus les items déjà présents en utilisant le positionnement basé sur les numéros de lignes.

<figure class="break-out">
	<div><iframe loading="lazy" decoding="async" id="cp_embed_bGddJRr" src="//codepen.io/rachelandrew/embed/bGddJRr?height=650&amp;theme-id=light&amp;slug-hash=bGddJRr&amp;user=rachelandrew&amp;default-tab=result" scrolling="no" frameborder="0" height="650" allowtransparency="true" allowfullscreen="true" name="CodePen Embed" title="CodePen Embed" class="cp_embed_iframe " style="width: 100%; overflow: hidden;"></iframe></div>
</figure>

<div class="pen">
<img src="/images/codepen.png" alt="" class="codepen-icon"><span>voir <a href="https://codepen.io/rachelandrew/pen/bGddJRr/">
  Grid template areas : placer un item avec des numéros de lignes</a> de rachelandrew dans <a href="https://codepen.io">CodePen</a></span>
</div>

Nous pouvons également utiliser les noms de lignes définis lorsque nous avons créé nos colonnes ou rangées. Mieux encore, nous aurons des noms de lignes créés par la formation des zones. Nous avons déjà vu comment nous pouvons obtenir quatre noms de lignes à partir du nom de la zone. Nous obtenons aussi une ligne de début au bord de chaque zone avec un `-start` ajouté au nom de la zone, et une ligne pour l'autre bord avec un `-end` ajouté.

Par conséquent, la zone nommée `one` a des lignes de début appelées `one-start` et de fin appelées `one-end`.

Nous pouvons ensuite utiliser ces noms implicites de lignes pour placer une item sur la grille. Cela peut être utile si on redéfinit la grille à plusieurs points de rupture (_breakpoints_), si nous voulons toujours que l'tem placé se trouve après un certain nom de ligne.

<figure class="break-out">
	<div><iframe loading="lazy" decoding="async" id="cp_embed_QWbbPMQ" src="//codepen.io/rachelandrew/embed/QWbbPMQ?height=640&amp;theme-id=light&amp;slug-hash=QWbbPMQ&amp;user=rachelandrew&amp;default-tab=result" scrolling="no" frameborder="0" height="640" allowtransparency="true" allowfullscreen="true" name="CodePen Embed" title="CodePen Embed" class="cp_embed_iframe " style="width: 100%; overflow: hidden;"></iframe></div>
</figure>

<div class="pen">
<img src="/images/codepen.png" alt="" class="codepen-icon"><span>voir <a href="https://codepen.io/rachelandrew/pen/QWbbPMQ/">
  Grid template areas : placer un item avec des noms implicites de lignes</a> de rachelandrew dans <a href="https://codepen.io">CodePen</a></span>
</div>

## Utiliser grid template areas dans un design responsif

Je construis souvent des composants et je me rends compte que `grid-template-areas` peut être bien utile pour voir exactement, déjà dans le CSS, à quoi mon composant va ressembler. De plus, la redéfinition du composant pour plusieurs points de rupture est très simple, il suffit de redéfinir les valeurs de `grid-template-areas`, avec parfois en plus un changement du nombre de pistes de colonnes.

Dans le CSS qui suit, j'ai défini une mise en page à une seule colonne pour mon composant. Ensuite, à une largeur minimum de 600px, je redéfinis le nombre de colonnes ainsi que la valeur de `grid-template-areas` afin de créer une mise en page sur deux colonnes. Ce qui est bien avec cette approche, c'est qu'il suffit de regarder le CSS pour voir à quoi ressemble ma mise en page&nbsp;!

```
.wrapper {
  background-color: #fff;
  padding: 1em;
  display: grid;
  gap: 20px;
  grid-template-areas:
    "hd"
    "bd"
    "sd"
    "ft";

}

@media (min-width: 600px) {
  .wrapper {
    grid-template-columns: 3fr 1fr;
    grid-template-areas:
      "hd hd"
      "bd sd"
      "ft ft";
  }
}

header { grid-area: hd; }
article {grid-area: bd; }
aside { grid-area: sd; }
footer { grid-area: ft; }
```

## Accessibilité

Il faut être prudent lorsqu'on utilise cette méthode et se rappeler qu'elle peut amener à une réorganisation du contenu qui peut se trouver déconnecté de l'ordre de la source. Un utilisateur naviguant avec la tabulation regarde l'écran tout en écoutant un texte dit par l'ordinateur, et ce dernier lit le contenu dans l'ordre où il figure dans la source HTML. Cela peut entraîner beaucoup de confusion pour l'utilisateur.

## Résumé

Voilà tous les tuyaux à connaître sur les propriétés `grid-template-area` et `grid-area` pour créer des mises en page. Si vous ne l'avez pas déjà utilisée, essayez là. Je la trouve très utile notamment pour expérimenter et je m'en sers beaucoup pour mes prototypes —&nbsp;même si, pour une raison ou une autre, je suis amenée plus tard à utiliser une autre méthode pour la production.

Comprendre CSS Grid : Grid template areas

Comprendre CSS Grid : les lignes Grid

La fonction **minmax()** introduite par la [spécification](https://www.w3.org/TR/css-grid-1/#valdef-grid-template-columns-minmax) CSS Grid Layout est l'une de ses fonctionnalités les plus utiles. **Cette fonction nous permet d'écrire un CSS extrêmement puissant et succinct** : nous pouvons maintenant donner pour valeur à une [piste de grille](/articles/css-grid-layout-guide-complet/#gridtrack) (_grid track_) une fonction acceptant une valeur minimum et une valeur maximum.

<h2>La fonction minmax()</h2>

La fonction `minmax()` définit un espace supérieur ou égal à une valeur minimum et inférieur ou égal à une valeur maximum. Elle accepte deux paramètres, une valeur minimum et une valeur maximum.

```
minmax(min, max)
```

Si la valeur maximum définie est inférieure à la valeur minimum, elle n'est pas prise en compte, et la fonction est traitée comme si elle ne présentait qu'une valeur minimum.

La fonction `minmax()` accepte six types de valeurs&nbsp;:

- longueur
- pourcentage
- longueur flexible
- `max-content`
- `min-content`
- `auto`

Passons-les en revue un par un.

<h3>Longueur</h3>

La valeur la plus simple que nous puissions passer à `minmax()` est une longueur. Prenons par exemple cette grille simple, qui a trois colonnes et une rangée unique.



<figure><img itemprop="url" src="/images/default-minmax.png" alt=""/></figure>

Avec la fonction `minmax()`, nous pouvons préciser que la cellule jaune doit avoir une largeur minimale de 100px et maximale de 200px. Lorsque l'écran est redimensionné, la valeur absolue change mais toujours entre ces deux limites.

```
.grid {
    display: grid;
    grid-template-columns: minmax(100px, 200px) 1fr 1fr;
}

```



<figure><img itemprop="url" src="/images/length-1-compressor.gif" alt=""/></figure>

Les deuxième et troisième colonnes se rétrécissent ou s'agrandissent pour occuper l'espace disponible de manière égale, mais la première aura toujours une largeur comprise entre 100 et 200px.

<h3>Pourcentage</h3>

Nous pouvons également utiliser les pourcentages. Admettons que nous voulions donner à notre cellule jaune une largeur minimale de 200px, pouvant aller jusqu'à 50% de la largeur de la grille.

```
.grid {
    display: grid;
    grid-template-columns: minmax(200px, 50%) 1fr 1fr;
}
```



<figure><img itemprop="url" src="/images/percentage-compressor.gif" alt=""/></figure>

Nous pouvons réduire la largeur de l'écran autant que nous voulons, la largeur de la cellule jaune ne sera jamais inférieure à 200px. Par contre, lorsque l'espace le permet, elle s'agrandit jusqu'à atteindre la moitié de la largeur de la grille.

<h3>Longueur flexible</h3>

La longueur flexible, qui utilise l'unité `fr`, est une nouvelle unité introduite par la [spécification CSS Grid Layout](https://www.w3.org/TR/css-grid-1/). Cette longueur représente une fraction de l'espace disponible dans la [grille container](/articles/css-grid-layout-guide-complet/#gridcontainer) (_container grid_). Par exemple, si nous avons une grille de 100px de large, avec deux colonnes, l'une ayant une largeur fixe de 20px et l'autre une largeur de 1fr, cette dernière aura du coup une dimension de 80px puisqu'elle prend l'espace disponible dans la grille.

```
.grid {
    display: grid;
    grid-template-columns: minmax(200px, 1fr) 1fr 1fr;
}
```



<figure><img itemprop="url" src="/images/fr-compressor.gif" alt=""/></figure>

Les colonnes ont toutes une dimension de 1fr dans les écrans larges, elles occupent donc le même espace dans la grille.

<h3>max-content</h3>

Le mot-clé `max-content` est une valeur particulière qui représente la "taille idéale" de la cellule. C'est la dimension minimale pour que le contenu de la cellule tienne sans encombre. Par exemple, si le contenu de la cellule est une phrase, la largeur idéale de la cellule sera celle qui permet à la phrase de tenir entièrement, sans retour à la ligne.
Reprenons notre exemple précédent et précisons que la cellule jaune doit être à la fois un minimum et un maximum de `max-content`.

```
.grid {
    display: grid;
    grid-template-columns: minmax(max-content, max-content) 1fr 1fr;
}
```



<figure><img itemprop="url" src="/images/max-content-compressor.gif" alt=""/></figure>

Comme on peut le voir, la colonne s'étend jusqu'à ce que la phrase tienne entièrement. Comme la minimale et la maximale ont pour valeur `max-content`, la largeur de la colonne reste toujours identique.

<h3>min-content</h3>

Le mot-clé `min-content` est elle aussi une valeur particulière. Elle représente la plus petite dimension telle que le contenu ne déborde pas —&nbsp;sauf si ce débordement est inévitable.
Pour illustrer la différence entre `min-content` et `max-content`, nous pouvons utiliser le même contenu que dans l'exemple précédent mais avec les minimale et maximale égales à `min-content`&nbsp;:

```
.grid {
    display: grid;
    grid-template-columns: minmax(min-content, min-content) 1fr 1fr;
}
```



<figure><img itemprop="url" src="/images/min-content-compressor.gif" alt=""/></figure>

On voit que le contenu de la cellule est disposé de façon à occuper le moins d'espace horizontal possible sans déborder de la cellule.

<h3>auto</h3>

Enfin, nous avons `auto`. Cette dernière valeur a une signification différente selon qu'on l'utilise comme valeur minimum ou maximum de la fonction `minmax()`.
Si c'est le maximum, la valeur `auto` est équivalente à la valeur `max-content`. Si on l'utilise comme valeur minimum, `auto` représente la plus grande valeur minimale possible pour la cellule. Cette _plus grande valeur minimale_ est différente de la valeur `min-content` et spécifiée par `min-width/min-height`.
Pour l'illustrer, voici ce qui se passe lorsque la cellule jaune est réglée sur `auto` dans le minimum et le maximum.

```
.grid {
    display: grid;
    grid-template-columns: minmax(auto, auto) 1fr 1fr;
}

```



<figure><img itemprop="url" src="/images/auto-compressor.gif" alt=""/></figure>

<h2>Design responsive sans media queries</h2>

Comme nous l'avons vu, les cas d'utilisation de `minmax()` sont multiples. Mais peut-être le cas d'usage le plus courant et le plus utile est-il la possibilité de créer des designs responsive sans recours aux media queries.

Prenons cette grille par exemple&nbsp;:



<figure><img itemprop="url" src="/images/responsive-compressor.gif" alt=""/></figure>

Chaque colonne de la grille a une largeur minimale de 200px. À mesure que l'écran est redimensionné, le nombre de colonnes change, pour s'adapter à leur largeur idéale. Avec CSS Grid et la fonction `minmax()`, c'est l'affaire de deux ligne de CSS&nbsp;:

```
.grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
}
```

À côté de la fonction `minmax()`, il y a deux autres ingrédients-clés&nbsp;:

- `repeat()`: cette fonction nous permet de spécifier la même valeur pour plusieurs colonnes de la grille. Elle prend deux valeurs, le nombre de répétitions et la valeur à répéter.
- `auto-fit`: ce mot-clé peut être utilisé avec la fonction `repeat()`à la place du nombre de répétitions. Le nombre de colonnes est donc modifié de manière flexible, en fonction de la largeur possible pour chaque colonne.

Une limite importante de cette technique toutefois est qu'elle ne fonctionne qu'avec des colonnes de largeur égale. Nous devons utiliser la fonction `repeat()`avec le mot-clé `auto-fit` car c'est ce qui permet la flexibilité du nombre de colonnes. Cela étant, si ce cas de figure correspond à vos besoin, c'est une technique très utile.

CSS Grid : comment fonctionne minmax()

CSS Grid : la différence entre grilles explicite et implicite

CSS Grid : grille implicite et placement automatique

CSS Grid Layout, guide complet

## Plongée profonde dans CSS Grid

Vous vous rappelez la réponse de <a href="/auteurs/rachel-andrew">Rachel Andrew</a> à la question "utiliser CSS Grid ou Flexbox"&nbsp;? Sinon vous pouvez [regarder la vidéo](https://www.youtube.com/watch?v=MXEzJ-IncX0&feature=youtu.be&t=1274) (en anglais).

<blockquote><p>Flexbox est fait pour les layouts unidimensionnels, CSS Grid est fait pour les layouts en 2 dimensions</p>
<p><cite><a href="/auteurs/rachel-andrew">Rachel Andrew</a></cite></p></blockquote>

Je suis sûre que beaucoup l'ont réalisé avant moi, mais avant ma relation torride d'un mois avec CSS Grid je ne m'étais pas rendue compte à quel point Flexbox et Grid sont faits pour s'entendre. C'était quelque chose du genre oeufs et bacon, pomme et cannelle, beurre de cacahuète et confiture —&nbsp;ah ça y est, j'ai faim tout d'un coup.

Vous avez peut-être vu que j'ai apporté une contribution au [CSS Reference de Codrops](https://tympanus.net/codrops/css_reference/). Sérieux, c'est une des meilleures choses qui me soit arrivées en 2016. Une des entrées qui manquaient encore était CSS Grid. Avant de m'y mettre, j'avais juste bricolé un peu avec Grid en construisant un prototype pour [Penang Hokkien](http://penang-hokkien.gitlab.io/) utilisant Grid, histoire de voir si le mode vertical fonctionnerait mieux qu'avec Flexbox.

Et puis je me suis attelée au boulot et j'ai écrit [l'article](https://tympanus.net/codrops/css_reference/grid/).

3 semaines plus tard, j'avais l'impression d'avoir fusionné avec [Metal Cactuar](http://exvius.gamepedia.com/Metal_Cactuar) puissance maximum (désolé, _Final Fantasy_ fait partie de ma vie), autrement dit j'étais passé au niveau supérieur.

J'ai passé beaucoup de temps à éplucher la spécification, la lecture des [articles](https://blogs.igalia.com/mrego/) de [Manuel Rego Casasnovas](https://twitter.com/regocas) sur CSS Grid m'a beaucoup aidé ainsi que l'[antisèche de Rachel Andrew](https://rachelandrew.co.uk/css/cheatsheets/box-alignment) à un moment de grande confusion.

Un conseil : quand vous essayez d'apprendre une nouvelle propriété CSS, ayez toujours sous la main un template vide avec lequel vous pourrez expérimenter. Ça m'a vraiment été utile avec une propriété aussi nouvelle que Grid. Je sais, il y a aussi [Codepen](https://codepen.io/) et tout, mais rien ne vaut un template vierge pour une expérimentation libre de toute distraction.

## Exemples et démos

Pour analyser toutes les propriétés, j'ai commencé à construire des grilles très basiques, juste pour voir le fonctionnement des valeurs de propriétés. Si vous avez regardé la syntaxe de `grid-template-rows` dans la spécification, vous savez que ce n'était pas une tâche triviale. Grid lui-même n'est compliqué à apprendre. Mais comme il a été conçu pour être flexible et puissant, il vous faudra un peu de temps pour rentrer dans son fonctionnement.

Quelques-unes des grilles basiques se sont transformées en démos. Certaines trouvaient leur inspiration dans des conversations avec des membres du [CSS Layout Club](https://www.meetup.com/fr-FR/CSS-Layout-Club/). J'ai aussi glané quelques idées dans le cours de Coursera [Ideas from the History of Graphic Design](https://www.coursera.org/learn/graphic-design-history), il y a plein de belles choses (la semaine dernière était consacrée au [Bauhaus](https://fr.wikipedia.org/wiki/Bauhaus)).

Je suis tombée sur cette page de [Malerei, Fotografie, Film](http://bibliothequekandinsky.centrepompidou.fr/imagesbk/RLPF727/M5050_X0031_LIV_RLPF0727.pdf) par [László Moholy-Nagy](https://fr.wikipedia.org/wiki/L%C3%A1szl%C3%B3_Moholy-Nagy), dont la mise en page utilisait une grille originale et l'idée m'est venue qu'on pouvait peut-être la réaliser en CSS...



<figure role="group"><img src="/images/126-640.jpeg" alt="grille texte et images, texte horizontal et vertical, symboles, fortes séparations"/><figcaption>Page 126 de Malerei, Fotografie, Film</figcaption></figure>

## Le Bauhaus dans mon navigateur

Voici comment j'ai procédé. J'ai dessiné les lignes de la grille par-dessus l'image en utilisant Sketch, de façon à me faire une idée du nombre de colonnes nécessaires. Dans cet exemple, c'était 1 large colonne suivie de 5 colonnes plus étroites de largeur égale, et j'ai laissé ensuite le navigateur se débrouiller avec la hauteur des rangées.

```
.grid {
  display: grid;
  grid-template-columns: 30% 9% 9% 9% 9% 9%;
  justify-content: center; /* pour justifier la grille au centre du container */
}
```

Ensuite, il y a eu tout le code de placement avec les propriétés `grid-row` et `grid-column`. Mais si vous regardez à nouveau l'image originale, vous verrez que le contenu de chaque cellule a son propre alignement. Par exemple, celui de la première cellule est à droite, celui de la deuxième est en bas à gauche, etc.

👉🏿&nbsp;_NdT&nbsp;: pour consulter les définitions et utilisation des propriétés, voyez l'article [CSS Grid Layout, guide complet](/articles/css-grid-layout-guide-complet))_.

Mon premier réflexe, vu que j'avais cet alignement de boîtes, a été d'appliquer `justify-self` et `align-self` là où c'était nécessaire, pour ajuster les positions de contenu à l'intérieur de chaque cellule. Bien tenté, mais à côté... Le problème est que ces deux propriétés affectent la quantité d'espace occupée par la cellule.

Le design du Bauhaus présente des bordures noires très frappantes autour de chaque cellule. La propriété `border` s'applique à l'item de grille. Toute propriété d'alignement de grille autre que `stretch` adaptera la dimension de l'item grid à son contenu. Toute bordure appliquée à un item grid s'adaptera au contenu de l'item, par conséquent je ne pouvais pas procéder ainsi.



<figure><img src="/images/fit.svg" alt="les bordures sont sur les items, mais les dimensions de l'item ne sont pas celles de la cellule"/><figcaption>Ce ne sont pas les bordures souhaitées !</figcaption></figure>

## Flexbox à la rescousse

Par défaut, tous les items grid se comportent comme si leur alignement avait été réglé sur `stretch` sur chaque axe. J'ai donc laissé tomber, pour permettre à la grille de ressembler à une grille, et à la place, j'ai appliqué `display: flex` à l'item grid, ce qui m'a permis d'utiliser les propriétés d'alignement flex sur le container flex, pour positionner le contenu de mon item grid.



<figure><img src="/images/flex.svg" alt="les bordures correspondent aux lignes horizontales et verticales de la grille, et ne recouvrent pas les items lorsque ceux-ci s'étendent sur plusieurs cellules"/><figcaption>Ah voilà, cette fois-ci c'est bon.</figcaption></figure>

```
.grid__item:nth-child(5) {
  grid-row: 3 / 5;
  border-right: 1em solid;
  padding: 1em;

  display: flex;
  align-items: flex-start;
  justify-content: flex-end;
}
```

Le code ressemble à ce qui précède, mais ce que je veux souligner avant tout c'est qu'il s'agit d'une formidable technique pour la mise en page. Grid pour l'organisation générale, et Flexbox pour les ajustements spécifiques. Voici ce que ça donne [sur Codepen](http://codepen.io/huijing/pen/PpqomV) si vous voulez voir le résultat final.

<figure class="break-out">
	<div><iframe loading="lazy" decoding="async" id="cp_embed_PpqomV" src="//codepen.io/huijing/embed/PpqomV?height=600&amp;theme-id=light&amp;slug-hash=PpqomV&amp;user=huijing&amp;default-tab=result" scrolling="no" frameborder="0" height="600" allowtransparency="true" allowfullscreen="true" name="CodePen Embed" title="CodePen Embed" class="cp_embed_iframe " style="width: 100%; overflow: hidden;"></iframe></div>
</figure>

<div class="pen">
<img src="/images/codepen.png" alt="" class="codepen-icon"><span>voir le <em>Pen</em><a href="http://codepen.io/huijing/pen/PpqomV/">
  Malerei, Fotografie, Film (pg. 126)</a> de Chen Hui Jing dans <a href="https://codepen.io">CodePen</a></span>
</div>

## Bonus : réaliser des formes en CSS

À part les deux photos, tout ce qui est sur la page est réalisé en CSS, autrement dit la flèche et la roue dentée sont des `div` auxquelles j'ai appliqué des styles. J'aime faire des formes en CSS, avec une `div` unique si possible. Il suffit pour cela de quelques propriétés pratiques, `box-shadow`, `border` et [les pseudo-éléments](/articles/les-pseudo-elements-css-before-et-after/).

### La flèche

Les flèches sont assez simples à réaliser. Il vous faut juste un pseudo-élément pour la pointe. Le corps de la flèche est une simple `div` à laquelle on donne une `position: relative` de façon à positionner la pointe par rapport au corps. La pointe est un triangle, qu'on peut réaliser grâce à [l'astuce de la bordure](http://stackoverflow.com/questions/27492191/how-to-make-a-fancy-arrow-using-css).

```
.arrow {
  width: 0.5em;
  height: 65%;
  background-color: #000;
  position: relative;

  &::after {
    display: block;
    content: '';
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    bottom: -1em;
    border-style: solid;
    border-width: 1em 1em 0 1em;
    border-color: #000 transparent transparent transparent;
  }
}
```

### La roue dentée

Là, c'est un peu plus compliqué. Le corps de la roue est un cercle, réalisé via `border-radius: 50%`, mais les dents vont nous demander un peu de travail. Je n'ai pas pu le faire avec une seule `div` cette fois-ci (mais si quelqu'un y arrive, contactez-moi). J'ai ajouté une `div` interne. La bonne nouvelle c'est que toutes les dents ont une forme identique, donc l'astuce `box-shadow` peut être utilisée ici.

```
.gear {
  height: 5em;
  width: 5em;
  background-color: #000;
  border-radius: 50%;
  position: relative;

  &::before,
  &::after {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    display: block;
    content: '';
  }

  &::before {
    height: 3em;
    width: 1em;
    box-shadow: 0em -3em 0em 0em #000, 0em 3em 0 0em #000;
  }

  &::after {
    height: 1em;
    width: 3em;
    box-shadow: 3em 0 0em 0em #000, -3em 0 0 0em #000;
  }
}
```

Le corps de la roue et les 4 dents directionnées comme les aiguilles d'une boussole ont été réalisées avec une seule `div` et 2 pseudo-éléments. Pour les 4 autres dents, j'ai utilisé la `div` intérieure avec des pseudo-éléments et fait tourner les `box-shadow`. Je dois toujours résoudre le problème de `transform-origin` car je trouve qu'il y a encore une certaine asymétrie.

```
.inner-gear {
  height: 2em;
  width: 2em;
  border-radius: 50%;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  background-color: #e1e1d5;

  &::before,
  &::after {
    position: absolute;
    display: block;
    content: '';
  }

  &::before {
    height: 3em;
    width: 1em;
    box-shadow: 0em -3em 0em 0em #000, 0em 3em 0 0em #000;
    transform: rotate(45deg);
    transform-origin: (75% 75%);
  }

  &::after {
    height: 1em;
    width: 3em;
    box-shadow: 3em 0 0em 0em #000, -3em 0 0 0em #000;
    transform: rotate(45deg);
    transform-origin: (25% 75%);
  }
}
```

### Conclusion

CSS Grid est vraiment génial, et nous sommes nombreux à le penser. [Jen Simmons](http://jensimmons.com/) a compilé une liste de bonnes ressources Grid, faites un tour sur [Learn CSS Grid](http://jensimmons.com/post/feb-27-2017/learn-css-grid) et essayez de construire quelque chose avec Grid. Vous ne le regretterez pas&nbsp;!

Grid et Flexbox, le duo gagnant

grid-template-areas

Grille CSS et formes personnalisées, 1


Un sticky footer ("pied de page collant" ou "bas de page adhérant") est un pied de page qui reste "collé" au bas de la fenêtre du navigateur —&nbsp;mais pas toujours&nbsp;: s'il y a assez de contenu pour remplir la fenêtre, le footer suit le contenu et n'apparaît pas, si au contraire il n'y a pas assez de contenu, le footer sera collé en bas de page.

<figure><img src="/images/sticky_footer-compressor.jpeg" alt=""/></figure>

Voici 5 façons possibles de créer un sticky footer, des plus anciennes aux plus récentes&nbsp;:

<h2>Marges négatives sur les wrappers</h2>

Autrefois on utilisait un élément qui enveloppait tout le contenu à l'exception du pied de page. Cet élément "wrapper" avait une marge négative égale à la hauteur du pied de page.

```html
<body>
  <div class="wrapper">
    content

    <div class="push"></div>
  </div>
  <footer class="footer"></footer>
</body>
```

et

```css
html,
body {
  height: 100%;
  margin: 0;
}
.wrapper {
  min-height: 100%;

  /* Égal à la hauteur du footer */
  /* Tient compte aussi d'une possible margin-bottom du dernier enfant */
  margin-bottom: -50px;
}
.footer,
.push {
  height: 50px;
}
```

<div class="pen">
<img src="/images/codepen.png" alt="" class="codepen-icon"><span>voir le <em>Pen</em><a href="https://codepen.io/chriscoyier/pen/VjZmGj">
  Sticky Footer with Negative Margin 1</a> de Chris Coyier dans <a href="https://codepen.io">CodePen</a></span>
</div>

Pour y parvenir on a utilisé un élément supplémentaire (le `.push`) pour s'assurer que la marge négative ne tire pas le footer vers le haut ce qui aurait recouvert une partie du contenu.

<h2>Marge supérieure négative sur le footer</h2>

[Cette autre technique](https://www.cssstickyfooter.com/) ne faisait pas appel à un élément _push_ mais à un élément enveloppant supplémentaire dans lequel on appliquait un padding inférieur correspondant. Là encore, pour éviter que la marge négative ne fasse passer le footer par-dessus un contenu.

```html
<body>
  <div class="content">
    <div class="content-inside">content</div>
  </div>
  <footer class="footer"></footer>
</body>
```

et

```css
html,
body {
  height: 100%;
  margin: 0;
}
.content {
  min-height: 100%;
}
.content-inside {
  padding: 20px;
  padding-bottom: 50px;
}
.footer {
  height: 50px;
  margin-top: -50px;
}
```

<div class="pen">
<img src="/images/codepen.png" alt="" class="codepen-icon"><span>voir le <em>Pen</em><a href="https://codepen.io/chriscoyier/pen/aZoBMb">
  Sticky Footer with Negative Margin 2</a> de Chris Coyier dans <a href="https://codepen.io">CodePen</a></span>
</div>

Le point commun à ces deux techniques est qu'elles requièrent toutes deux des éléments HTML supplémentaires qui n'ont d'autre utilité que positionnelle.

<h2>Hauteur du wrapper calculée</h2>

[Une façon](https://priteshgupta.com/2016/05/sticky-css-footer/) d'éviter le recours à des éléments HTML inutiles consiste à ajuster la hauteur de l'élément enveloppant à l'aide de CSS `calc()`. Il n'y a plus de tuilage, ce sont simplement deux éléments empilés l'un sur l'autre ayant une hauteur totale de 100%.

```html
<body>
  <div class="content">content</div>
  <footer class="footer"></footer>
</body>
```

et

```css
.content {
  min-height: calc(100vh - 70px);
}
.footer {
  height: 50px;
}
```

<div class="pen">
<img src="/images/codepen.png" alt="" class="codepen-icon"><span>voir le <em>Pen</em><a href="https://codepen.io/chriscoyier/pen/jqRXBz">
  Sticky Footer with calc();</a> de Chris Coyier dans <a href="https://codepen.io">CodePen</a></span>
</div>

Remarquez les 70px dans la formule de `calc()`, comparés aux 50px de la taille fixe du footer. On suppose en fait que le dernier item du contenu aura une marge inférieure de 20px. C'est donc la somme de cette marge et de la hauteur du footer qu'il convient de soustraire de la hauteur du viewport. Et remarquez aussi que nous utilisons les unités viewport ici (`vh`) afin d'éviter d'avoir à régler la hauteur de `body` à 100% avant de pouvoir régler celle du wrapper à 100%.

<h2>Il y a Flexbox</h2>

Le grand problème des trois techniques précédentes est qu'elles requièrent un footer de hauteur fixe. Dans le design web, les hauteurs fixes sont en général un mauvais choix, le contenu peut changer, les choses sont flexibles et donc les hauteurs fixes devraient être évitées. La solution [Flexbox](/tags/flexbox) non seulement ne nécessite pas d'élément supplémentaire mais permet d'avoir une hauteur de footer variable.

```html
<body>
  <div class="content">content</div>
  <footer class="footer"></footer>
</body>
```

et

```css
html,
body {
  height: 100%;
}
body {
  display: flex;
  flex-direction: column;
}
.content {
  flex: 1 0 auto;
}
.footer {
  flex-shrink: 0;
}
```

<div class="pen">
<img src="/images/codepen.png" alt="" class="codepen-icon"><span>voir le <em>Pen</em><a href="https://codepen.io/chriscoyier/pen/RRbKrL">
  Sticky Footer with Flexbox</a> de Chris Coyier dans <a href="https://codepen.io">CodePen</a></span>
</div>

On pourrait même ajouter un header ou d'autres éléments. Le "truc" avec Flexbox c'est&nbsp;:

- soit `flex: 1` sur l'élément enfant qu'on veut agrandir pour qu'il remplisse l'espace (ici, le contenu),
- soit `margin-top: auto` pour pousser l'élément enfant aussi loin que possible de son voisin (ou toute autre marge selon la direction souhaitée).

N'oubliez pas que nous avons un [guide complet sur Flexbox](/articles/flexbox-guide-complet/) ici même pour plus d'infos.

<h2>Il y a CSS Grid</h2>

[CSS Grid Layout](/tags/cssgrid) est plus récent que Flexbox mais [largement supporté aujourd'hui](https://caniuse.com/#feat=css-grid). On peut l'utiliser facilement pour créer un sticky footer.

```html
<body>
  <div class="content">content</div>
  <footer class="footer"></footer>
</body>
```

et

```css
html {
  height: 100%;
}
body {
  min-height: 100%;
  display: grid;
  grid-template-rows: 1fr auto;
}
.footer {
  grid-row-start: 2;
  grid-row-end: 3;
}
```

<div class="pen">
<img src="/images/codepen.png" alt="" class="codepen-icon"><span>voir le <em>Pen</em><a href="https://codepen.io/chriscoyier/pen/YWKNrE">
  Sticky Footer with Grid</a> de Chris Coyier dans <a href="https://codepen.io">CodePen</a></span>
</div>

N'oubliez pas que nous avons un [guide complet sur CSS Grid](/articles/css-grid-layout-guide-complet) ici même pour plus d'infos.


La Cascade

cssgrid

Ressources complémentaires en français

Ressources complémentaires en anglais

Outils, jeux, antisèches