Pelayar Firefox mempunyai fungsi ini https://firefox-source-docs. mozilla.org/devtools-user/page_inspector/how_to/examine_grid_layouts/index.html

Pepijat telah dibuat untuk isu yang anda alami https://bugzilla.mozilla.org/show_bug.cgi?id=1342310

Seperti yang telah dijawab oleh @ashish-singh, memanfaatkan alatan pembangun penyemak imbas asli ialah pilihan yang baik, seperti yang telah disebutkan Firefox CSS Grid Inspector atau malah ciri Chrome Inspection CSS Grid Layout . Ia adalah ciri berkuasa yang memberikan maklumat penting tentang lajur, baris, jurang yang diberikan, dsb.

Apa pun, jika anda benar-benar mahu melaksanakan kaedah muat semula silang berterusan menggunakan CSS, saya syorkan anda menggunakan outline beberapa helah pada item grid anda. Saya mengesyorkan menggunakan garis besar kerana dengannya item boleh runtuh antara satu sama lain (kerana garis besar secara teknikal tidak mengambil ruang), tetapi juga kerana menunjukkan dan menyembunyikan garis besar secara dinamik tidak mencetuskan pengiraan semula reka letak penyemak imbas (prestasi lebih baik semasa ujian).

Berikut ialah contoh mudah yang menunjukkan perkara yang berlaku dalam tindakan:

.container {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(100px, 1fr));
  gap: 1px;
}

.item {
  display: grid;
  place-items: center;
  padding: 1rem;

  /* Here's the trick: */
  outline: 1px dashed magenta;
}

.col-span-2 {
  grid-column: span 2 / span 2;
}

.row-span-2 {
  grid-row: span 2 / span 2;
}

  
1
  
2
  
3
  
4
  
5
  
6