21 Sistem & Kerangka Grid HTML5/CSS3 Teratas

Metode desain tradisional hanya beberapa tahun yang lalu berarti Anda harus mendesain beranda sendiri, menggabungkan wireframes dan kotak konten dan kemudian berharap yang terbaik, tetapi secara bertahap teknik ini telah menghilang dan metode baru yang lebih modern untuk pengembangan situs web yang cepat sudah muncul. Terutama, CSS3 memperkenalkan Flex-box — fungsi kisi yang mudah digunakan yang dapat Anda gunakan untuk membuat tata letak konten, tetapi tetap saja — beberapa tahan, sementara yang lain mengambil pendekatan yang lebih rumit untuk presisi desain mutlak.

Saat Anda membuka situs web baru, biasanya yang akan Anda lihat adalah bagian tajuk situs, area konten, dan bilah sisi — area utama tersebut juga menyertakan tata letak dan spesifikasi desainnya sendiri, dan lubang kelinci terus bertambah dalam. Sangat penting untuk menemukan cara merancang tata letak beranda (atau halaman lainnya) yang akan terlihat baik di semua media, perangkat, dan perangkat lunak. Jadi, kami pikir mungkin berguna bagi sesama pengembang bahwa kami mengumpulkan kumpulan kerangka kerja dan sistem CSS & HTML untuk mengembangkan tata letak kisi.

Ingin lebih banyak kerangka kerja? Coba roundup kami yang lain:

• Kerangka JavaScript
• Kerangka HTML5
• Kerangka CSS3
• Kerangka Node.js

Tak perlu dikatakan bahwa desain ini dapat beradaptasi dengan situasi apa pun, sehingga Anda dapat menyelamatkan diri dari sakit kepala karena harus mengatasi kekusutan dan keanehan dari tata letak desain itu sendiri, dan alih-alih fokus pada pemenuhan kotak kisi tersebut dengan konten yang Anda inginkan untuk diletakkan di sana. Ada banyak variasi dan gaya yang berbeda yang akan Anda temukan di seluruh sistem grid ini, luangkan waktu untuk mengunjungi halaman demo dan bahkan mungkin menuliskan apa yang Anda cari sehingga Anda memiliki waktu yang lebih mudah untuk menemukan kerangka kerja yang cocok untuk kebutuhan Anda.

Grid Sederhana Mati

Grid seharusnya tidak pernah rumit, pada intinya mereka hanya elemen HTML yang menyusun keseluruhan desain, dan Vladimir Agafonkin adalah salah satu pengembang yang menganut konsep itu. Kerangka gridnya Dead Simple Grid hanya memiliki dua ratus byte kode CSS; itu adalah jumlah kode yang minimal, halaman Anda bahkan tidak akan menyadari bahwa itu ada di sana.. Anda dapat memisahkan kisi untuk menampilkan area konten utama, dan bilah sisi fleksibel jika diinginkan. Kisi semacam ini akan sesuai dengan blog dan tata letak beranda umum di mana desain minimal lebih disukai. Desain responsif terintegrasi berkat kueri media, sehingga kisi akan terlihat sempurna di perangkat apa pun yang digunakan.

Bourbon Rapi

Bourbon adalah perpustakaan mixin yang sangat sukses untuk praprosesor SASS. Hal ini tentu saja membuat Neat menjadi pilihan yang menarik bagi mereka yang sudah menggunakan Bourbon dan SASS. Neat memberi pengembang akses ke sistem jaringan lancar yang cepat dan cukup mudah untuk disiapkan dalam hitungan menit, tetapi fleksibel hingga ke titik di mana perubahan dan penyesuaian tak terbatas tidak akan menjadi masalah.

halaman

Grd adalah sistem grid CSS yang menggunakan Flexbox sebagai alat backend untuk membuat tata letak responsif yang fleksibel dan modern. Menggunakan Demo Langsung, Anda dapat bermain dengan pengaturan dan penyesuaian desain yang berbeda untuk melihat apakah Grd dapat memecahkan masalah Anda dalam mendapatkan elemen desain tertentu yang terintegrasi dalam alur kerja Anda yang ada. Kami merasa mudah untuk membuat header, footer, dan area konten umum hanya menggunakan dropdown pengaturan.

