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:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 |
<!DOCTYPE html> <html> <head> <style> div { column-count: 3; } </style> </head> <body> <div> <p>Lorem ipsum dolor sit amet Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.</p> <p>Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi te feugait nulla facilisi.</p> <p>Nam liber tempor cum soluta nobis eleifend option congue nihil imperdiet doming id quod mazim placerat facer possim assum. Typi non habent claritatem insitam; est usus legentis in iis qui facit eorum claritatem. Investigationes demonstraverunt lectores legere me lius quod ii legunt saepius.</p> </div> </body> </html> |
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:
kolomnya teleah terbagi menjadi tiga kolom, nah sekarang coba teman-teman tambahkan propertis ini pada css:
|
1 |
column-gap: 80px; |
Jika sudah silahakan teman-teman save kembali, lalu reload browsernya, maka hasilnya akan seperti berikut ini:
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.