Pemasangan penyesuaian CSS GRID yang tidak dibalut

Question

rreeee

Saya mempunyai kelas CSS ini, yang pertama adalah untuk menjadikan grid saya responsif, tetapi @1000px saya mahu ia menatal dan bukan membalut, jadi itulah sebabnya saya mengulangi 3, Sekarang masalahnya kadang-kadang saya ada 3 projek dan kadang-kadang kurang

Jika kurang daripada 3 (2,1), saya mempunyai banyak ruang kosong untuk menatal

Jadi adakah cara untuk membuat tatal nombor dinamik dan mengelakkan tatal kosong?

Answer 1

Tidak jelas apa yang anda tanyakan. Jika ideanya adalah untuk mempunyai satu baris yang menatal secara mendatar, maka anda mungkin hanya mahu flex 网格系统，而不是 grid.

Contoh:

.scroll-container {
  display:flex;
  gap:14px;
  overflow:auto;/* no need of @media to trigger scrollbars*/
}
.scroll-container > div {
  border:solid;
  min-width:300px;/* no need of @media from here */
  flex-basis:30%;/* unsure if you need that one */
  flex-shrink:0;/*should it shrink below the flex-basis */
  flex-grow:1;
  }

/*Make up */
.scroll-container {
  margin:1em;
  padding:1em;
  background:lightgreen;
  counter-reset:div
}
.scroll-container > div:before {
  counter-increment:div;
  content:counter(div)
}