hai teman-teman semuanya, apa kabar? kita lanjut lagi ya belajarnya, masih semangat kan? kemarin pada tutorial sebelumnya saya tealh membahas fungsi dari propertis column-count dan column-rule-style pada css yang bisa teman-teman lihat pada tutorial saya sebelumnya, nah kali ini kita masih akan membahas properti yang berkaitan dengan columnt-count, kali ini kita akan belajar fungsi propertis column-gap pada css.

Fungsi dari propertis yang satu ini adalah untuk memberikan jarak antar kolom yang telah kita bagi dengan fungsi column-count, perlu diingat, column-gap hanya berfungsi untuk colom yang dibagi dengan fungsi column-count. untuk lebih jelasnya kita langsung saja praktek, pertama silahkan teman-teman buat sebuah file dan ketikan script berikut ini:

Saya membuat tiga buah paragraf didalam sebuah div. dimana div tersebut saya bagi kolomnya dengan menggunakan css column-count, jika teman-teman save maka hasilnya akan seperti berikut ini:

fungsi propertis column-gap pada css 1

kolomnya teleah terbagi menjadi tiga kolom, nah sekarang coba teman-teman tambahkan propertis ini pada css:

Jika sudah silahakan teman-teman save kembali, lalu reload browsernya, maka hasilnya akan seperti berikut ini:

fungsi propertis column-gap pada css 2

Jarak antar kolom akan menjauh sama halnya seperti kita menggunakan padding atau margin, gimana teman-teman cukup mudah bukan,

Untuk tutorial kali ini tentang fungsi propertis column-gap pada css cukup sampai sini dulu, sampai bertemu lagi pada tutorial berikutnya,

Terima  kasih.