Tata Letak Cawan Suci dengan Grid

Tata Letak Cawan Suci adalah pola desain web klasik: halaman setinggi penuh dengan kepala halaman, kaki halaman, dan bagian tengah tiga kolom (bilah sisi kiri, konten utama, dan bilah sisi kanan). Tata letak ini terkenal sulit dibuat dengan elemen mengambang; Kisi membuatnya mudah.

Tentukan tata letak dengan area templat dan baris bernama: grid-template-areas memetakan struktur visual. Tiga kolom dan tiga baris (kepala halaman membentang di semua kolom, kaki halaman juga membentang di semua kolom, sedangkan bagian tengah memiliki tiga kolom) merangkum seluruh tata letak dalam diagram ASCII yang mudah dibaca.

Setiap elemen anak merujuk areanya berdasarkan nama: header { grid-area: header }, main { grid-area: main }, nav { grid-area: sidebar }, aside { grid-area: aside }, footer { grid-area: footer }. Kisi menempatkan semuanya secara otomatis.

Baris tengah menggunakan 1fr yang mengisi seluruh tinggi area pandang yang tersisa setelah kepala halaman dan kaki halaman dengan tinggi tetap. Hal ini memastikan bilah sisi dan konten utama selalu membentang untuk mengisi area pandang, tanpa memerlukan perhitungan tinggi secara eksplisit.

Pada perangkat seluler, gunakan kueri media untuk mendefinisikan ulang grid-template-areas sebagai tumpukan satu kolom: kepala halaman, bilah sisi, konten utama, panel samping, dan kaki halaman disusun secara vertikal. Urutan DOM dipertahankan; hanya templat kisi visual yang berubah. Area kisi membuat penataan ulang responsif mudah dibaca.

Pada tablet, hapus panel samping kanan dan perluas konten utama: definisikan ulang menjadi "header header" "sidebar main" "footer footer" dengan grid-template-columns: 240px 1fr. Tetapkan aside { display: none } atau pindahkan panel tersebut ke bawah konten utama dalam definisi area.

Tambahkan jarak antarjalur kisi: gap: var(--spacing-4). Terapkan ruang dalam di setiap area, bukan pada wadah kisi, agar jarak tetap konsisten. Kepala halaman dan kaki halaman biasanya memiliki ruang dalam horizontal sendiri yang mengikuti perataan lebar maksimum kisi.

Area konten utama juga dapat berupa kisi — artikel dua kolom dan bilah sisi di dalam area utama. Kisi bersarang membuat tata letak konten di dalam kerangka halaman tanpa hierarki kelas yang rumit atau pemosisian yang bersarang terlalu dalam.

Buat kepala halaman melekat: header { position: sticky; top: 0; z-index: 10; }. Dalam tata letak kisi, pemosisian melekat pada elemen anak kisi berfungsi seperti yang diharapkan — kepala halaman tetap melekat sementara konten utama, bilah sisi, dan panel samping menggulir di bawahnya.

Kedua bilah sisi dapat dibuat melekat: nav, aside { position: sticky; top: 0; height: 100vh; overflow-y: auto; }. Keduanya tetap terlihat saat konten utama digulir, sehingga menghasilkan tata letak tiga panel yang hanya menggulir di bagian tengah.

Gunakan Kisi untuk tata letak kerangka halaman dua dimensi seperti Tata Letak Cawan Suci — Kisi unggul dalam menempatkan elemen ke baris dan kolom bernama secara bersamaan. Gunakan tata letak fleksibel untuk tata letak komponen satu dimensi (item navigasi dalam satu baris, konten kartu dalam satu kolom) di dalam area kisi.

Apa yang membuat grid-template-areas sangat berguna untuk tata letak Cawan Suci yang responsif?

Kisi CSS membuat Tata Letak Cawan Suci yang secara historis sulit menjadi mudah: grid-template-areas memberi nama pada berbagai wilayah, 1fr untuk baris tengah mengisi tinggi area pandang, dan kueri media mendefinisikan ulang peta area untuk penciutan responsif. Kepala halaman dan bilah sisi melekat dapat ditambahkan tanpa kerumitan tambahan.