Area Grid CSS

Pengantar

• CSS Grid didukung oleh semua browser utama sejak 2017
• Namun, bahkan pada 2024 masih banyak orang yang belum menggunakan fitur grid-template-areas
• Artikel ini bertujuan menjelaskan kesederhanaan dan kekuatan grid-template-areas

Area grid bernama di CSS

• Di CSS Grid, setiap area grid dapat diberi nama dan dirujuk di seluruh CSS
• Misalnya, Anda dapat mendefinisikan layout grid dengan dua kolom dan memetakan grid-area ke setiap item

Aturan area template grid

• Area yang didefinisikan harus berbentuk persegi panjang
• Semua area harus didefinisikan

Sintaks template grid

• Gunakan properti grid-template-areas untuk mendefinisikan area grid
• Anda dapat menggunakan beberapa string area
• Satu string berarti layout satu dimensi, sedangkan beberapa string berarti layout multi-dimensi

Garis grid bernama di CSS

• Garis grid dapat diberi nama unik
• Misalnya, pada grid dengan 3 kolom, setiap garis dapat diberi nama
• Garis grid bernama tidak menggantikan nomor garis bawaan

Kasus penggunaan area template grid

• Membalik arah grid: gunakan grid-template-areas untuk mengubah arah layout dengan mudah
• Layout header: gunakan grid-template-areas untuk mendefinisikan layout header dan membuatnya responsif
• Layout editorial: mudah mendefinisikan dan mengubah layout yang mencakup berbagai jenis konten

Layout kondisional dan CSS :has()

• Gunakan selector CSS :has() untuk mengubah layout berdasarkan ada atau tidaknya elemen

Dukungan multibahasa (LTR/RTL)

• CSS Grid menyesuaikan layout berdasarkan arah halaman (LTR atau RTL)
• Ini berarti area grid bernama juga mengikuti arah halaman

Area grid dan DevTools

• Semua browser utama menyediakan alat yang baik untuk area grid (Chrome, Safari, Firefox)
• Setiap browser memiliki cara berbeda untuk memvisualisasikan area grid

Ringkasan GN⁺

• Fitur grid-template-areas pada CSS Grid berguna untuk memahami dan mengelola layout secara visual
• Sangat berguna terutama saat anggota tim perlu mengubah layout
• Artikel ini menjelaskan kesederhanaan dan kekuatan grid-template-areas, dengan tujuan mendorong lebih banyak orang untuk menggunakannya
• Proyek lain yang menawarkan fungsi serupa adalah Flexbox

[GN⁺]

Komentar Hacker News

• Tertarik dengan demo animasinya, tetapi itu bukan diimplementasikan dengan CSS

  • Sudah mempelajari Flexbox dan merasa puas, jadi tidak merasa perlu mempelajari Grid
  • Ada alasan untuk lebih menyukai Grid, tetapi belum benar-benar merasakan kebutuhannya
  • Untuk tabel data, menggunakan tabel yang sebenarnya

• Artikel ini menekankan keunggulan Grid sekaligus kerumitan sintaks CSS

  • Ada dua dimensi dan tiga parameter (awal, akhir, ukuran)
  • Ada setidaknya tiga cara untuk mendeklarasikan setiap parameter
  • Sulit dibaca karena properti singkat
  • Sulit membaca Grid buatan pengembang lain

• '1/3' bukan pecahan, melainkan rentang dari 1 sampai 3

  • Tidak bisa memahami mengapa sintaks seperti ini yang dipilih
  • Ada sintaks yang lebih baik untuk menyatakan rentang dalam pemrograman (misalnya: 1..3)

• Terkait Grid Garden dan Flexbox Froggy

  • Grid Garden
  • Flexbox Froggy

• Tidak benar-benar memahami Grid atau Flexbox

  • Strategi layout terakhir yang pernah digunakan dengan baik adalah floats
  • Artikel ini memberi kepercayaan diri untuk memakai CSS Grid pada desain layout berikutnya
  • Berterima kasih atas artikel yang dibuat dengan baik

• Bertanya-tanya apakah ada versi pengantar singkat untuk dokumen ini

  • Merasa tersesat di bagian pengantar
  • Tidak memahami apa yang dimaksud dengan 'line number'
  • Tersendat pada pecahan seperti '1/3' dan '1/4'

• Sangat merekomendasikan Mondrian with auto flow dari Jen Simmons

  • Jen Simmons Mondrian
  • Sangat keren saat ukuran jendela diubah
  • Ingin memahami bagaimana auto flow mendeteksi dan mengisi celah

• Penasaran mengapa sintaksnya didefinisikan sebagai 1/2 dan 3/4

  • Sintaks seperti 1-2 atau 1->2 tampaknya akan lebih mudah dipahami

• Menyukai posting blog interaktif

  • Merekomendasikan untuk bereksperimen dengan area Grid di alat tersebut
  • Sudah menggunakan Grid Layoutit selama beberapa tahun, dan mengatur jarak jadi jauh lebih mudah

• Sepertinya untuk pertama kalinya benar-benar memahami CSS Grid

  • Penomorannya sangat membantu
  • Artikel yang luar biasa dan akan sering dijadikan referensi