STRUKTUR

Struktur, yang juga didasarkan pada Flexbox, menggunakan pola sintaksis deklaratif (mirip dengan yang ada di Angular.js) untuk menentukan bagian dan parameter tata letak. Beberapa pengembang mengeluh bahwa markup akhir halaman tidak dapat divalidasi, tetapi idenya adalah bahwa menggunakan Struktur Anda dapat membuat kisi deklaratif yang tidak mengacaukan atribut CSS tradisional, seperti kelas dan nama identifikasi.

960 Sistem Grid

Ratusan ribu situs web telah menggunakan Sistem Grid 960 Nathan Smith untuk memperkuat tata letak desain mereka. Ini adalah alat yang efisien untuk merampingkan alur kerja pengembang web yang bekerja keras. Melalui pilihan dua tata letak kolom yang berbeda (masing-masing 12 & 16), pengembang dapat dengan cepat mem-bootstrap beranda yang akan mendukung segala jenis input dinamis dan statis. Dimungkinkan untuk menambahkan lebih banyak kolom, tetapi Anda harus bekerja dengan dokumentasi untuk memahami penggunaannya dengan lebih jelas.

Tidak semantik

Unsemantic adalah versi lanjutan dari grid 960 yang menyediakan kemampuan desain responsif penuh. Melalui kelas tarik yang unik, pengembang dapat mengatur ulang tata letak halaman yang mereka hasilkan, yang dapat membantu mempromosikan dan menampilkan konten yang paling penting pada waktu tertentu, strategi yang dikenal untuk membantu mesin telusur lebih memahami tujuan setiap elemen konten. Unsemantic juga bangga menggunakan Media Queries, jadi pengembang front-end yang mapan tidak akan kesulitan menyesuaikan kerangka kerja grid ini untuk kebutuhan mereka sendiri.

Kotak Sederhana

Oleh karena itu namanya, Simple Grid adalah untuk semua orang yang menginginkan kesederhanaan dan kemudahan penggunaan. Tata letaknya responsif, kompatibel dengan smartphone, tablet, dan komputer desktop. Dengan kata lain, kinerja proyek Anda akan menjadi yang terbaik tanpa bayangan keraguan. Ini sepenuhnya selaras dengan layar besar dan resolusi yang lebih tinggi juga. Juga, Simple Grid hanyalah sebuah grid, tanpa aset tambahan apa pun, yang membuatnya sangat ringan. Dengan struktur dua belas kolom yang nyaman, Anda memiliki kebebasan untuk membuat tata letak yang sesuai dengan keinginan Anda. Anda dapat membaginya menjadi dua, tiga, empat atau enam kolom dengan sempurna.

csswizardry-grids

Dengan kisi HTML, seperti csswizardry-grids, Anda dapat menghemat waktu dan energi. Ini adalah alat yang kuat yang dapat Anda gunakan untuk isi hati Anda tepat. Ini sangat ramah pengguna dan mudah terstruktur, memastikan pengembang web dari semua tingkatan mendapatkan hasil maksimal darinya. Pada tangkapan layar di atas, Anda dapat mengintip semua variasi berbeda yang didukung csswizardry-grids. Anda dapat dengan bebas menyusun ulang barang-barang, sehingga cocok dengan keinginan Anda untuk tee. Lakukan aktivitas Anda dengan menghindari melakukan sesuatu dari bawah ke atas dengan csswizardry-grids sekarang dan mulai dengan langkah yang benar.

Grid yang Mendalam

