Hallo sahabat dumenity berjumpa lagi dalam tutorial kursuswebdesign, pada tutorial kali ini saya akan membahas tentang Pengenalan Simple Grid dalam Metro UI. Grid sederhana Metro UI CSS mencakup sistem grid  responsif yang secara tepat mencakup hitungan  12 kolom. Ini termasuk kelas yang telah ditentukan untuk pilihan tata letak yang mudah. Sama halnya dengan framework Bootstrap yamg mempunyai jumlah grid 12 yang teman – teman pelajari di dumet school. Di dalam framework metro UI juga mengusung kolom 12 atau grid 12.Pada pembahasan sebelumnya saya membahas tentang cara instalasi framework metro UI CSS, bagi teman – teman yang belum tau silahkan klik di sini. Nah pada tahap kali saya akan menjelaskan kepada teman – teman bagaimana caranya menggunakan grid dalam metro UI CSS, Oke bagi teman – teman yang belum tau silahkan simak penjelasan saya di bawah ini;

Secara hierarki framework metro UI CSS mempunyai 12 grid.  Sistem grid digunakan untuk membuat layout halaman melalui serangkaian baris dan kolom yang menampung konten teman – teman. Begini cara kerja sistem grid:

  1. Baris harus ditempatkan dalam wadah .grid
  2. Gunakan baris untuk membuat kelompok kolom horizontal (kontainer dengan kelas .row).
  3. Konten harus ditempatkan di dalam kolom (kontainer dengan kelas .cell).
  4. Baris default berisi satu sel
  5. Untuk menentukan jumlah sel gunakan kelas builtin .cells2 … .cells12 untuk baris.
  6. Untuk membuat grid tanpa sel margin, tambahkan class .condensed ke grid main container
  7. Sel dapat diperpanjang dan menggantikan beberapa sel menggunakan kelas .colspan2 … .colspan12

Di bawah ini contoh sistem grid metro UI;

Pengenalan Simple Grid dalam Metro UI

Oke bagaimana teman – teman cukup mudah bukan mempelajari grid dalam metro UI, Oke itulah tadi pembahasan saya tentang Pengenalan Simple Grid dalam Metro UI. Untuk lebih jelasnya silahkan teman – teman bisa lihat di https://metroui.org.ua/grid.html  di situ di jelaskan bagaimana cara menngunakan grid – grid di metro UI.  Oke semoga bermanfaat.