Alignement en CSS, un guide complet

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=400&amp;theme-id=light&amp;slug-hash=VwLLRKE&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/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" width="667" height="594" 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" width="667" height="594" 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=400&amp;theme-id=light&amp;slug-hash=LYEdOdB&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/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=500&amp;theme-id=light&amp;slug-hash=oNXXOvR&amp;user=rachelandrew&amp;default-tab=result" scrolling="no" frameborder="0" height="500" 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=600&amp;theme-id=light&amp;slug-hash=bGddJRr&amp;user=rachelandrew&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 <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=600&amp;theme-id=light&amp;slug-hash=QWbbPMQ&amp;user=rachelandrew&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 <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 role="group"><img itemprop="url" src="/images/default-minmax.png" width="895" height="250" 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 role="group"><img itemprop="url" src="/images/length-1-compressor.gif" width="895" height="166" 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 role="group"><img itemprop="url" src="/images/percentage-compressor.gif" width="885" height="250" 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 role="group"><img itemprop="url" src="/images/fr-compressor.gif" width="895" height="166" 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 role="group"><img itemprop="url" src="/images/max-content-compressor.gif" width="895" height="166" 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 role="group"><img itemprop="url" src="/images/min-content-compressor.gif" width="895" height="308" 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 role="group"><img itemprop="url" src="/images/auto-compressor.gif" width="895" height="222" 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 role="group"><img itemprop="url" src="/images/responsive-compressor.gif" width="895" height="352" 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 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).

> _Flexbox est fait pour les layouts unidimensionnels, CSS Grid est fait pour les layouts en 2 dimensions_. (Rachel&nbsp;Andrew)

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" width="640" height="804" 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 width="760" height="509" 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 width="760" height="507" 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


Un sticky footer ("pied de page collant") 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 role="group"><img itemprop="url" loading="lazy" src="/images/sticky_footer-compressor.jpeg" width="901" height="602" 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 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 Grid</h2>

CSS Grid Layout 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>


La Cascade

cssgrid

Alignement en CSS, un guide complet

Comprendre CSS Grid : créer un container Grid

Comprendre CSS Grid : Grid template areas

Comprendre CSS Grid : les lignes Grid

CSS Grid : comment fonctionne minmax()

CSS Grid Layout, guide complet

Grid et Flexbox, le duo gagnant

Sticky footer, de 5 façons

Ressources complémentaires en français

Ressources complémentaires en anglais

Outils, jeux, antisèches