10 Cuplikan Kode Grid CSS yang Berguna

Spesifikasi grid CSS tidak sepenuhnya "baru" tetapi jelas lebih baru di dunia pengembang mainstream. Banyak pembuat kode frontend bahkan belum tahu tentang properti grid CSS, apalagi bagaimana penerapannya pada sebuah antarmuka.

Anda dapat menemukan banyak tutorial dengan mencari di sekitar, tetapi saya juga merekomendasikan mempelajari cuplikan kode. Dengan cara ini Anda menyelami proyek dunia nyata sehingga Anda dapat melihat cara kerja kisi CSS di laman web langsung.

Koleksi ini seharusnya menawarkan banyak sumber daya untuk membantu Anda mempelajari, menyesuaikan, dan menata ulang kisi CSS untuk apa pun yang Anda lakukan di web.

1. Blok Pahlawan Multi-Gambar

Mari kita mulai dengan blok pahlawan yang sangat keren ini yang dirancang dengan properti grid. Desain ini meniru bagian gambar pahlawan beranda yang akan Anda temukan di banyak situs web bergaya majalah.

Pengembang Rachel Andrew membuat ini menggunakan sedikit CSS khusus dari proyeknya sendiri. Ini bekerja dengan sangat baik, dan desainnya sepenuhnya responsif untuk boot.

Belum lagi tampilannya yang fantastis di layar ponsel; bukan sesuatu yang selalu Anda temukan dengan blok gambar besar.

Ini adalah sumber yang bagus untuk mempelajari kisi-kisi CSS dan cuplikan praktis bagi siapa saja yang mengkodekan tema blog bergaya majalah.

2. Tata Letak Kotak CSS

Properti grid-auto-flow ditampilkan penuh dengan demo ini menggunakan pengaturan "padat". Ini memaksa item untuk masuk lebih jauh ke bawah di halaman saat kisi diubah ukurannya.

Dengan pengaturan ini, Anda memiliki banyak kendali atas elemen halaman mana yang mengubah posisi, di mana perubahan itu terjadi, dan bagaimana kisi harus merespons. Ini mengambil kursi depan atas pertanyaan media yang digunakan terutama dalam desain responsif.

Jika Anda tidak yakin apa yang dilakukan kode ini, ingat saja: Google adalah teman Anda! Banyak posting bagus dan utas Stack Overflow yang mencakup seluruh pengaturan ini.

3. Fakta Labu yang Tidak Terlalu Menyeramkan

Berikut cuplikan keren yang dibuat dengan beberapa fakta dasar labu. Nah, fakta labu diatur oleh tata letak kotak CSS.

Kode tersebut sebenarnya berjalan di SCSS/Sass yang berarti Anda akan memerlukan beberapa keakraban dengan bahasa untuk menggali. Tetapi Anda juga dapat mengkompilasi kode Sass ke dalam CSS mentah tepat di dalam CodePen jika Anda ingin melihat properti dasarnya.

Salah satu hal favorit saya tentang desain ini adalah warna dan tipografi. Ini benar-benar meneriakkan Halloween dengan ikon labu dan semua nuansa kuning/oranye.

4. Tata Letak Heksagonal Otomatis

Ini mungkin salah satu proyek paling praktis yang saya temukan untuk galeri ini. Lihat gaya kisi ini dan coba ubah ukuran browser Anda.

Anda akan melihat item berbentuk heksagonal memformat ulang sendiri agar sesuai dengan halaman. Ini mungkin cara terbaik untuk menangani halaman kompleks dengan banyak foto. Saya sering melihat jenis tata letak ini di situs web konferensi dan halaman "tentang kami" untuk perusahaan dengan banyak karyawan.

Sekarang dengan struktur grid CSS Anda tidak perlu khawatir tentang gaya responsif manual. Dan cuplikan kode ini adalah tempat terbaik untuk memulai merencanakan tata letak yang serupa.

5. Pokedex di CSS Grid

Saya belum pernah melihat sesuatu yang sekreatif Pokedex ini dalam kotak CSS. Itu bergantung pada HTML dan CSS dengan sedikit JavaScript untuk mengisi ukuran sel secara otomatis.

