Generator Grid CSS

Cara menggunakan

1. Tentukan dimensi grid: masukkan jumlah kolom dan baris untuk tata letak Anda.
2. Tentukan track: atur lebar setiap kolom dan tinggi setiap baris dengan unit fr, piksel, persentase, auto, atau minmax().
3. Salin CSS: properti display: grid, grid-template-columns, grid-template-rows, dan gap yang dihasilkan siap untuk ditempel ke stylesheet Anda.

Mengapa menggunakan generator CSS Grid?

CSS Grid adalah sistem tata letak paling andal di CSS, mampu membuat tata letak dua dimensi kompleks yang sebelumnya membutuhkan tabel, float, atau JavaScript. Tetapi menguasai grid-template-columns, satuan fr, minmax(), repeat(), dan area bernama membutuhkan latihan. Generator visual ini memungkinkan Anda membangun grid apa pun dengan klik dan seret, lalu menghasilkan CSS yang bersih untuk segera digunakan atau dipelajari untuk memperdalam pemahaman Anda tentang Grid.

Fitur

• Pembangun grid visual: klik untuk mendefinisikan track kolom dan baris secara visual.
• Dukungan unit fr: gunakan unit fr fleksibel untuk kolom proporsional yang responsif.
• Shortcut minmax(): dengan mudah buat kolom responsif dengan batasan ukuran minimum dan maksimum.
• Kontrol jarak: atur column-gap dan row-gap secara independen.
• Area bernama: definisikan grid-template-areas dengan antarmuka visual untuk melukis area.

Pertanyaan umum

Apa itu satuan "fr" di CSS Grid?

Satuan fr (fraction) mendistribusikan ruang yang tersedia secara proporsional. Dalam grid 3 kolom dengan 1fr 2fr 1fr, kolom tengah mendapat dua kali lipat ruang dibanding kolom luar. Satuan fr berbagi ruang yang tersisa setelah alokasi track berukuran tetap.

Bagaimana cara membuat grid responsif tanpa media query?

Gunakan repeat(auto-fill, minmax(200px, 1fr)) sebagai nilai grid-template-columns. Ini membuat sebanyak mungkin kolom yang ukuran minimumnya memungkinkan, meluas untuk mengisi ruang yang tersedia. Item secara otomatis mengatur ulang saat lebar kontainer berubah.

Apa perbedaan antara grid-template dan grid-auto?

grid-template-columns/rows mendefinisikan track eksplisit yang Anda tentukan. grid-auto-columns/rows menentukan ukuran track implisit, kolom dan baris yang dibuat secara otomatis saat item meluap dari grid eksplisit.

Sejarah singkat CSS Grid

Sebelum CSS Grid, tata letak web melewati tiga era yang menyakitkan. Tata letak berbasis tabel (1995-2008) menyalahgunakan elemen <table> untuk struktur visual, dengan «pemotongan dan pembagian» komposisi Photoshop menjadi grid HTML. Tata letak berbasis float (2008-2013) mengganti tabel dengan properti float, memerlukan trik «clearfix» seperti micro-clearfix Nicolas Gallagher (2011) untuk menampung anak yang terbungkus. Flexbox (CSS Flexible Box Layout Module Level 1, Rekomendasi W3C 2018) menyelesaikan tata letak satu dimensi tetapi kesulitan dengan grid dua dimensi yang sebenarnya. Cerita CSS Grid dimulai dengan implementasi -ms-grid Microsoft di Internet Explorer 10 (2012), sebuah versi awal yang memberi masukan pada spesifikasi W3C. Draf kerja publik W3C pertama dari CSS Grid Layout Module Level 1 muncul di April 2011, tetapi momentum sesungguhnya datang dari pekerjaan advokasi Rachel Andrew (buku Get Ready for CSS Grid Layout-nya, 2016) dan Jen Simmons (advokat-pengembang Mozilla, sirkuit konferensi 2016-2018). Perlombaan peramban terselesaikan dalam jendela dua bulan yang luar biasa di Maret 2017: Chrome 57, Firefox 52, Safari 10.1, dan Edge 16 semuanya mengirimkan Grid tanpa prefiks dalam jarak beberapa minggu satu sama lain. W3C menandai Grid Level 1 sebagai Rekomendasi Kandidat pada Desember 2016; Rekomendasi W3C final tiba pada Agustus 2020. Subgrid (Level 2) dikirimkan di Firefox 71 (Des 2019), Safari 16 (Sept 2022), dan Chrome 117 (Sept 2023). Garis batas berikutnya adalah tata letak Masonry yang diusulkan (proposal CSS Working Group 2020, di balik flag di Firefox sejak 2021).

