CSS Grid Lanes

(webkit.org)

6 poin oleh GN⁺ 2025-12-20 | Belum ada komentar. | Bagikan ke WhatsApp

Fitur CSS baru Grid Lanes untuk mewujudkan layout masonry di web telah diperkenalkan di Safari Technology Preview 234
Dengan properti display: grid-lanes, pengembang dapat menyusun grid responsif tanpa media query, dan mendefinisikan kolom fleksibel melalui grid-template-columns
Melalui properti item-tolerance, sensitivitas penempatan item bisa diatur untuk mengurangi ketidakseimbangan visual akibat perbedaan ukuran konten
Mendukung arah kolom maupun baris, dengan alur ditentukan otomatis berdasarkan definisi grid-template-columns atau grid-template-rows
CSS Working Group masih membahas beberapa nama properti detail, sementara tim WebKit menjalankan standardisasi dan implementasi secara paralel untuk mendorong eksperimen oleh pengembang

Ikhtisar CSS Grid Lanes

Grid Lanes adalah mode display baru untuk mewujudkan layout bergaya masonry di web dengan CSS native
- Dikonstruksi dengan display: grid-lanes menggunakan sintaks yang mirip dengan grid yang ada
- grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)) membuat kolom fleksibel dengan lebar minimum 250px
Properti gap digunakan untuk menentukan jarak antar item, dan dapat menyesuaikan semua ukuran layar tanpa media query
Bisa diuji coba di Safari Technology Preview 234, dengan halaman demo dari WebKit

Browser secara otomatis menempatkan tiap item ke kolom yang paling dekat ke bagian atas
- Mirip seperti Masonry.js, item berikutnya ditambahkan ke kolom yang saat ini paling pendek
- Saat berpindah dengan tab, pengguna dapat menjelajahi konten yang sedang terlihat secara horizontal
Saat memuat konten infinite scroll, penyusunan otomatis dapat dilakukan tanpa JavaScript

Variasi ukuran lane: dengan sintaks grid-template-*, kolom sempit dan lebar bisa disusun bergantian
- Contoh: grid-template-columns: repeat(auto-fill, minmax(8rem, 1fr) minmax(16rem, 2fr)) minmax(8rem, 1fr)
Dukungan perluasan item (span)
- Item tertentu dapat ditempatkan melintasi beberapa kolom (grid-column: span 4, dll.)
- Demo contoh: layout bergaya artikel surat kabar
Mendukung penempatan eksplisit
- Contoh: header { grid-column: -3 / -1; } untuk mengunci header ke kolom terakhir

Mendukung layout berbasis kolom (waterfall) maupun berbasis baris (brick)
- Jika grid-template-columns didefinisikan maka otomatis menjadi arah kolom, dan jika grid-template-rows didefinisikan maka menjadi arah baris
grid-auto-flow: normal adalah nilai default, dan akan menentukannya secara otomatis sesuai arah yang didefinisikan
CSS Working Group sedang mendiskusikan penamaan properti untuk kontrol alur (grid-lanes-direction, dll.)
- Diskusi terkait berlangsung di issue GitHub CSSWG-drafts

item-tolerance menentukan seberapa ketat perbedaan ukuran dibedakan saat menempatkan item
- Nilai default adalah 1em, dan perbedaan yang lebih kecil dari itu dianggap sebagai tinggi yang sama
- Semakin tinggi nilainya, item akan lebih jarang bergeser ke kiri-kanan, sementara nilai yang lebih rendah menyebabkan penyesuaian posisi yang lebih rinci
Dari sisi aksesibilitas, nilai yang tepat perlu diatur untuk meminimalkan lompatan visual saat navigasi tab
Nama properti saat ini didefinisikan sebagai item-tolerance, tetapi bisa berubah menjadi flow-tolerance atau pack-tolerance

Safari Technology Preview 234 menyediakan berbagai demo
- Galeri foto, artikel bergaya surat kabar, situs museum, hingga layout mega menu

Contoh kode:

.container {
  display: grid-lanes;
  grid-template-columns: repeat(auto-fill, minmax(max-content, 24ch));
  column-gap: 4lh;
}

Berguna bukan hanya untuk gambar, tetapi juga untuk footer atau susunan menu dengan banyak tautan

CSS Working Group sedang menentukan nama properti yang tersisa
Tim WebKit telah menjalankan implementasi dan standardisasi secara paralel sejak pertengahan 2022
Pengembang didorong untuk membuat demo dan ikut memberi masukan
- Jen Simmons sedang mengumpulkan masukan melalui Bluesky dan Mastodon
Sintaks dasarnya telah stabil, sehingga siap diterapkan ke proyek nyata