Tutorial Grid CSS untuk Pemula (dengan Contoh Interaktif)

Perhatikan bahwa item petak ke-6 tumpang tindih dengan yang lain, berdasarkan penempatan yang ditentukan. Ini memiliki latar belakang yang berbeda warna dibandingkan yang lain, untuk memastikan Anda dapat melihat penempatannya dengan jelas. Jangan ragu untuk bermain-main dengan nilai baris yang diberi nama untuk melihat bagaimana item berubah.

Properti perataan umum

Banyak properti yang tersedia dalam spesifikasi Tata Letak Kisi bersifat universal untuk penyelarasan CSS dan juga digunakan dalam konteks CSS lainnya (mis. Flexbox). Properti ini adalah bagian dari Modul Penyelarasan Kotak.

Saya tidak akan membahasnya secara mendetail, tetapi Anda dapat merujuk kembali ke saya tutorial flexbox untuk demo interaktif tentang banyak fitur ini. Mereka bekerja serupa dalam konteks Tata Letak Kisi.

row-gap dan column-gap diterapkan ke grid container untuk menentukan selokan antara baris grid dan kolom justify-items diterapkan ke grid container untuk menentukan justifikasi item grid sepanjang sumbu baris, dalam sel grid individual justify-self is diterapkan ke item kisi apa pun untuk menentukan pembenaran sumbu baris dalam masing-masing item perataan sel kisi diterapkan ke wadah kisi untuk menentukan pembenaran item kisi di sepanjang sumbu kolom, dalam sel kisi individu perataan diterapkan ke item kisi apa pun untuk menentukan pembenaran sumbu kolom dalam masing-masing sel grid, ratakan-konten diterapkan ke wadah kisi untuk menentukan cara mendistribusikan ruang yang tidak terpakai di dalam wadah di sepanjang sumbu baris, konten yang selaras diterapkan ke wadah kisi untuk menentukan cara mendistribusikan ruang yang tidak terpakai di dalam wadah di sepanjang urutan sumbu kolom diterapkan ke item kisi individu untuk mengubah urutan item muncul secara default di sumber

Beberapa fitur penyelarasan umum ini lebih berguna dalam konteks flexbox, jadi Anda tidak akan terkejut jika tidak banyak menggunakannya dalam Tata Letak Grid.

Properti singkatan kisi

Sepanjang tutorial CSS Grid Layout ini, saya telah menggunakan properti CSS longhand secara eksklusif. Ini bagus saat Anda belajar, dan mungkin juga lebih baik untuk pemeliharaan kode.

Namun spesifikasi Tata Letak Kisi menyertakan sejumlah properti singkatan yang memungkinkan Anda menentukan kisi dengan sintaks yang lebih pendek. Saya akan mencantumkan semua ini di sini bersama dengan properti longhand yang mereka definisikan.

Perhatikan bahwa beberapa properti singkatan ini menerima kata kunci bersama dengan properti longhand yang diwakili. Beberapa juga menggunakan garis miring (/) di antara nilai.

grid-template – [grid‑template‑columns] [grid‑template‑rows] [grid‑template‑areas]

Singkatan grid ditulis dengan salah satu cara berikut (perhatikan kata kunci yang diperbolehkan):
[grid‑template]
[grid‑template‑rows] / auto ‑ flow [grid‑auto‑columns]
[grid‑template‑rows] / auto ‑ flow padat [grid‑auto‑columns]

aliran otomatis / [grid‑auto‑rows] / [grid‑template‑columns]

kisi-baris – [grid‑row‑start] / [grid‑row‑end]

kisi-kolom – [grid‑column‑start] / [grid‑column‑end]

grid-area – [grid‑row‑start] / [grid‑column‑start] / [grid‑row‑end] / [grid‑column‑end]

celah – [row‑gap] [column‑gap]

Fitur CSS Grid Layout lainnya

Ada banyak tutorial yang belum dibahas – dan memang demikian, ini adalah tutorial CSS Grid untuk pemula. Tetapi ada beberapa fitur dan teknik yang terkait dengan Tata Letak Kisi yang ingin Anda lihat setelah Anda memahami dasar-dasarnya. Berikut beberapa tautannya:

Kisi Sebaris – Properti tampilan menerima nilai kisi-sebaris

Subgrid – Memungkinkan Anda menentukan kisi baru dalam satu area kisi

Tata Letak Masonry – Teknik tata letak populer yang digunakan dalam desain modern, sekarang menjadi bagian dari spesifikasi Tata Letak Kisi

Mengulangi Baris dan Kolom – Menggunakan notasi fungsi repeat (), yang hanya saya sentuh sebentar

Kesimpulan

Itu saja untuk tutorial mendalam tentang dasar-dasar Tata Letak Grid CSS. Saya berharap contoh dalam demo interaktif akan memberi Anda cukup untuk mengutak-atik properti dan nilai yang berbeda untuk memahami sepenuhnya bagaimana Anda dapat menggunakannya untuk membangun tata letak modern. Untuk kenyamanan, semua demo CodePen dari tutorial Grid CSS ini dapat ditemukan di koleksi CodePen ini.

Dari situ, Anda harus bersiap membangun situs web dengan tata letak modern dan dapat dipelihara menggunakan serangkaian fitur canggih ini dan Anda tidak akan pernah mempertimbangkan peretasan tata letak lagi.

Ngomong-ngomong, jika Anda tertarik mempelajari cara membuat situs web di WordPress, kami juga memiliki panduan khusus yang membahas topik ini. Beberapa bahkan mungkin menyebutnya panduan utama membuat situs dengan WordPress! 😉

Sumber Artikel