Bolehkah Pembungkusan Grid CSS Dicapai Tanpa Pertanyaan Media?

Pembungkusan Grid CSS Menggunakan isian automatik atau muat auto

Bolehkah pembungkusan grid CSS dicapai tanpa menggunakan pertanyaan media? Pertanyaan ini berpunca daripada keperluan untuk meletakkan item bukan deterministik dalam grid dengan tingkah laku bungkus yang diingini. Kelemahan Flexbox dalam memastikan jarak yang betul menjadikan pilihan ini kurang berdaya maju.

Kod contoh:

.grid {
  display: grid;
  grid-gap: 10px;
  grid-auto-flow: column;
  grid-template-columns: 186px 186px 186px 186px;
}

.grid > * {
  background-color: green;
  height: 200px;
}

isi auto vs muat auto

Penyelesaian terletak pada menggunakan sama ada isi auto atau muat auto sebagai parameter pertama dalam tatatanda repeat().

autoisi

Setelah menentukan autoisi sebagai nombor ulangan, bilangan ulangan akan dilaraskan untuk mengelakkan grid daripada melimpahi bekas grid.

.grid {
  display: grid;
  grid-gap: 10px;
  grid-template-columns: repeat(auto-fill, 186px);
}

Atas ialah kandungan terperinci Bolehkah Pembungkusan Grid CSS Dicapai Tanpa Pertanyaan Media?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!