Berapa jumlah kolom pada grid system milik bootstrap?

Hai mang, mang-cik, bi-cik apo kabar? sehat pastinya ya, atau mungkin ada yang lagi sakit, kita do’a-kan semoga di beri kesembuhan Aamiin.

Pada artikel kali ini saya akan coba membahas cara membuat Grid System seperti yang ada pada Boostrap dengan menggunkan salah satu dari SASS Control Directive yaitu ‘@for’

Apa itu SASS Control Directive? silahkan teman-teman baca disini //thesassway.com/intermediate/if-for-each-while

Mungkin tidak terlalu mirip dengan Grid yang ada pada Bootstrap, tapi kita akan coba bikin semirip mungkin dengan yang ada pada Bootstrap, biar mirip nanti mungkin ada class ‘col-xs-, col-sm-, col-md-, container dan row’ seperti yang ada pada Bootstrap.

Untuk membuat Grid system, ada beberapa variable yang harus atau wajib didefinisikan yaitu, Jumlah Column, Lebar Container, Gutter Width dan Lebar Column.

Jumlah Column
Jumlah kolom yang di pakai untuk memebuat Grid System yaitu sesuai standar nya dan yang di pakai pada Bootstrap adalah 12 kolom.

Lebar Container
Untuk lebar container juga mengikuti standar nya yaitu 1200px atau maksimal 1200px, tapi klo teman-teman butuh nya lebih dari itu tidak masalah, hanya saja untuk mengikuti standar, kurang lebih 1200px. untuk Bootstrap sendiri lebar container nya untuk versi 3 yaitu 1170px untuk yang versi 4 yang terbaru 1140px bisa teman-teman cek sendiri ya.

Gutter Width
Gutter Width adalah jarak padding antar kolom, jadi misalkan pada Bootstrap kita menggunakan dua kolom, jika teman-teman perhatikan antara kedua kolom tersebut ada jarak nya, jadi tidak saling menempel, pada Bootstrap Gutter Width yang di pakai adalah 30px.

Lebar Column
Lebar Column adalah lebar dari masing-masing column dari column 1 sampai 12 dan menggunakan satuan percent(%), jika kita menggunakan CSS kita bisa langsung beri value width secara manual 1 per 1 dari col smapai 12.

Jika menggunkan SASS kita bisa menggunakan rumus seperti berikut
(($column * 100) * 100) / 1200 #{%} dan untuk memberi value width pada masing-masing kolom kita bisa menggunakan kondisi ‘@for’

Oke kita langsung saja, kita buat style nya menggunakan SASS, pertama kita definisikan ke dalam variable lebar column, Gutter width dan lain — lain seperti berikut:

Untuk Gutter Width kita bagi 2, karena nanti masing-masing akan di gunakan pada padding-left dan padding-right pada tiap-tiap Column

kemudian tambahkan style berikut:

Style di atas menurut pemahaman saya adalah untuk menetralkan bertambah nya width oleh padding dan atau border, maksudnya begini jadi, saat kita mengunakan width pada sebuah DIV dengan menggunakan value percent(%), misal “width: 50%;” saat kita beri border-left: 15px pada DIV tersebut maka width-nya akan bertambah tidak lagi 50%, maka untuk mengatasi hal tersebut kita tambahkan style box-sizing: border-box seperti di atas.

Jika teman-teman ada yang tau fungsi lain dari style box-sizing: border-box silahkan tulis di kolom komentar ya.

Berikut nya kita akan membuat fungsi untuk menghitung lebar pada masing-masing column sebagai berikut:

Pada fungsi colWidth terdapat variable $i yang nanti nya akan di isi dengan column 1 -12 di kali 100 dan di klai 100 lagi kemnudian di bagi dengan lebar container, agar hasil nya menjadi percent(%) maka kita tambahkan variable $percent dibelakangnya.

Selanjut nya kita akan membuat style unttuk container dan row sperti di bawah ini:

Pada class container saya berikan width 1170 sama seperti pada Bootstrap, tapi di sini saya gunakan max-width dan untuk padding-left dan padding-right kita isi dengan variable $gutter dimana isi dari variable $gutter adalah 15px

Kemudian untuk row kita berikan minus gutter untuk masing-masing margin-left dan margin-right yang berfungsi untuk meng-hapus padding-left dan padding-right yang ada pada container ketika kita akan menggunakan column atau class col.

Selanjutnya kita buat style yang digunakan untuk setiap column sebagai berikut:

yang paling penting dari style untuk column di atas adalah float: left, karena style ini yang akan membuat tiap-tiap column sejajar satu sama lain.

kemudian kita akan menambahkan style width pada column karena tiap-tiap column berbeda width, maka disin kita akan menggunakan perulangan ‘for’.

tapi sebelumnya di sini kita akan memiliki class col-xs, col-sm, col-md, yang di mana nanti akan digunakan untuk style responsive nya jadi untuk class col-xs, sm dan md akan memiliki breakpoint nya masing-masing yaitu
col-xs : akan terbaca saat resolusi 240 ke atas
col-sm: akan terbaca saat resolusi 768 ke atas
col-md: akan terbaca saat resolusi 992 ke atas
Yang arti nya jika kita memiliki DIV html seperti berikut:

artinya pada saat resolusi desktop misal 1920 sampai 992 dia akan memakain style dari class col-md-12, kemudian jika resolusi sudah berada pada breakpoint 991 maka dia akan memakai style dari class col-sm-6 dan ketika resolusi berada pada 767 dia akan memakain class dari col-xs-3

itu berarti kita akan menggunakan 3 media queries yaitu
@media(min-width: 240px)
@media(min-width: 768px)
@media(min-width: 992px)
nah di dalam tiap-tiap media queries itu nantinya akan kita gunakan perulang ‘for’ untuk membuat class col-1 sampai 12 dan manambahkan width pada tiap-tiap class col- menggunakan fungsi colWidth()

berikut ini adalah kode style-nya:

Karena saya mengunakan min-width untuk media queries nya maka kita harus mulai dari breakpoint terkecil terlebih dahulu seperti di atas dan jika teman-teman menggunakan max-width maka sebaliknya.

Untuk fungsi perulangan ‘for’ bisa teman-teman lihat di atas yaitu
@for $i from 1 through 12 variable $i akan berulang mulai dari 1 sampai 12
dan variable $i tersebut akan digunakan untuk membuat class col-1 sampai 12 yang digunakan seperti ini “.#{$col-xs}-#{$i}”.

Dan juga akan digunakan untuk menentukan width kareana di dalam perulangan tersebut kita menjalankan fungsi colWidth() yang juga menggunakan variable $i.

Kemudan kita coba dengan membuat kode HTML seperti berikut ini:

Untuk melihat full code dan demo silahkan teman-teman buka link berikut

Oke saya rasa cukup untuk artikel kali ini, jika ada yang kurang atau ada yang mau dinyakan silahkan tulis di kolom komentar dan jika artikel ini bermanfaat dan teman-teman suka jangan lupa like and share nya yak.

Thank you..

Berapa jumlah kolom pada sistem grid pada bootstrap?

Apa itu sistem grid pada bootstrap?

Apa itu class Row?

Apa fungsi XS di dalam grid?