Tutorial Belajar CSS Bagian 26 : Cara Membuat Multi Column di CSS

0
1635

Pada tutorial sebelumnya, kita sudah mempelajari Tutorial Belajar CSS Bagian 25 : Cara Membuat 3D Transform di CSS. Selanjutnya, kita akan mempelajari cara membuat multi column di CSS.

CSS3 mendukung fungsi untuk membentuk multi kolom, menyusun teks seperti kolom koran.

Beberapa properti multi kolom yang paling umum digunakan seperti yang ditunjukkan di bawah ini :

No. Nilai & Deskripsi
1column-count
Digunakan untuk menghitung jumlah kolom elemen yang harus dibagi.
2column-fill
Digunakan untuk memutuskan, bagaimana mengisi kolom.
3column-gap
Digunakan untuk menentukan jarak antar kolom.
4column-rule
Digunakan untuk menentukan jumlah aturan.
5rule-color
Digunakan untuk menentukan warna aturan kolom.
6rule-style
Digunakan untuk menentukan aturan gaya untuk kolom.
7rule-width
Digunakan untuk menentukan lebar.
8column-span
Digunakan untuk menentukan rentang antar kolom.

Digunakan untuk menentukan rentang antar kolom.

Contoh di bawah ini menunjukkan susunan teks sebagai struktur kertas baru.

<html>
   <head>
      <style>
         .multi {
            /* Column count property */
            column-count: 4;
            
            /* Column gap property */
            column-gap: 40px;
            
            /* Column style property */ 
            column-rule-style: solid;
         }
      </style>
   </head>

   <body>
   
      <div class = "multi">
         Bagian standar dari teks Lorem Ipsum yang digunakan sejak tahun 1500an kini di reproduksi kembali di bawah ini untuk mereka yang tertarik. Bagian 1.10.32 dan 1.10.33 dari "de Finibus Bonorum et Malorum" karya Cicero juga di reproduksi persis seperti bentuk aslinya, diikuti oleh versi bahasa Inggris yang berasal dari terjemahan tahun 1914 oleh H. Rackham.
      </div>
      
   </body>
</html>

Browser akan menampilkan hasil sebagai berikut :

Misalkan, jika pengguna ingin menjadikan teks sebagai baris baru tanpa garis, kita dapat melakukannya dengan menghapus sintaks style seperti yang ditunjukkan di bawah ini.

<html>
   <head>
      <style>
.multi {
/* Column count property */
   column-count: 4;
   
   /* Column gap property */
   column-gap: 40px;
}

      </style>
   </head>

   <body>
   
      <div class = "multi">
         Bagian standar dari teks Lorem Ipsum yang digunakan sejak tahun 1500an kini di reproduksi kembali di bawah ini untuk mereka yang tertarik. Bagian 1.10.32 dan 1.10.33 dari "de Finibus Bonorum et Malorum" karya Cicero juga di reproduksi persis seperti bentuk aslinya, diikuti oleh versi bahasa Inggris yang berasal dari terjemahan tahun 1914 oleh H. Rackham.
      </div>
      
   </body>
</html>

Browser akan menampilkan hasil sebagai berikut :

Semoga tutorial ini membantu Anda untuk belajar cara memuat multi column di CSS untuk membentuk kolom seperti di koran.

TINGGALKAN KOMENTAR

Silakan masukkan komentar anda!
Silakan masukkan nama Anda di sini

Situs ini menggunakan Akismet untuk mengurangi spam. Pelajari bagaimana data komentar Anda diproses.