Grid Mudah Dengan Baris Bergantian

pengenalan

Ini ialah demonstrasi ringkas bagaimana anda boleh mempunyai beberapa grid mudah dengan baris berselang-seli. Dalam contoh ini, anda mempunyai satu baris dengan tiga item dan satu baris dengan dua.
Ini ialah penyelesaian CSS 100% dan bermuara kepada penggunaan @property untuk nilai span bagi sifat lajur grid.

Bagaimana ia berfungsi

Nah itu mudah. Anda perlu tahu berapa banyak baris yang berbeza akan ada dan berapa banyak jumlah item yang terkandung dalam baris yang berbeza ini.

Dalam contoh saya ini ialah:

• 2 baris berbeza
• 3 item 2 item = 5 item

Ini bermakna apabila melakukan pemilih :nth-child() anda perlu menggunakan jumlah nombor tersebut:

&:nth-child(5n - 4), 
&:nth-child(5n - 4) ~ &:is(:nth-child(5n - 3), :nth-child(5n - 2)) {
    --col-span: 4;
}

&:nth-child(5n - 1), &:nth-child(5n - 1) ~ &:nth-child(5n) {
    --col-span: 6;
}

Harta tersuai col-span digunakan seperti ini:

.item {
    ...
    grid-column: span var(--span-cols);
    grid-row: span var(--span-rows);
    ...
}

Dan itu sahaja. Ia sangat mudah, tiada yang utama, tetapi masih berguna untuk semua orang.

Penyelesaian yang Lebih Mesra Pereka Tetapi Lebih Kompleks

Untuk penyelesaian yang lebih mesra pereka, saya fikir untuk mengisytiharkan jumlah sebenar item sebaliknya menukar rentang, kerana jika anda menukar bilangan lajur dalam grid, tetapi terlupa untuk melaraskan rentang, anda mendapat kesan yang tidak diingini. Itulah sebabnya saya menambah satu lagi sifat tersuai dan menukarnya.

Bahagian yang paling malang, tidak kira penyelesaian yang anda gunakan, pemilih anak ke-n perlu ditukar secara manual atau melalui JavaScript, jika anda mahukan penyelesaian yang dinamik sepenuhnya. (Anda juga boleh menggunakan SASS / SCSS, yang jelas merupakan cara yang baik juga)

Hartanah yang baru ditambah kelihatan seperti ini:

@property --row-items {
  syntax: "<integer>";
  inherits: false;
  initial-value: 1;
}

Untuk item, anda boleh menukar nilai harta --row-item

&:nth-child(5n - 4), 
&:nth-child(5n - 4) ~ &:is(:nth-child(5n - 3), :nth-child(5n - 2)) {
    --row-items: 3;
}

&:nth-child(5n - 1), &:nth-child(5n - 1) ~ &:nth-child(5n) {
    --row-items: 2;
}

Dan span-cols kini dikira pada kelas .item secara langsung, bukannya memilih x.

.item {
    --span-cols: calc(var(--grid-cols) / var(--row-items));
    grid-column: span var(--span-cols);
    grid-row: span var(--span-rows);
}

Untuk rujukan sifat tersuai lajur dan baris diisytiharkan seperti berikut:

@property --grid-cols {
  syntax: "<integer>";
  inherits: false;
  initial-value: 12;
}

@property --grid-rows {
  syntax: "<integer>";
  inherits: false;
  initial-value: 12;
}

Kesimpulan

Saya harap ini membantu anda memahami cara membuat grid jenis ini berfungsi.
Jika anda mendapati sebarang ralat, atau mempunyai sebarang maklum balas untuk saya, tulis ulasan pada siaran ini!

Terima kasih dan saya ucapkan selamat berhujung minggu,
Kuraikari

Pen Asli

Pen dengan harta item

Atas ialah kandungan terperinci Grid Mudah Dengan Baris Bergantian. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!