Buat Layouts Moden dengan Mudah dengan Gridlex CSS Grid System
Perkembangan Frontend telah meningkat secara mendadak dengan pengenalan Flexbox CSS. Ini menjadikannya lebih mudah untuk buat grid & lajur yang semulajadi beralih untuk susun atur responsif.
Daripada pengekodan grid flexbox anda sendiri dari awal, ia lebih mudah menggunakan alat seperti Gridlex. Perpustakaan terbuka flexbox sumber terbuka ini super ringan dan sangat mudah untuk menyesuaikan.
Apa yang awak lakukan ialah tambah Gridlex stylesheet ke laman web anda dan bekerja dengan kelas gridnya. Lajur dalaman mengambil kelas .col dan anda membungkus semua ini di dalam a .grid bekas. Ini mentakrifkan setiap lajur pada lebar yang sama dan mewujudkan antara muka seragam.
Lalai ini boleh ditindih dengan menambah kelas sizing ke setiap lajur. Dengan cara ini anda boleh mempunyai satu lajur pada lebar 70% dan lajur yang lain pada lebar 30% (cth. Kandungan / sidebar).
Anda akan mendapati tan sampel grid di halaman rumah Gridlex dengan demo langsung dan coretan kod untuk menyalin / paste ke laman web anda. Ia adalah perpustakaan besar dengan begitu banyak kelas pilihan untuk membantu anda membina grid mudah untuk laman web mana pun.
Semua grid menambah sehingga a jumlah 12 mini-kolom, jadi anda boleh menentukan berapa banyak ruang setiap lajur perlu diambil. Ini mungkin kelihatan mengelirukan tetapi masuk akal apabila anda melihat demo visual.
Inilah a contoh kod digunakan untuk grid yang lebih besar dengan lebar yang berlainan:
.........
Perhatikan bahawa .grid kelas mengandungi segala-galanya dan percubaan lajur berpecah menjadi 12 bahagian (dalam contoh ini akan menjadi lebar ⅓ untuk setiap satu). Walau bagaimanapun, lajur tetap span 2 dan 6 cols masing-masing, jadi lajur yang pertama menggunakan lebar automatik berdasarkan apa sahaja yang tersisa.
Menggunakan dua lajur yang lain, kita boleh menyimpulkan bahawa akan ada 4 tiang (12-6-2) ke kiri memukul sejumlah 12. Ia semua matematik yang sangat mudah tetapi nama kelas boleh mengelirukan. Sebaik sahaja anda mula bermain dengan Gridlex pada projek, anda akan mengambil sistem penamaan dengan cepat.
Gridlex pada masa ini dalam versi 2.x dan ia sentiasa dikemas kini pada GitHub. Apabila sokongan penyemak imbas berkembang, saya menjamin lebih banyak perhatian kepada flexbox, dengan lebih banyak laman web mengguna pakai model ini untuk grid halaman.
Anda juga boleh mencari galeri penuh daripada laman web yang menjalankan Gridlex untuk melihat bagaimana ia kelihatan apabila diterapkan ke laman web langsung.
Jika anda tidak pernah menggunakan flexbox sebelum itu Gridlex boleh menjadi perpustakaan yang menyeronokkan untuk dimainkan. Tetapi saya juga cadangkan berlatih pertama menggunakan permainan flexbox yang menyeronokkan untuk menguji pengetahuan anda dan membantu anda memahami asas-asasnya.
Gridlex adalah boleh didapati secara percuma dalam repo GitHub atau anda boleh tariknya melalui npm atau bower. Ia menawarkan dokumentasi penuh di tapak utama, termasuk demo untuk lajur yang berbeza-beza dan pertanyaan media.
Kamu ada kawalan penuh lebih reka bentuk fleksibel dan ia hanya mengambil beberapa kelas CSS untuk menjadikannya berlaku! Dan jika anda mempunyai soalan yang cepat atau ingin berkongsi tapak yang anda bina menggunakan Gridlex, anda boleh menghantar mesej pencipta di Twitter @webdevlint.
