CSS Grid Lanes

 (webkit.org)
6 poin oleh GN⁺ 2025-12-20 | 2 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

Cara kerja Grid Lanes

  • 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
Iklan

Fitur perluasan CSS Grid

  • 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

Fitur pergantian arah

  • 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
    Iklan
  • 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

Menyesuaikan sensitivitas penempatan: item-tolerance

  • 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
Iklan

Contoh eksperimen dan pemanfaatan

  • 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

Rencana ke depan

  • 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

Bacaan terkait

2 komentar

 
shakespeares 2025-12-21

Berarti kita harus pakai Grid-lanes untuk Safari dan grid untuk Firefox secara terpisah, kan. Tolong samakan saja sesuai standar web...
 
GN⁺ 2025-12-20
Pendapat Hacker News

  • Salut untuk tim Safari. Fakta bahwa mereka tiba-tiba melonjak ke puncak peringkat Interop 2025 pada bulan Oktober benar-benar mengejutkan

    • Setelah iOS 26, terasa sekali bahwa Safari menerima pembaruan fitur web yang besar. Bukan hanya WebGPU, tetapi juga melengkapi bagian OPFS API yang sebelumnya hilang sehingga kini bisa dipakai secara nyata. Selain itu, properti CSS field-sizing juga ditambahkan, menyelesaikan masalah agar kotak input teks otomatis membesar sesuai isi masukan
    • Safari sering dinilai sebagai “browser terbaik” setiap kali ada rilis besar, tetapi di luar periode itu cenderung banyak dikritik. Saya rasa ini karena browser lain melakukan pembaruan berkelanjutan, sedangkan Safari mengikuti siklus rilis yang lebih tradisional
    • Sebenarnya tidak terlalu mengejutkan. Sudah beberapa tahun saya melihat tim Safari secara konsisten merilis fitur HTML dan CSS terbaru
    • Sementara tim Chrome mempromosikan fitur eksperimental seperti WebPCIe, Safari justru menghadirkan fitur yang benar-benar diinginkan pengguna. Misalnya, mereka mendukung efek latar belakang blur jauh lebih awal
    • Namun tetap disayangkan bahwa Safari masih belum mendukung wasm 64-bit. Daftar fitur WebAssembly memang menuliskan “dukungan 100%”, tetapi dalam praktiknya masih ada bagian penting yang hilang

  • Saya berharap fitur CSS Gap Decorations segera hadir. Saya sudah lelah terus memakai hack yang tidak perlu hanya untuk membuat garis batas yang bagus di antara item flex atau grid

    • Bagaimana kalau pakai tabel? Itu sudah jauh lebih baik dibanding dulu, tetapi kita tetap ingin lebih banyak. Sepertinya manusia memang tidak pernah puas

  • Saya baru-baru ini memakai layout Masonry di sebuah proyek, dan meski performanya lumayan, pendekatan itu cukup hacky karena berbasis absolute positioning. Kita harus tahu rasio aspek objek sebelumnya, lalu menghitung ulang saat resize. Jadi saya berharap dukungan native segera hadir

    • Saya juga merasakan hal yang sama. Sambil menunggu CSS menyelesaikan masalah ini, sejak 2019 saya menantikan hari ketika saya akhirnya bisa menghapus 1.3KB JavaScript terakhir dari homepage saya. Terima kasih kepada semua orang yang membuat fitur ini

  • Pengumuman seperti ini keren, tetapi juga terasa seperti komedi tragis. Karena Apple tidak memperbarui browser secara berkelanjutan, titik saat kita benar-benar bisa percaya dan memakai fitur baru ini dalam praktik masih lama sekali

  • Layout Masonry memang terlihat bagus, tetapi menurut saya jadi sulit menangkap keseluruhan gambar dalam sekali lihat

    • Banyak bagian dari “desain” web lebih fokus pada tampilan daripada kegunaan. Hampir tidak ada yang benar-benar memakai produknya, mereka hanya melihat animasi scroll lalu berkata “keren”
    • Kalau semua gambar berbentuk horizontal atau semuanya vertikal, hasilnya masih oke, tetapi kalau tercampur, layout-nya jadi berantakan

  • Saya heran kenapa namanya tidak dibuat Masonry saja. Meski begitu, nama grid-lanes memang deskriptif sehingga mudah dipahami

  • Saya penasaran berapa lama LLM akan membutuhkan waktu untuk mempelajari dengan akurat sintaks CSS baru seperti ini

  • Kalau saya harus melihat halaman web yang berisi grid teks dengan ukuran dan posisi acak, rasanya lebih baik ada yang menembak saya saja
    Gambar demo grid bergaya koran

    • Memangnya belum pernah baca koran?
    • Menurut saya desain seperti ini bagus. Layout yang asimetris tetapi efisien seperti koran bisa diwujudkan di web
    • Tetapi saya merasa ini melanggar prinsip dasar desain, yaitu perataan dan pengelompokan
    • Lucunya, menurut saya itu justru sangat keren
    • NYTimes.com langsung terlintas sebagai contoh seperti itu

  • Secara pribadi saya tidak suka layout lane. Sulit untuk melihat semua elemen daftar secara berurutan, dan mata terus meloncat ke atas-bawah sehingga menimbulkan kelelahan kognitif yang besar

    • Tetapi kalau tidak perlu meninjau semua elemen secara sistematis, layout lane juga tidak masalah. Untuk situs seperti Pinterest yang tujuannya menyerap konten sekilas, ini cocok
    • Memang enak dilihat, tetapi tidak nyaman saat dipakai secara mendalam
    • Tujuannya bukan efisiensi, melainkan agar keseluruhannya bisa terlihat dalam sekali pandang. Seperti koran atau galeri foto
    • Ironis bahwa fiturnya baru hadir saat tren ini mulai mereda. Dari sisi UX kurang bagus, tetapi secara visual memang cantik
    • Rasanya seperti desain otak kanan. Cocok untuk situs seperti Pinterest atau Home Assistant

  • Saya rasa Apple seharusnya membuat Safari bisa diunduh secara stabil di semua platform

    • Saya ingat dulu pernah memasang Safari di Windows XP. Sepertinya sejak kegagalan itu, waktu yang berlalu masih belum cukup lama
    • Namun mungkin secara tidak langsung itu bisa terjadi. Browser baru dari Kagi memakai WebKit, dan saat ini memang hanya untuk macOS, tetapi versi Windows juga rencananya akan hadir nanti