Saat Anda mengubah ukuran halaman, Anda akan melihat grafik itu sendiri juga bertambah besar. Ini sangat mudah ditangani dengan CSS, dan bahkan lebih mudah setelah Anda mempelajari beberapa properti grid.

Perhatikan ini tidak interaktif sehingga Anda tidak dapat mengklik apa pun atau membuka halaman baru. Tetapi dengan fondasi tata letak yang ditetapkan, akan sangat mudah untuk menambahkan fitur-fitur itu.

6. Kotak Sederhana

Inilah ide yang sangat menarik yang membawa gaya desain cetak ke web. Lihat contoh ini di CodePen yang menampilkan banyak kolom dengan header dan tipografi besar.

Tata letak kisi itu sendiri bergantung pada kolom yang ditetapkan dengan celah yang telah ditentukan. Ini berarti saat Anda mengubah ukuran browser, kolom tertentu akan rusak sesuai dengan aturan ini.

Ini adalah cara terbaik untuk memastikan bahwa kolom tertentu selalu muncul di samping satu sama lain, atau setidaknya muncul dalam tampilan, sehingga mudah dibaca.

7. Grid CSS Dengan Flexbox Fallback

Tidak semua browser mengikuti struktur grid CSS. Itulah mengapa cuplikan ini mengajarkan Anda cara mendesain kisi CSS khusus menggunakan flexbox (dan float) sebagai fallback.

Ini sebenarnya rumit karena Anda ingin menggunakan properti kisi jika didukung, tetapi Anda ingin browser mengabaikannya jika tidak. Untungnya kode ini dikomentari dengan baik sehingga Anda dapat menggali dan bahkan mencoba menyesuaikan beberapa fitur untuk Anda sendiri.

Saya tidak akan menyebut ini solusi fallback yang sempurna, tetapi ini jelas lebih baik daripada tidak sama sekali.

8. Demo Terminologi Grid

Tidak yakin tentang semua terminologi grid CSS yang membingungkan ini? Maka cuplikan ini dapat membantu memperjelas semuanya.

Jika Anda menggali contoh ini, Anda akan menemukan beberapa fitur yang disorot dengan tulisan yang menjelaskan kisi-kisi di sepanjang jalan. Anda juga akan belajar cara melihat garis kisi dengan benar dan cara melihat kisi CSS secara akurat di halaman.

Perhatikan bahwa Anda tidak akan mendapatkan semuanya dari demo ini karena tidak mencakup semuanya. Itu hanya pengantar kecil untuk properti termudah dengan bantuan visual untuk membantu.

9. Menggunakan grid-template-columns: repeat()

Untuk contoh yang sangat spesifik dari properti grid-template-columns, lihat demo langsung ini. Ini menunjukkan kepada Anda cara menggunakan fitur pengulangan alih-alih mendeklarasikan nilai kolom yang sama beberapa kali di CSS Anda.

Sekali lagi, dukungan browser masih mengejar ini, tetapi sebagian besar browser web modern bekerja dengan teknik ini.

Belum lagi Anda akan menemukan banyak komentar di dalam CSS untuk membantu Anda memahami apa fungsinya.

10. Teka Teki Silang CSS Murni

Untuk mengakhiri dengan catatan yang menyenangkan, lihat teka-teki silang CSS murni Adrian Roworth. Seluruh tata letak ini dibangun hanya dengan kode HTML dan CSS, khususnya properti kisi CSS untuk struktur tata letak.

Yang lebih gila lagi adalah Anda dapat memasukkan konten ke dalam kotak teka-teki silang untuk benar-benar memecahkan teka-teki. Betapa kerennya itu!

Perhatikan bahwa hal ini cukup rumit dan merupakan salah satu dari sedikit proyek yang tercantum di sini yang tidak ramah seluler. Tapi ini adalah bukti seberapa jauh kita telah datang dengan tata letak grid di web, jadi saya berharap kita akan melihat lebih banyak hal semacam ini dalam waktu dekat.