Grid.css - Sistem Grid Minimal untuk Pembangun Web

Rangka depan yang lebih besar seperti Bootstrap datang dengan mereka setup grid sendiri. Tetapi, mereka juga datang dengan banyak bagasi dalam bentuk unsur halaman pra-reka bentuk dan komponen JavaScript.

Jika anda mencari sistem grid yang lebih kecil dan lebih kecil maka anda akan suka Grid.css.

Perpustakaan sumber terbuka percuma ini dibungkus dengan tradisional Sistem grid 12-col bahawa anda boleh menyusun susun atur. CSS sangat mudah digunakan dan fail itu sendiri hanya langkah 560 bait (itu separuh KB!)

Bermula adalah sangat mudah dan anda hanya perlu satu fail CSS ditambah kepada pengepala anda.

Anda boleh mencari pautan muat turun terus di laman utama Grid.css atau di repo GitHub rasmi. Anda juga boleh menggunakannya versi CDN mentah untuk membenamkan fail ini secara langsung dari GitHub tanpa menganjurkannya sendiri.

Sekarang, anda boleh menetapkan struktur lajur anda menggunakan mana-mana elemen yang anda mahu (divs, sections, etc).

Ini biasanya merangkumi a .baris elemen (bekas) bersama ramai elemen lajur dalaman. Kelas lajur gunakan nombor untuk menentukan jumlah ruang mereka di dalam bekas, jadi contohnya, .col4 mengambil empat lajur dari jumlah dua belas.

Inilah satu coretan contoh dari demo:

Anda boleh menggunakan mana-mana gabungan kelas lajur yang anda suka, selagi mereka tambah sehingga 12.

Ini bermakna anda juga boleh menyusun semula halaman walau bagaimanapun, anda mahu, dengan menggunakan bekas berturut-turut. Contohnya, anda boleh mempunyai satu rentang besar untuk pengepala anda tetapi menggunakan dua set baris / kol yang berbeza untuk badan halaman anda.

Sememangnya, perpustakaan ini adalah 100% percuma dan sumber terbuka, jadi anda bebas membuat pengeditan namun anda suka.

Pencipta, Ahmed Tarek, juga dibuat Lembu yang merupakan varian banyak UI UI kit di luar sana. Ia berpasangan dengan Grid.css, jadi mereka kedua-dua perpustakaan yang sangat baik untuk mengambil ketika memulakan projek web baru.