Kebebasan yang ditawarkan Grid Mendalam kepada Anda melampaui dan melampaui. Anda dapat menggunakan sistem kisi yang fleksibel dan dapat diperluas ini baik untuk tata letak tetap maupun lancar. Hasilnya akan bekerja pada semua perangkat modern dengan lancar di luar kotak. Anda dapat membuat struktur persis yang Anda inginkan dengan mengubah, menghapus, atau menambahkan kolom sesuai keinginan Anda. Anda dapat memeriksa beberapa contoh terlebih dahulu untuk melihat apa yang mungkin dilakukan dengan Profound Grid. Selain itu, dengan margin negatif saat menghitung kolom, Grid Mendalam menjamin bahwa tata letak yang lancar tampak sama terlepas dari ukuran layar dan browser web.

Wajan

Manfaat menggunakan sistem grid sangat luar biasa, karena Anda tidak hanya menghemat waktu, tetapi Anda juga tidak perlu khawatir dengan masalah teknis. Misalnya, Griddle memastikan kompatibilitas lengkap dengan perangkat populer dan browser web. Artinya, kinerja aplikasi Anda akan selalu kelas satu. Dengan Griddle, Anda dapat menghasilkan apa pun mulai dari grid proporsional dan bersarang hingga unit terpusat dan hibrida. Adapun yang terakhir, dengan beberapa penyesuaian, Anda dapat menggabungkan unit tetap dan lancar dalam satu bangunan yang mengesankan. Anda memiliki kendali atas pemusatan horizontal unit, dan Anda bahkan dapat mengubah perataan vertikal.

Kotak Cerdas CSS

CSS Smart Grid mengikuti tren dan peraturan terbaru untuk memastikan kompatibilitas dengan perangkat yang berbeda. Singkatnya, alat ini ringan, responsif, dan mobile-first bagi Anda untuk membangun hal-hal epik dengannya. Baik menggunakan smartphone atau layar desktop besar, CSS Smart Grid memastikan tata letak beroperasi pada keduanya tanpa hambatan. Sekadar informasi, bahkan jika seseorang menggunakan ponsel berfitur untuk menjelajah internet, proyek Anda berdasarkan CSS Smart Grid akan bekerja dengan baik – dengan tampilan kolom tunggal. Di situs web resmi, Anda juga memiliki cara cepat, sehingga Anda tidak menghadapi masalah saat menggunakan alat ini.

Gridlex

Gridlex memang menonjol karena desainnya yang luar biasa dan kemudahan penggunaannya. Kesederhanaan kerangka kisi berbasis Flexbox ini menakjubkan, visinya sederhana — bungkus kolom Anda di dalam kisi Anda, dan jika perlu untuk penyesuaian tambahan apa pun untuk membuat desain akhir Anda terlihat menarik. Hanya dengan melihat demo situs web yang menggunakan Gridlex, terbukti bahwa ini adalah sistem grid teratas dan Anda tidak akan kecewa dengan apa yang dapat dilakukannya untuk proyek dan alur kerja Anda sendiri.

Sistem Grid Responsif

Sistem Grid Responsif memiliki banyak hal untuk itu, nama domain yang sempurna, visi yang jelas, dan alat yang diperlukan untuk membuat desain grid responsif menjadi mudah! Generator Grid memberikan input formulir sederhana di mana Anda dapat menentukan jumlah kolom yang ingin Anda gunakan, dan margin yang ingin Anda lihat di antara mereka.. klik kirim dan Anda sudah mendapatkan output kode yang siap digunakan tata letak grid responsif Anda berikutnya. Penulis, Graham, dengan senang hati melakukan semua kerja keras untuk Anda jika Anda menginginkannya, Anda dapat menghubunginya di footer halaman.

Gridly

Para pengembang membangun Gridly sebagai sistem tata letak grid minimal untuk mendukung browser paling modern saat ini. Strukturnya yang ringan membantu pengembang untuk memiliki waktu yang mudah untuk mendapatkan tata letak grid/kolom dan berjalan tanpa terlalu banyak kerumitan. Secara keseluruhan, ukuran perpustakaan yang sangat minimal ini akan membuat Anda menginginkan lebih banyak proyek yang akan datang.

