Buat Tata Letak Modern dengan Mudah dengan Gridlex CSS Grid System
Perkembangan frontend telah meningkat secara radikal dengan diperkenalkannya CSS flexbox. Ini membuatnya lebih mudah buat kisi & kolom yang secara alami bergeser untuk tata letak yang responsif.
Alih-alih mengode kisi-kisi flexbox Anda sendiri dari awal, jauh lebih mudah menggunakan alat seperti Gridlex. Perpustakaan flexbox open source gratis ini adalah super ringan dan sangat mudah untuk disesuaikan.
Yang kamu lakukan adalah tambahkan stylesheet Gridlex ke halaman web Anda dan bekerja dengan kelas gridnya. Kolom internal mengambil kelas .col dan Anda membungkus semua ini di dalam a .kisi wadah. Ini mendefinisikan setiap kolom pada lebar yang sama dan menciptakan antarmuka yang seragam.
Default ini dapat diganti dengan menambahkan kelas ukuran ke setiap kolom. Dengan cara ini Anda dapat memiliki satu kolom pada lebar 70% dan kolom lainnya pada lebar 30% (mis. Konten / sidebar).
Anda akan menemukan banyak sampel grid di beranda Gridlex dengan demo langsung dan cuplikan kode untuk menyalin / menempel ke situs Anda. Ini adalah perpustakaan besar dengan begitu banyak kelas opsional untuk membantu Anda membangun grid paling sederhana untuk situs web apa pun.
Semua kisi ditambahkan hingga a total 12 kolom mini, sehingga Anda dapat menentukan berapa banyak ruang yang harus diambil setiap kolom. Ini mungkin tampak membingungkan tetapi masuk akal ketika Anda melihat demo visual.
Ini a contoh kode digunakan untuk kisi yang lebih besar dengan lebar yang bervariasi:
.........
Perhatikan bahwa .kisi kelas berisi segalanya dan kolom berusaha dibagi menjadi 12 bagian (dalam contoh ini akan menjadi ⅓ lebar untuk masing-masing). Namun, kolom tetap span 2 dan 6 cols masing-masing, jadi kolom pertama menggunakan lebar otomatis berdasarkan apapun yang tersisa.
Dengan menggunakan dua kolom lainnya, kita dapat menyimpulkan bahwa akan ada 4 kolom (12-6-2) tersisa mencapai total 12. Itu semua matematika yang sangat sederhana tetapi nama-nama kelasnya bisa membingungkan. Setelah Anda mulai bermain dengan Gridlex pada suatu proyek, Anda akan mengambil sistem penamaan dengan cepat.
Gridlex saat ini dalam versi 2.x dan itu terus diperbarui di GitHub. Saat dukungan browser tumbuh, saya akan menjamin lebih banyak perhatian pada flexbox, dengan lebih banyak situs mengadopsi model ini untuk kisi-kisi halaman.
Anda bahkan dapat menemukan galeri penuh situs web yang menjalankan Gridlex untuk melihat tampilannya saat diterapkan ke situs web langsung.
Jika Anda belum pernah menggunakan flexbox sebelumnya maka Gridlex bisa menjadi perpustakaan yang menyenangkan untuk dimainkan. Tetapi saya juga merekomendasikan berlatih terlebih dahulu menggunakan game flexbox yang menyenangkan untuk menguji pengetahuan Anda dan membantu Anda memahami dasar-dasarnya.
Gridlex adalah tersedia secara gratis dalam repo GitHub atau Anda dapat menariknya melalui npm atau bower. Itu menawarkan dokumentasi lengkap di situs utama, termasuk demo untuk berbagai kolom dan kueri media dengan lebar yang berbeda-beda.
Kamu punya kontrol penuh atas desain flexbox dan hanya itu membutuhkan beberapa kelas CSS untuk membuatnya terjadi! Dan jika Anda memiliki pertanyaan cepat atau ingin berbagi situs yang Anda buat menggunakan Gridlex, Anda dapat mengirim pesan kepada pembuatnya di Twitter @webdevlint.