Anatomi grid CSS

• Wadah grid. display: grid (atau display: inline-grid) mengubah elemen apa pun menjadi konteks grid. Anak langsung dari elemen tersebut menjadi «item grid» dan berpartisipasi dalam tata letak grid. Cucu tidak terpengaruh kecuali mereka juga menetapkan display: grid.
• grid-template-columns dan grid-template-rows. Mendefinisikan jalur eksplisit (kolom dan baris). Nilai dapat berupa tetap (px, em, rem), fleksibel (fr, satuan «pecahan» yang didefinisikan dalam spesifikasi CSS Grid), berukuran konten (auto, min-content, max-content), atau kombinasi apa pun. grid-template-columns: 200px 1fr 1fr membuat sidebar 200px ditambah dua kolom fleksibel yang sama.
• Satuan fr. Satuan pecahan mendistribusikan ruang tersisa setelah jalur berukuran tetap dialokasikan. 1fr 2fr 1fr memberi kolom tengah dua kali ruang sisa kolom samping. fr unik untuk Grid (dan padanan terkait flex-basis: 0 1 fr di Flexbox bukan hal yang sama). Ini menyelesaikan apa yang sudah lama diperjuangkan oleh pola «kolom persentase» selama beberapa dekade: distribusi ruang sisa yang bersih.
• repeat() dan minmax(). repeat(3, 1fr) secara kompak mendefinisikan tiga kolom yang sama. minmax(200px, 1fr) membatasi jalur ke rentang. Kombinasi mematikan grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)) menghasilkan grid responsif yang secara otomatis menyesuaikan jumlah kolom agar pas dengan wadah, tanpa kueri media. Satu baris ini menggantikan ribuan definisi titik henti dalam CSS produksi.
• grid-template-areas. Sintaks string yang ditata secara visual yang menamai wilayah grid. Anak-anak ikut serta dalam area yang dinamai dengan grid-area: header. Hasilnya adalah tata letak-sebagai-seni-ASCII: siapa pun yang membaca CSS dapat memvisualisasikan grid dari sumber. Sangat kuat untuk tata letak «cawan suci» (header / sidebar / utama / aside / footer) yang mengalahkan perancang CSS selama satu dekade.
• gap (dan column-gap, row-gap). Mendefinisikan jarak antar jalur. gap: 16px memberi jarak seragam pada semua baris dan kolom. Sebelum Grid, ini memerlukan pola padding+margin yang rapuh atau margin negatif yang dihitung dengan cermat. Properti gap yang sama kemudian ditambahkan ke Flexbox (didukung secara universal sejak 2022) dan sekarang dianggap sebagai cara kanonik untuk menangani spasi antar item dalam CSS modern.

Pola Grid dunia nyata

