1. Kolom
Dengan CSS3, Anda dapat membuat beberapa kolom sebagai tempat meletakkan teks, sementara itu Anda juga akan belajar tentang beberapa properti kolom sebagaimana di berikut ini:
- column-count
- column-gap
- column-rule
2. Menentukan Jumlah Kolom
Contoh, saya akan coba atur layout elemen berikut ini:
Sebelum
Sesudah
Dan
Hasilnya
3. Menentukan Jarak Antar Kolom
Dengan menambahkan properti berikut ini pada class columns;
Maka, hasilnya akan seperti di bawah ini, Anda bisa bandingkan hasil di bawah dengan hasil di atas saat sebelum pengaturan jarak antar columns.
4. Mengatur Garis Antar Kolom
Dengan cara menambahkan properti berikut ini pada class columns;
Hasilnya
5. Flexbox
Digunakan untuk mengorganisasikan data halaman website dalam bentuk multi baris dan kolom. Lebih jelasnya perhatikan contoh berikut ini;
Note: Tidak semua browser support properti flexible box ini, termasuk chrome saya, sehingga hasilnya akan tampak seperti ini ;
Style:
Hasilnya