Batu bentuk

Formstone bukanlah sistem grid tunggal yang dikelola dengan sendirinya, ini sebenarnya adalah perpustakaan untuk pengembang front-end yang membutuhkan komponen dan elemen web yang sangat dapat disesuaikan yang membentuk halaman web tradisional yang Anda temui setiap hari. Menjadi perpustakaan modular, responsif, dan otomatis — Formstone dapat digunakan tidak hanya untuk tujuan penskalaan proyek situs web besar-besaran, tetapi juga untuk penggunaan tata letak grid itu sendiri.

Bootstrap

Di mana Bootstrap akan berada hari ini jika bukan karena sistem gridnya yang menjadi dasar segala sesuatunya? Kami masih menantikan Bootstrap 4 untuk tiba, tetapi sementara itu.. Anda tidak dapat menolak untuk mengatakan ya kepada kerangka kerja yang telah berhasil memantapkan dirinya sebagai salah satu kerangka kerja front-end paling menonjol abad ini. Jutaan situs web didukung oleh fitur Bootstrap, namun semua itu tidak akan mungkin jika bukan karena kerangka kerja grid yang terintegrasi ke dalam inti Bootstrap.

Dasar

Foundation adalah pustaka front-end sukses lainnya yang mendukung desain responsif, versi terbaru (Foundation 6) menghadirkan fitur dan elemen yang lebih modern yang dapat membantu pengembang menyediakan desain yang sangat serbaguna bagi klien mereka. Template yang mudah digunakan yang disediakan oleh Foundation memberi Anda kesempatan untuk beristirahat dari semua pengembangan grid ini, dan alih-alih fokus pada apa yang penting — hal-hal yang akan Anda masukkan ke dalam grid itu sendiri.

Kerangka

Kerangka memiliki desain yang indah dan alami yang akan membuat Anda menginginkan lebih. Pencipta membentuk ide di balik Skeleton untuk menjadi pilihan terbaik untuk proyek-proyek kecil. Juga, Anda dapat menggunakannya pada proyek-proyek di mana Anda tidak merasa seperti menggunakan kerangka kerja yang lengkap akan sesuai. Skeleton memberi Anda hal-hal penting yang Anda perlukan untuk menjalankan dan menjalankan prototipe situs web; tata letak kisi, opsi tipografi untuk judul dan bagian, elemen tombol untuk semua kebutuhan formulir Anda, dan bahkan formulir kustom sehingga Anda dapat menghemat waktu karena harus membuat kode sendiri, tambahan daftar, tabel dan sintaks kode yang bagus, dan media kerangka kueri sehingga desain Anda menjadi sepenuhnya responsif!

Sistem Grid Responsif 2

Responsive Grid System (versi 2) adalah sistem grid mobile-first yang berukuran super kecil, namun sangat efektif dalam gaya. Anda dapat memilih dari berbagai tata letak kolom (24, 16, 12). Anda juga dapat menyesuaikan margin dan bantalan di antara kolom, dan menggunakan polyfill untuk membuat tata letak desain yang luar biasa.

Sistem Grid Responsif untuk Proyek Anda Selanjutnya

Sistem Grid Responsif untuk Proyek Berikutnya Anda menggunakan kelas yang sama dengan sistem grid 960. Itu dibangun untuk melayani pengunjung seluler terlebih dahulu, dan menyediakan boilerplate untuk manajemen header. Pengembang mengujinya akan semua browser modern sehingga Anda berada di tangan yang tepat. Anda dapat menggunakan ini sebagai sistem grid dasar yang akan membantu Anda membangun desain web yang responsif. Ini akan mempertahankan kemahiran Anda yang ada atas sistem grid populer.

Pelat Ketel HTML5

HTML5 Boilerplate adalah kerangka kerja (templat) boilerplate yang kuat untuk pengembang front-end. Ini untuk pengembang yang ingin memulai proyek mereka tanpa repot dengan kerangka kerja yang lebih besar seperti Bootstrap atau Foundation.