Jadikan lajur isi bekas grid bukannya baris

Question

Saya mahu grid saya diisi secara menegak seperti ini:

1 4 7
2 5 8
3 6 9
... bilangan baris tambahan sewenang-wenangnya.

Sebaliknya, ia akan mengisi secara mendatar seperti ini:

1 2 3
4 5 6
7 8 9
Saya mahu menentukan bilangan lajur dalam grid, bukan bilangan baris. 
Beginilah rupa div saya menggunakan penggayaan CSS sebaris: 



  
1
  
2
  
3
  
4
  
5
  
6
  
7
  
8
  
9



Adalah penting bahawa grid adalah 3 lajur lebar, tetapi saya mahu item mengisi lajur, bukan baris. Adakah ini mungkin dalam grid CSS? Saya telah membaca https://css-tricks.com/snippets/css/complete-guide-grid/ ini tetapi tidak melihat apa-apa tentang pesanan. 
CSS Flexbox mempunyai flex-direction, bukankah CSS Grid mempunyai sifat yang serupa? 
            

Answer 1

Untuk grid mengalir menegak yang mencipta lajur baharu mengikut keperluan dan tidak mempunyai baris yang ditentukan, pertimbangkan untuk menggunakan Reka Letak Berbilang Lajur CSS (Contoh). Reka Letak Grid CSS (sekurang-kurangnya seperti yang sedang dilaksanakan - Tahap 1) tidak dapat melaksanakan tugas ini. Soalannya begini:

Dalam reka letak grid CSS, harta grid-auto-flow 和 grid-template-rows / grid-template-columns.

Secara lebih khusus, item grid boleh mengalir dengan baik dalam arah mendatar jika kedua-dua grid-auto-flow: row（默认设置）和grid-template-columnsgrid-auto-flow: row (lalai) dan

grid-template-columns ditakrifkan, secara automatik mencipta baris baharu sebagai diperlukan. Konsep ini digambarkan dalam kod dalam soalan.

#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-rowsWalau bagaimanapun, selepas bertukar kepada

grid-template-rows, item grid disusun dalam satu lajur.

#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-flowMenggunakan

grid-auto-flow: row dan

grid-template-rows tidak mencipta lajur secara automatik.

grid-template-columns mesti ditakrifkan (oleh itu, berkait songsang dengan

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 Situasi sebaliknya juga mempunyai tingkah laku yang sama.

Dengan

grid-auto-flow:column dan grid-template-rows ditakrifkan, item grid mengalir dengan baik secara menegak dan mencipta lajur baharu secara automatik mengikut keperluan.

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>

Walau bagaimanapun, selepas bertukar kepada grid-template-columns, item grid disusun dalam satu baris. (Ini adalah soalan kebanyakan orang, termasuk dalam soalan ini.)

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>

Baris tidak dibuat secara automatik. Ini memerlukan penentuan grid-template-rows. (Ini ialah penyelesaian yang paling biasa ditawarkan, tetapi biasanya ditolak kerana reka letak mempunyai bilangan baris yang berubah-ubah.)

#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>

🎜 🎜Jadi pertimbangkan untuk mengguna pakai 🎜penyelesaian susun atur berbilang lajur🎜 seperti yang dinyatakan di atas. 🎜

Rujukan spesifikasi: 7.7. Peletakan automatik: grid-auto-flow atribut