Bolehkah CSS memaparkan garisan grid?

Question

Saya mula mempelajari reka letak grid CSS. Dalam dunia yang ideal, saya akan dapat menyediakan div dengan berbilang kotak grid dan meletakkan elemen saya tepat di dalamnya, memberikan tindanan apabila diperlukan (seperti menggunakan Sticky on Grid dalam Illustrator).

Ini boleh menjadi sangat sukar tanpa perwakilan visual grid, adakah mungkin untuk melihat grid pada pelayan langsung saya? Saya cuba menggunakan Alat Pembangun Chrome "Tunjukkan Garis Grid" tetapi setiap kali saya memuat semula atau membuat perubahan, ia hilang.

Atau adakah sistem yang lebih baik yang boleh saya gunakan apabila saya ingin mempunyai susun atur yang lebih tepat yang terdiri daripada berbilang elemen dan ruang kosong?

Answer 1

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

Answer 2

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