Unlimited WordPress themes, graphics, videos & courses! Unlimited asset downloads! From $16.50/m
Advertisement
  1. Web Design
  2. CSS Grid Layout
Webdesign

5 Sumber Singkat untuk Menguasai Layout Grid CSS

by
Difficulty:BeginnerLength:ShortLanguages:

Indonesian (Bahasa Indonesia) translation by Lukman Nulhakim (you can also view the original English article)

Dalam tips singkat hari ini, saya akan menunjukkan kepada Anda lima sumber untuk menguasai layout Grid CSS. Mari kita mulai!

Pengantar Singkat tentang Grid

Grid Layout bisa dibilang salah satu perkembangan paling signifikan bagi para pengembang web sejak munculnya CSS. Ini adalah sistem tata letak yang khusus untuk digunakan dengan antarmuka pengguna berbasis grid, yang berarti bahwa pendekatan "Float" yang standar (sesuatu yang diretas, mari kita berterus terang) tidak lagi diperlukan sebagai sarana utama untuk meletakkan halaman web.

Rancangan Kerja yang pertama diterbitkan pada tahun 2011, dan, percaya atau tidak, kami berterima kasih kepada Microsoft untuk atas banyaknya perkembangan; tiga dari empat penulis awal adalah bagian dari tim Microsoft. Versi awal ini sudah usang saat ini, karena telah digantikan oleh CSS Grid Layout Module Level 1.

5 Sumber yang Berguna

Dukungan browser untuk Grid sudah sangat menjanjikan, jadi sudah saatnya Anda terbiasa dengan sintaksisnya. Berikut ini beberapa sumber yang bagus untuk Anda mulai.

Mozilla: Pengantar CSS Grid Layout

Contoh pertama berasal dari Mozilla. Pengantar CSS Grid Layout mencakup dasar-dasar, tetapi juga konsep lanjutan seperti penamaan baris. Ini adalah sumber yang menyeluruh, tetapi juga disajikan dengan indah dengan navigasi yang jelas, grafik yang menarik, dan pena yang dapat Anda fork dan mainkan.

learncssgrid.com

Sumber lain yang lengkap adalah learncssgrid.com oleh Jonathan Suh. Ini menjelaskan teori di balik sintaks, sementara juga menunjukkan contoh dari beberapa pola tata letak yang paling umum yang mungkin Anda butuhkan.

CSS Tricks: Panduan Lengkap untuk Grid

Selanjutnya kita menuju ke CSS Tricks untuk sumber lainnya yang menakjubkan oleh Chris House (dalam video, saya secara keliru menuliskan kredit Chris Coyier, mohon maaf atas kesalahan tersebut). "Panduan Lengkap untuk Grid" adalah persis seperti apa yang Anda harapkan; sangat lengkap. Ini merinci properti untuk container grid dan item grid pada kolom yang terpisah. Pekerjaan luar biasa, seperti biasa, dari CSS Tricks.

Grid by Example

"Grid by Example" dikembangkan dan dipelihara oleh Rachel Andrew (dia merupakan anggota dari kelompok kerja untuk CSS Grid Layout) dan telah ada selama beberapa waktu. Selain "panduan untuk memulai", yang akan memberi Anda semua informasi penting tentang spesifikasi, ini akan memberikan Anda banyak contoh dan "grab and go" merupakan pola untuk tata letak yang paling umum.

Kursus CSS Grid pada Envato Tuts+

Jika Anda lebih suka belajar melalui video, saya sangat menyarankan (jelas!) Anda melihat kursus-kursus ini oleh Craig Campbell. Yang pertama (3 Project CSS Grid untuk Web Desainer) memandu Anda melalui tiga proyek Grid CSS, dengan contoh-contoh di Codepen untuk Anda untuk berlatih dan berlatih.

3 CSS Grid Projects for Web Designers
3 Proyek CSS Grid untuk Web Designer

Kursus paling baru Craig (Membawa Layout CSS Grid dan Flexbox secara bersamaan) menjelaskan bagaimana Anda dapat menggunakan dua modul tata letak CSS yang paling kuat (Grid dan Flexbox) secara bersama-sama.

Bringing CSS Grid Layout and Flexbox Together
Membawa CSS Layout Grid dan Flexbox secara Bersamaan

Maju Terus dan Pelajari!

Pertemuan yang cepat ini memberi Anda awal yang baik untuk mempelajari CSS Grid. Semua sumber disini termasuk contoh-contoh praktis yang dapat Anda gunakan untuk menggali dan memperkuat teori. Saya akan meninggalkan Anda dengan beberapa tutorial lagi, tetapi sampai waktu berikutnya - selamat belajar!

Advertisement
Advertisement
Advertisement
Advertisement
Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.