Grid CSS yang mengisi automatik dengan lajur maksimum dengan saiz minimum

Drupal 10 memperkenalkan teknik grid CSS yang mengisi auto, dan kami teruja untuk membaginya.

Ciri -ciri utama adalah:

• Kiraan lajur maksimum yang disesuaikan, menentukan keadaan lalai grid.
• Pelarasan lajur dinamik: Jika sel grid jatuh di bawah lebar minimum yang ditentukan, grid secara automatik mengurangkan kiraan lajur.
• Penggunaan lebar penuh: Sel -sel grid sentiasa berkembang untuk mengisi lebar bekas, tanpa mengira nombor lajur.
• JavaScript-Free, Reka Bentuk Responsif: Bekerja di pelbagai saiz viewport tanpa JavaScript.

Grid pengisian automatik dalam tindakan

Perhatikan bagaimana grid bertindak balas apabila dimampatkan oleh elemen draggable ke kiri.

Kod

Bersedia untuk dilaksanakan? Inilah CSS:

 .Grid-Container {
  / * Nilai yang ditentukan pengguna */
  --Grid-Layout-Gap: 10px;
  --Grid-column-count: 4;
  --Grid-item-Min-min-width: 100px;

  / * Nilai yang dikira */
  -gap-count: calc (var (-grid-column-count)-1);
  --total-gap-lebar: calc (var (-gap-count) * var (-grid-layout-jurang));
  --Grid-item-max-width: calc ((100%-var (-total-gap-width)) / var (-grid-column-count));

  paparan: grid;
  Grid-template-lajur: ulangi (auto-fill, minmax (max (var (-grid-item-min-width), var (-grid-item-max-lebar)), 1FR));
  grid-jurang: var (-grid-layout-jurang);
}

Memahami grid pengisian automatik

Kod ini memanfaatkan ciri CSS moden: repeat() , auto-fill() , dan minmax() fungsi, bersama-sama dengan max() dan calc() .

auto-fill() dijelaskan

auto-fill() adalah penting untuk baris pengisian dinamik dengan lajur. Untuk menyelam yang lebih mendalam ke dalam auto-fill() berbanding auto-fit() , lihat artikel Sara Soueidan yang sangat baik dan video yang disertakan.

Menguruskan had lajur dengan max()

Fungsi max() menghalang lajur yang berlebihan. Ia memastikan setiap lebar sel grid tidak melebihi peratusan yang dikira semasa mengekalkan lebar minimum. Pengiraan akaun untuk jurang grid:

 Max (Calc (25% -<grid-gap-for-one-cell> ), 100px)</grid-gap-for-one-cell>

Ini dicapai menggunakan pembolehubah CSS:

 -gap-count: calc (var (-grid-column-count)-1);
--total-gap-lebar: calc (var (-gap-count) * var (-grid-layout-jurang));
--Grid-item-max-width: calc ((100%-var (-total-gap-width)) / var (-grid-column-count));

Ini secara dinamik mengira lebar maksimum, memandangkan bilangan lajur dan jurang.

Memastikan lebar penuh dengan minmax()

minmax() menjamin bahawa sel -sel grid sentiasa meregangkan untuk mengisi lebar kontena. Ia menetapkan lebar minimum dan membolehkan pengembangan kepada 1fr (unit pecahan) jika ruang membenarkan:

 Minmax (<grid-item-width> , 1fr)</grid-item-width>

Penyelesaian lengkap

Menggabungkan unsur-unsur ini, kod akhir mencapai tingkah laku auto yang dikehendaki:

 -gap-count: calc (var (-grid-column-count)-1);
--total-gap-lebar: calc (var (-gap-count) * var (-grid-layout-jurang));
--Grid-item-max-width: calc ((100%-var (-total-gap-width)) / var (-grid-column-count));

Grid-template-lajur: ulangi (auto-fill, minmax (max (var (-grid-item-min-width), var (-grid-item-max-lebar)), 1FR));

Kekuatan CSS

Contoh ini mempamerkan keupayaan maju CSS moden. Kami telah membuat susun atur yang kompleks tanpa JavaScript, menunjukkan evolusi CSS.

Terima kasih kepada Andy Blum atas cadangan untuk menggunakan auto-fill() , dan kepada penulis dan pelaksana spec CSS untuk membuat ini mungkin.

Atas ialah kandungan terperinci Grid CSS yang mengisi automatik dengan lajur maksimum dengan saiz minimum. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!