Bagaimanakah Saya Boleh Menyusun Semula Lajur dalam Reka Letak Grid CSS?

Menukar Susunan Lajur dalam Grid CSS

Dalam Grid CSS, anda boleh mentakrifkan reka letak grid dengan menyatakan bilangan lajur dan baris menggunakan grid- sifat lajur templat dan baris templat grid. Walau bagaimanapun, menyusun semula susunan lajur ini boleh menjadi satu cabaran.

Penyelesaian: Aliran Auto Grid dengan Kata Kunci padat

Walaupun terdapat pelbagai cara untuk menyusun semula item grid, menggunakan kata kunci padat dengan sifat grid-auto-flow menawarkan penyelesaian yang mudah dan cekap:

<code class="css">grid-auto-flow: dense;</code>

Kata kunci padat memberitahu penyemak imbas untuk mengisi sel grid kosong secara automatik dengan item grid, menggerakkannya untuk mengisi jurang semasa mengekalkan susunan yang ditentukan.

Memohon pada Contoh

Dengan menambahkan kata kunci padat pada kelas grid sedia ada, lajur akan menyusun semula secara automatik pada reka letak mudah alih untuk sepadan dengan susunan yang diingini:

<code class="css">.my-grid {
  display: grid;
  grid-auto-flow: dense;
  grid-template-columns: 15% 1fr 25%;
  grid-template-rows: 1fr; /* For as many rows as you need */
  grid-gap: 10px;
  border: 2px solid #222;
  box-sizing: border-box;
}</code>

Keputusan:

---------------------------------------------
|     col 1             |      col 3        |
|                       |                   |
---------------------------------------------
|                     col 2                 |
---------------------------------------------

Penyelesaian ini menyediakan pendekatan yang mudah dan mantap untuk menukar susunan lajur tanpa menggunakan pra-pemproses .

Atas ialah kandungan terperinci Bagaimanakah Saya Boleh Menyusun Semula Lajur dalam Reka Letak Grid CSS?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!