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,

<div class="ui grid">
  <div class="four wide column"></div>
  <div class="four wide column"></div>
  <div class="four wide column"></div>
  <div class="four wide column"></div>
</div>

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

<div class="ui grid">
  <div class="four wide column"></div>
  <div class="four wide column"></div>
  <div class="four wide column"></div>
  <div class="four wide column"></div>
  <div class="two wide column"></div>
  <div class="eight wide column"></div>
  <div class="six wide column"></div>
</div>

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,.

<div class="ui three column grid">
  <div class="column">
    <div class="ui segment">
      <img>
    </div>
  </div>
  <div class="column">
    <div class="ui segment">
      <img>
    </div>
  </div>
  <div class="column">
    <div class="ui segment">
      <img>
    </div>
  </div>
</div>

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.

<div class="ui four column grid">
  <div class="row">
    <div class="column"></div>
    <div class="column"></div>
    <div class="column"></div>
  </div>
  <div class="column"></div>
  <div class="column"></div>
  <div class="column"></div>
  <div class="column"></div>
</div>

grid system row semantic

 

Leave a Reply

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

This site uses Akismet to reduce spam. Learn how your comment data is processed.