Belajar Semantic UI : Grid System

Grid System adalah Grid System di web desain salah satu faktor penting dalam layout website menjadi lebih konsisten, sehingga sangat membantu dalam membuat dan membangun website.

grid system

Columns (kolom)

terdapat 16 kolom di semantic UI, dari setiap kolom dapat diatur lebar kolom tersebut. sebagai contoh berikut ini kode untuk 4/4 kolom di semantic UI,

kode diatas membuat 4 kolom yang terdiri dari 4 grid dari masing-masing kolomnya. berikut ini tampilan grid dengan kode diatas.

kolom di semantic

berikut ini beberapa sifat tambahan tentang kolom di semantic

1. Automatic Flow

Kolom di semantic ui terdapat 16 dan jika suatu saat kita menggunakan lebih dari 16 kolom maka otomatis kolom yang tersebut akan berada dibaris ke 2 padahal kita tidak mendeklarasikan sebuah “row” pada kode tersebut. sebagai contoh perhatikan kode dibawah ini

menghasilkan sebuah kolom yang dapat dilihat digambar berikut ini  4/4 dan 2/8/6

baris ke 2

2. Column Content

sytle dari kolom tidak tampil langsung pada kolom tetapi tampil terdapat di element di dalam kolom. hal ini karena kolom telah menggunakan padding disetiap barisnya,.

Column Content

Rows (baris)

rows merupakan bagian dari kolom dengan bentuk mendatar. row dapat diperjelas dengan nambahkan class “row” di element html, yang biasanya merupakan <div>. atau terjadi secara otomatis seperti kode sebelumnya jika tidak ada kolom lagi yang tersisa.

grid system row semantic

 

Leave a Reply

Your email address will not be published. Required fields are marked *