• Galeri gambar. Pola repeat(auto-fill, minmax(200px, 1fr)) adalah CSS dominan untuk situs portofolio (grid Behance), galeri foto (gaya Unsplash), dan koleksi produk. Auto-adaptasi jumlah kolom tanpa kueri media praktis tidak mungkin sebelum Grid.
• Dasbor dan panel admin. Grafana, Datadog, Stripe Dashboard, dan sebagian besar UI admin modern menggunakan area grid bernama untuk memposisikan kartu, sidebar, dan wilayah konten. Pembangun dasbor seret-dan-lepas (DataDog, Looker, Tableau) menerjemahkan tindakan pengguna menjadi mutasi string grid-template-areas.
• Tata letak gaya majalah. Situs editorial (The Guardian, NYT, Vox) menggunakan Grid untuk tata letak asimetris dengan elemen yang tumpang tindih, gambar hero besar yang membentang beberapa kolom, dan kutipan pull-quote yang keluar dari kolom teks utama. Sumbu z Grid (z-index dengan area eksplisit) menangani penumpukan secara alami.
• Grid kartu produk. Etalase Shopify, Amazon, Etsy. Pola ini begitu umum sehingga Tailwind CSS, Bootstrap, dan Bulma semuanya mengirimkan komponen kartu berbasis grid sebagai bagian dari set utilitas inti mereka. Rasio aspek kartu sekarang biasanya dikunci dengan properti aspect-ratio (Safari 15, Chrome 88, 2021).
• Tata letak «cawan suci». Header / sidebar kiri / konten utama / sidebar kanan / footer. Tata letak 5 wilayah ini adalah masalah CSS yang belum terselesaikan selama 15 tahun. Dengan grid-template-areas dan 8 baris CSS, ia menjadi sepele pada 2017. Pola ini mendominasi situs dokumentasi (Stripe Docs, MDN, Vercel Docs).
• Tata letak formulir. Tata letak formulir dua kolom dengan label di kiri dan input di kanan, formulir alamat dengan kota/negara bagian/kode pos dalam satu baris, wizard multi-langkah. Grid memungkinkan label dan input untuk diselaraskan dengan rapi di seluruh baris bahkan ketika lebar konten bervariasi. Pola tersebut menggantikan pendekatan berbasis trik-lebar-label sebelumnya dengan CSS yang lebih bersih.
• Penempatan modal dan dialog. display: grid; place-items: center; pada overlay viewport penuh memusatkan dialog secara horizontal dan vertikal dengan sempurna dengan satu baris, menggantikan dekade pola position: absolute; top: 50%; transform: translateY(-50%);. place-items adalah cara kanonik 2024 untuk memusatkan konten sembarang.
• Responsif tanpa kueri media. Menggabungkan repeat(auto-fill, minmax(...)) dengan gap menghasilkan tata letak yang beradaptasi dengan lebar wadah tanpa kueri media apa pun. Ini adalah dasar dari desain responsif modern: tata letak yang merespons ukuran wadah daripada ukuran viewport, mengantisipasi Container Queries (sekarang juga dikirimkan, 2023).

Standar dan tonggak sejarah

• IE10 -ms-grid (2012). Microsoft mengirimkan implementasi mirip Grid pertama, yang dirancang oleh Phil Cupp di Microsoft. Sintaksnya berbeda dari spesifikasi W3C akhirnya tetapi membuktikan konsep dan memengaruhi keputusan desain selanjutnya.
• CSS Grid Layout Module Level 1, Draf Kerja W3C (April 2011). Draf publik W3C pertama. Beberapa iterasi mengikuti; sintaksnya berkembang secara signifikan antara 2011 dan implementasi akhir 2017.
• Advokasi Rachel Andrew dan Jen Simmons (2014-2017). Buku Andrew Get Ready for CSS Grid Layout (Smashing Magazine, 2016) dan ceramah konferensi Simmons sebagai advokat-pengembang Mozilla membangun basis pengetahuan komunitas yang membuat pengiriman peramban menjadi layak. Keduanya disebutkan dalam catatan editor W3C dari spesifikasi.
• Perlombaan peramban, Maret 2017. Dalam jendela dua bulan yang luar biasa, Chrome 57 (9 Maret), Firefox 52 (7 Maret), Safari 10.1 (27 Maret), dan Edge 16 (Oktober 2017) semuanya mengirimkan Grid tanpa prefiks. Tingkat pengiriman lintas peramban yang sinkron ini hampir tidak ada sebelumnya untuk fitur dengan kompleksitas ini.
• Rekomendasi Kandidat (Desember 2016). CSS Grid Level 1 dipromosikan ke Rekomendasi Kandidat W3C, tahap akhir sebelum Rekomendasi W3C. Fase CR biasanya memerlukan beberapa tahun; Grid bergerak lebih cepat daripada sebagian besar fitur CSS pada tahap ini.
• Rekomendasi W3C (Agustus 2020). Grid Level 1 difinalisasi sebagai Rekomendasi W3C. Ini secara teknis adalah tanggal «peluncuran» spesifikasi, tetapi setiap peramban utama telah mengirimkan implementasi yang berfungsi tiga tahun sebelumnya.
• Subgrid (Level 2, 2019-2023). Subgrid memungkinkan item grid untuk mewarisi definisi jalur induknya, menyelesaikan masalah «penyelarasan grid bersarang». Firefox 71 (Des 2019), Safari 16 (Sept 2022), Chrome 117 (Sept 2023). Peluncuran lambat Chrome mencerminkan kompleksitas implementasi.
• Tata letak Masonry (diusulkan, 2020-). CSS Working Group telah memperdebatkan sintaks sejak 2020. Firefox mengirimkannya di balik flag pada 2021. Tata letak mengalir gaya Pinterest yang mengemas item ke dalam kolom adalah kasus penggunaan target. Tim Chrome (dipimpin Apple) dan tim Mozilla telah mengusulkan sintaks bersaing; resolusi tertunda per 2024.

