Bagaimanakah Saya Boleh Menjangkau Div Merentasi Berbilang Baris dan Lajur dalam Grid Tanpa Menggunakan Reka Letak atau Jadual Grid CSS?

Div Berbilang Baris dan Lajur dalam Grid

Anda mencari penyelesaian untuk merentangi div merentasi berbilang baris dan lajur dalam grid, tanpa menggunakan Reka Letak Grid CSS atau jadual.

Sokongan Penyemak Imbas Terkini untuk Reka Letak Grid

Walaupun anda mempunyai kebimbangan tentang sokongan penyemak imbas reka letak Grid pada masa siaran anda, versi terkini pelayar utama kini memberikan sokongan penuh. Untuk butiran sokongan penyemak imbas semasa, sila rujuk dokumentasi yang berkaitan.

Penyelesaian Menggunakan Reka Letak Grid CSS

Dengan Reka Letak Grid, mencapai reka letak yang anda inginkan menjadi mudah tanpa pengubahsuaian HTML, bekas bersarang, atau ketinggian bekas tetap. Berikut ialah coretan kod:

<code class="css">#wrapper {
  display: grid; // Enable Grid Layout (1)
  grid-template-columns: repeat(5, 90px); // Define columns (2)
  grid-auto-rows: 50px; // Define rows (3)
  grid-gap: 10px; // Set cell spacing (4)
  width: 516px;
}

.tall {
  grid-row: 1 / 3; // Span across rows 1 to 2 (5)
  grid-column: 2 / 3; // Span across columns 2 to 2 (5)
}

.wide {
  grid-row: 2 / 4; // Span across rows 2 to 3 (6)
  grid-column: 3 / 5; // Span across columns 3 to 4 (6)
}

.block {
  background-color: red;
}</code>

<code class="html"><div id="wrapper">
  <div class="block"></div>
  <div class="block tall"></div>
  <div class="block"></div>
  <div class="block"></div>
  <div class="block"></div>
  <div class="block"></div>
  <div class="block wide"></div>
  <div class="block"></div>
  <div class="block"></div>
  <div class="block"></div>
  <div class="block"></div>
</div></code>

Penyelesaian ini secara berkesan menjajarkan elemen anda yang lebih besar di tengah grid, mengikut reka letak yang anda inginkan.

Atas ialah kandungan terperinci Bagaimanakah Saya Boleh Menjangkau Div Merentasi Berbilang Baris dan Lajur dalam Grid Tanpa Menggunakan Reka Letak atau Jadual Grid CSS?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!