Faire en sorte que le conteneur de grille remplisse des colonnes au lieu de lignes

Question

Je veux que ma grille se remplisse verticalement comme ceci :

1 4 7
2 5 8
3 6 9
... nombre arbitraire de lignes supplémentaires.

Au lieu de cela, il se remplira horizontalement comme ceci :

1 2 3
4 5 6
7 8 9≪/pré>
<p><strong>Je souhaite spécifier le nombre de colonnes dans la grille, pas le nombre de lignes. </strong></p>
<p>Voici à quoi ressemble mon div en utilisant le style CSS en ligne : </p>
<p><br /></p>
<pre class="snippet-code-html lang-html Prettyprint-override"><code><div style="display:grid; grid-template-columns:1fr 1fr 1fr;">
  <div>1</div>
  <div>2</div>
  <div>3</div>
  <div>4</div>
  <div>5</div>
  <div>6</div>
  <div>7</div>
  <div>8</div>
  <div>9</div>
</div></code>

Il est important que la grille ait une largeur de 3 colonnes, mais je souhaite que les éléments remplissent des colonnes et non des lignes. Est-ce possible dans la grille CSS ? J'ai lu ceci https://css-tricks.com/snippets/css/complete-guide-grid/ mais je ne vois rien sur la commande.

CSS Flexbox a flex-direction, CSS Grid n'a-t-il pas une propriété similaire ?

Answer 1

Pour une grille fluide verticalement qui crée de nouvelles colonnes selon vos besoins et n'a pas de lignes définies, pensez à utiliser Mise en page multi-colonnes CSS (Exemple). CSS Grid Layout (au moins tel qu'il est actuellement implémenté - Niveau 1) ne peut pas effectuer cette tâche. La question est la suivante :

Dans la disposition en grille CSS, propriété grid-auto-flow 和 grid-template-rows / grid-template-columns.

Plus précisément, les éléments de la grille peuvent s'écouler correctement dans le sens horizontal si grid-auto-flow: row（默认设置）和grid-template-columnsgrid-auto-flow: row (la valeur par défaut) et

grid-template-columns sont définis, créant automatiquement de nouvelles lignes comme nécessaire. Ce concept est illustré dans le code de la question.

#container {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  grid-auto-flow: row;
}

<div id="container">
  <div>1</div>
  <div>2</div>
  <div>3</div>
  <div>4</div>
  <div>5</div>
  <div>6</div>
  <div>7</div>
  <div>8</div>
  <div>9</div>
</div>

grid-template-rowsCependant, après être passé à

grid-template-rows, les éléments de la grille sont empilés dans une seule colonne.

#container {
  display: grid;
  grid-template-rows: 1fr 1fr 1fr;
  grid-auto-flow: row;
}

<div id="container">
  <div>1</div>
  <div>2</div>
  <div>3</div>
  <div>4</div>
  <div>5</div>
  <div>6</div>
  <div>7</div>
  <div>8</div>
  <div>9</div>
</div>

grid-auto-flow: row 和 grid-template-rows 不会自动创建列。必须定义grid-template-columns（因此，与grid-auto-flowL'utilisation de

grid-auto-flow: row et

grid-template-rows ne crée pas automatiquement de colonnes.

grid-template-columns doit être défini (donc inversement lié à

grid-auto-flow).

#container {
  display: grid;
  grid-template-rows: 1fr 1fr 1fr;
  grid-template-columns: 1fr 1fr 1fr;
  grid-auto-flow: row;
}

<div id="container">
  <div>1</div>
  <div>2</div>
  <div>3</div>
  <div>4</div>
  <div>5</div>
  <div>6</div>
  <div>7</div>
  <div>8</div>
  <div>9</div>
</div>

grid-auto-flow:column和grid-template-rows La situation inverse a également le même comportement.

Avec

grid-auto-flow:column et grid-template-rows définis, les éléments de la grille s'écoulent bien verticalement et créent automatiquement de nouvelles colonnes selon les besoins.

grid-template-columns

#container {
  display: grid;
  grid-template-rows: 1fr 1fr 1fr;
  grid-auto-flow: column;
}

<div id="container">
  <div>1</div>
  <div>2</div>
  <div>3</div>
  <div>4</div>
  <div>5</div>
  <div>6</div>
  <div>7</div>
  <div>8</div>
  <div>9</div>
</div>

Cependant, après être passé à grid-template-columns, les éléments de la grille sont empilés dans une rangée. (C'est la question que la plupart des gens se posent, y compris dans cette question.)

grid-template-rows

#container {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  grid-auto-flow: column;
}

<div id="container">
  <div>1</div>
  <div>2</div>
  <div>3</div>
  <div>4</div>
  <div>5</div>
  <div>6</div>
  <div>7</div>
  <div>8</div>
  <div>9</div>
</div>

Les lignes ne sont pas créées automatiquement. Cela nécessite de définir des grid-template-rows. (C'est la solution la plus couramment proposée, mais elle est généralement rejetée car la mise en page comporte un nombre variable de lignes.)

#container {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  grid-template-rows: 1fr 1fr 1fr;
  grid-auto-flow: column;
}

<div id="container">
  <div>1</div>
  <div>2</div>
  <div>3</div>
  <div>4</div>
  <div>5</div>
  <div>6</div>
  <div>7</div>
  <div>8</div>
  <div>9</div>
</div>

🎜 🎜Pensez donc à adopter la 🎜solution de mise en page multi-colonnes🎜 comme mentionné ci-dessus. 🎜

Référence de spécification : 7.7. Placement automatique : grid-auto-flow attribut