Grid.css - Sistem Grid Minimal untuk Pengembang Web

Kerangka kerja frontend yang lebih besar seperti Bootstrap datang bersama mereka pengaturan grid sendiri. Tapi mereka juga datang dengan banyak bagasi dalam bentuk elemen halaman pra-desain dan komponen JavaScript.

Jika Anda mencari sistem grid yang jauh lebih kecil dan efisien maka Anda akan menyukainya Grid.css.

Perpustakaan open source gratis ini dikemas dengan tradisional Sistem grid 12-col Anda dapat menyusun untuk tata letak apa pun. CSS sangat mudah digunakan dan file itu sendiri hanya berukuran 560 byte (itu setengah KB!)

Memulai sangat mudah dan Anda hanya perlu satu file CSS ditambahkan ke tajuk Anda.

Anda dapat menemukan tautan unduhan langsung di beranda Grid.css atau di repo GitHub resmi. Anda bahkan bisa menggunakan versi CDN mentah untuk menyematkan file ini langsung dari GitHub tanpa hosting sendiri.

Sekarang, Anda dapat mengatur struktur kolom Anda menggunakan elemen apa pun yang Anda inginkan (divs, bagian, dll).

Ini umumnya termasuk a .baris elemen (wadah) bersama dengan banyak elemen kolom internal. Kelas kolom gunakan angka untuk menentukan ruang total mereka di dalam wadah, jadi misalnya, .col4 membutuhkan empat kolom dari total dua belas.

Ini sebuah contoh cuplikan dari demo:

Anda bisa menggunakan kombinasi kelas kolom apa pun yang Anda suka, asalkan mereka tambahkan hingga 12.

Ini artinya Anda juga bisa merestrukturisasi halaman bagaimanapun yang Anda inginkan, dengan menggunakan kontainer baris yang berbeda. Misalnya, Anda bisa memiliki satu rentang besar untuk tajuk Anda tetapi menggunakan dua pengaturan baris / col yang berbeda untuk badan halaman Anda.

Secara alami, perpustakaan ini adalah 100% gratis dan open-source, jadi Anda bebas untuk mengedit sesuka Anda.

Penciptanya, Ahmed Tarek, juga membuat Butn yang merupakan varian dari banyak kit UI tombol di luar sana. Saya t berpasangan dengan baik dengan Grid.css, jadi mereka berdua perpustakaan yang sangat baik untuk mengambil ketika memulai proyek web baru.