Pertanyaan yang lebih sering ditanyakan

Kapan saya harus menggunakan Grid vs Flexbox?

Singkatan komunitas: Flexbox untuk satu dimensi, Grid untuk dua. Jika Anda menata baris tombol atau menyelaraskan item dalam satu arah, Flexbox lebih sederhana. Jika Anda merancang tata letak seluruh halaman dengan baris dan kolom yang harus selaras, Grid adalah alat yang tepat. Banyak tata letak nyata menggabungkan keduanya: Grid untuk kerangka halaman, Flexbox untuk penyelarasan tingkat komponen dalam setiap area grid. Kerangka kerja modern (Tailwind, Bootstrap 5) menganut pola ini.

Apakah CSS Grid berfungsi di peramban yang lebih lama?

Semua peramban evergreen (Chrome, Firefox, Safari, Edge) mendukung Grid sejak Maret 2017. Internet Explorer 11 hanya memiliki sintaks -ms-grid awal (subset, dengan prefiks, banyak fitur yang hilang). Untuk dukungan IE11, gunakan kueri @supports untuk kembali ke Flexbox atau tata letak berbasis float. Per 2024, IE11 memiliki penggunaan global kurang dari 0,5%, jadi sebagian besar tim telah meninggalkan fallback. Caniuse.com melaporkan dukungan global 97%+ untuk Grid tanpa prefiks.

Apa perbedaan antara grid-template-areas dan grid-area?

grid-template-areas diatur pada wadah grid dan secara visual memetakan wilayah grid yang dinamai (satu string per baris). grid-area diatur pada item grid untuk menetapkannya ke salah satu wilayah yang dinamai tersebut. Keduanya bekerja sama: wadah mendeklarasikan «peta», item mendeklarasikan «saya wilayah X». Anda juga dapat menggunakan grid-area langsung dengan nomor baris (grid-area: 1 / 1 / 3 / 4) alih-alih nama, yang berguna untuk tata letak dinamis.

Apa itu subgrid dan kapan saya harus menggunakannya?

Subgrid memungkinkan grid bersarang mewarisi definisi jalur grid induknya alih-alih membuat sendiri. Ini menyelesaikan masalah menyelaraskan item di seluruh grid bersarang, misalnya, kartu dengan tata letak internal yang harus selaras dengan kartu di sekitarnya. Gunakan grid-template-columns: subgrid pada grid bersarang. Tersedia di Firefox 71+ (Des 2019), Safari 16+ (Sept 2022), Chrome 117+ (Sept 2023). Kembali ke grid bersarang biasa di peramban yang tidak mendukung.

Bagaimana Grid berinteraksi dengan aksesibilitas?

Penempatan Grid tidak mengubah urutan sumber DOM: item muncul di posisi visual yang Anda tetapkan, tetapi pembaca layar dan urutan tab keyboard mengikuti sumber. WCAG 2.1 SC 1.3.2 Urutan Bermakna mengharuskan urutan sumber masuk akal ketika gaya dihapus. Implikasinya: rancang sumber DOM Anda terlebih dahulu untuk urutan baca logis, lalu gunakan Grid untuk menempatkan item secara visual. Jika Anda menata ulang item secara dramatis dengan grid-column: 3 / 5; grid-row: 2, audit dengan pembaca layar untuk mengonfirmasi bahwa urutan yang diucapkan masih masuk akal.