Bagaimana untuk Span Baris dan Lajur dengan Grid CSS?

Cross-Row, Cross-Column Divs in a Grid

Membina berdasarkan isu mengembangkan div secara menegak dalam grid, kami kini meneroka cabaran yang lebih kompleks: secara serentak merangkumi kedua-dua baris dan lajur. Dalam barisan lima elemen, bagaimanakah kita boleh meletakkan elemen yang lebih besar secara strategik di tengah?

Pendekatan Bukan Ideal

Mengapungkan elemen ke sisi adalah hasil yang wujud. kelakuan harta apungan. Selain itu, kedua-dua Jadual HTML mahupun Reka Letak Grid CSS bukanlah penyelesaian yang berdaya maju di sini.

Keserasian Penyemak Imbas

Grid CSS menawarkan penyelesaian yang lancar, tetapi sokongan penyemak imbas secara sejarah adalah terhad. Walau bagaimanapun, kemas kini terkini kepada penyemak imbas utama telah menjadikan Tata Letak Grid tersedia sepenuhnya.

Penyelesaian Grid CSS

Reka Letak Grid menyediakan penyelesaian yang elegan. Tanpa mengubah HTML, bekas bersarang atau menetapkan ketinggian tetap:

<code class="css">#wrapper {
  display: grid;
  grid-template-columns: repeat(5, 90px);
  grid-auto-rows: 50px;
  grid-gap: 10px;
  width: 516px;
}</code>

Untuk menjangkau baris dan lajur tertentu:

<code class="css">.tall {
  grid-row: 1 / 3;
  grid-column: 2 / 3;
}

.wide {
  grid-row: 2 / 4;
  grid-column: 3 / 5;
}</code>

Dengan mentakrifkan baris dan lajur permulaan dan penamat, kita boleh mengawal saiz dan kedudukan div dalam grid dengan tepat, mencapai reka letak yang diingini.

Atas ialah kandungan terperinci Bagaimana untuk Span Baris dan Lajur dengan Grid CSS?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!