Catégories
Astuces et Design

grid-auto-flow: CSS Grid :: flex-direction: Flexbox

Lors de la définition d'un élément parent sur display: flex, ses éléments enfants s'alignent de gauche à droite comme ceci:

Maintenant, l'une des choses intéressantes que nous pouvons faire avec flexbox est de changer la direction afin que les éléments enfants soient empilés verticalement les uns sur les autres dans une colonne. Nous pouvons le faire avec le flex-direction propriété (ou avec le flex-flow sténographie):

D'accord, cool. Mais comment pourrais-je faire quelque chose comme ça avec CSS Grid? Comme dans, disons que je veux que tous ces éléments enfants soient alignés comme ceci:

1 3 5 7
--------
2 4 6 8

…au lieu de cela:

1 2 3 4
--------
5 6 7 8

Par défaut, lorsque je configure un élément parent pour utiliser CSS Grid, les éléments seront positionnés de gauche à droite comme flexbox. Dans l'exemple ci-dessous, je demande à la grille d'avoir 6 colonnes et 2 lignes, puis je laisse les éléments enfants remplir chaque colonne de la première ligne avant de remplir les colonnes de la seconde. Vous savez, comportement de retour à la ligne standard.

.parent {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  grid-template-rows: repeat(2, 150px);
  gap: 20px;
}

Fondamentalement, ce que je veux ici, c'est le contraire: je veux que nos éléments enfants remplissent la colonne 1, ligne 1 et ligne 2, puis passez à la colonne suivante. En d'autres termes, l'habillage de colonne! Je sais que si je crée une grille avec des lignes et des colonnes, je pourrais placer individuellement ces éléments dans ces positions. Ainsi:

.parent {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  grid-template-rows: repeat(6, 150px);
}

.child-1 {
  grid-column: 1;
  grid-row: 1;
}

.child-2 {
  grid-column: 1;
  grid-row: 2;
}

.child-3 {
  grid-column: 2;
  grid-row: 1;
}

/* etc, etc. */

D'accord, super! Cela me donne ce que je veux, mais c'est une énorme douleur de devoir définir individuellement la position de chaque élément. J'ai l'impression d'utiliser position: absolute et cela ne semble pas particulièrement intelligent. Et si je voulais juste que cette mise en page soit faite pour moi, de sorte que chaque nouvel élément enfant s'aligne au bon endroit… correctement?

Voici ce que je demande (je pense): existe-t-il une version CSS Grid de flex-direction: column?

Eh bien, après avoir cherché un peu partout, Rachel Andrew m'a indiqué la bonne réponse dans son terrain de jeu plutôt excellent, Grid by Example. Et comme vous pouvez le voir dans cette démo, Rachel nous montre comment faire exactement cela:

Neato! Rachel fait ça avec le grid-auto-flow property: il indique à un conteneur de grille comment remplir l'espace inoccupé avec des éléments enfants. Je peux donc le faire simplement en écrivant ceci:

.parent {
  display: grid;
  grid-auto-flow: column;
  /* set up columns and rows here */
}

Par défaut, les éléments enfants d'une grille rempliront chaque colonne jusqu'à ce qu'une ligne soit remplie, puis couler dans le prochain en dessous. C'est pourquoi la valeur par défaut pour grid-auto-flow est réglé sur row car nous remplissons d'abord les lignes de la grille. Mais si nous le réglons sur column, puis chaque nouvel élément remplira tout l'espace de la colonne 1 avant de passer à la colonne 2, etc.

.parent {
  display: grid;
  grid-auto-flow: column;
  grid-template-columns: repeat(6, 1fr);
  grid-template-rows: repeat(2, 150px);
}

C'est ce que le couler partie de grid-auto-flow signifie et pendant très longtemps, j'ai ignoré la propriété parce qu'elle semblait (ne riez pas) effrayant. Juste lire le mot grid-auto-flow est suffisant pour me donner envie d'éteindre mon ordinateur portable et de marcher dans l'océan.

Mais! C'est une propriété assez utile et qui a beaucoup de sens, surtout si vous la considérez comme la version CSS Grid de flex-direction.

Laisser un commentaire

Votre adresse de messagerie ne sera pas publiée. Les champs obligatoires sont indiqués avec *