Section Artikel
Tata Letak Multiple Colums CSS
Tata letak multi-kolom di CSS berfungsi untuk membuat beberapa kolom teks sesuai yang kita inginkan, seperti tampilan di koran.
Properti CSS Multi-Column
Berikut ini merupakan properti Multi-Kolom yang akan kita pelajari :
column-countcolumn-gapcolumn-rule-stylecolumn-rule-widthcolumn-rule-colorcolumn-rulecolumn-spancolumn-width
Browser Pendukung
| Properti | Google Chrome | Microsoft Edge | Mozila Firefox | Safari | Opera |
|---|---|---|---|---|---|
| column-count | 50.0 | 10.0 | 52.0 | 9.0 | 37.0 |
| column-gap | 50.0 | 10.0 | 52.0 | 9.0 | 37.0 |
| column-rule | 50.0 | 10.0 | 52.0 | 9.0 | 37.0 |
| column-rule-color | 50.0 | 10.0 | 52.0 | 9.0 | 37.0 |
| column-rule-style | 50.0 | 10.0 | 52.0 | 9.0 | 37.0 |
| column-rule-width | 50.0 | 10.0 | 52.0 | 9.0 | 37.0 |
| column-span | 50.0 | 10.0 | 71.0 | 9.0 | 37.0 |
| column-width | 50.0 | 10.0 | 52.0 | 9.0 | 37.0 |
Membuat Banyak Kolom CSS
Properti column-count menentukan jumlah kolom yang harus dibagi menjadi elemen.
Contoh berikut akan membagi teks dalam elemen <div> menjadi 3 kolom:
Contoh :
<!DOCTYPE html> <html> <head> <style> .newspaper { column-count: 3; } </style> </head> <body> <div class="newspaper"> 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. 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. Nam liber tempor cum soluta nobis eleifend option congue nihil imperdiet doming id quod mazim placerat facer possim assum. </div> </body> </html>
Tentukan Gap Antar Kolom CSS
Properti column-gap menentukan jarak antar kolom.
Contoh berikut menentukan jarak 40 piksel antara kolom:
Contoh :
<!DOCTYPE html>
<html>
<head>
<style>
.newspaper {
column-count: 3;
column-gap: 40px;
}
</style>
</head>
<body>
<div class="newspaper">
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. 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. Nam liber tempor cum soluta nobis eleifend option congue nihil imperdiet doming id quod mazim placerat facer possim assum.
</div>
</body>
</html>
Aturan Kolom CSS
Properti column-rule-style menentukan gaya aturan antara kolom:
Contoh :
<!DOCTYPE html>
<html>
<head>
<style>
.newspaper {
column-count: 3;
column-gap: 40px;
column-rule-style: solid;
}
</style>
</head>
<body>
<div class="newspaper">
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. 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. Nam liber tempor cum soluta nobis eleifend option congue nihil imperdiet doming id quod mazim placerat facer possim assum.
</div>
</body>
</html>
Properti column-rule-width menentukan lebar aturan antar kolom:
Contoh :
<!DOCTYPE html>
<html>
<head>
<style>
.newspaper {
column-count: 3;
column-gap: 40px;
column-rule-style: solid;
column-rule-width: 1px;
}
</style>
</head>
<body>
<div class="newspaper">
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. 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. Nam liber tempor cum soluta nobis eleifend option congue nihil imperdiet doming id quod mazim placerat facer possim assum.
</div>
</body>
</html>
Properti column-rule-color menentukan warna aturan antara kolom:
Contoh :
<!DOCTYPE html>
<html>
<head>
<style>
.newspaper {
column-count: 3;
column-gap: 40px;
column-rule-style: solid;
column-rule-width: 1px;
column-rule-color: lightblue;
}
</style>
</head>
<body>
<div class="newspaper">
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. 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. Nam liber tempor cum soluta nobis eleifend option congue nihil imperdiet doming id quod mazim placerat facer possim assum.
</div>
</body>
</html>
Properti column-rule adalah properti singkatan untuk menyetel semua properti aturan-kolomyang ada telah dijelaskan di atas.
Contoh berikut menetapkan lebar, gaya, dan warna aturan antar kolom:
Contoh :
<!DOCTYPE html>
<html>
<head>
<style>
.newspaper {
column-count: 3;
column-gap: 40px;
column-rule: 1px solid lightblue;
}
</style>
</head>
<body>
<div class="newspaper">
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. 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. Nam liber tempor cum soluta nobis eleifend option congue nihil imperdiet doming id quod mazim placerat facer possim assum.
</div>
</body>
</html>
Kolom Yang Menggunakan Elemen Span
Properti column-span berfungsi utuk menentukan berapa banyak kolom yang harus digunakan oleh sebuah elemen.
Contoh berikut menetapkan bahwa elemen <h2> harus mencakup di semua kolom:
Contoh :
<!DOCTYPE html>
<html>
<head>
<style>
.newspaper {
column-count: 3;
column-gap: 40px;
column-rule: 1px solid lightblue;
}
h2 {
column-span: all;
}
</style>
</head>
<body>
<div class="newspaper">
<h2>Lorem Ipsum Dolor Sit Amet</h2>
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. 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. Nam liber tempor cum soluta nobis eleifend option congue nihil imperdiet doming id quod mazim placerat facer possim assum.
</div>
</body>
</html>
Menentukan Lebar Kolom
Properti column-width berfungsi untuk menentukan lebar yang disarankan dan optimal untuk kolom.
Contoh berikut menetapkan bahwa lebar optimal untuk kolom 100px:
Contoh :
<!DOCTYPE html>
<html>
<head>
<style>
.newspaper {
column-count: 3;
column-width: 100px;
}
</style>
</head>
<body>
<div class="newspaper">
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. 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. Nam liber tempor cum soluta nobis eleifend option congue nihil imperdiet doming id quod mazim placerat facer possim assum.
</div>
</body>
</html>
Properti Multi-columns CSS
| Property | Deskripsi |
|---|---|
| column-count | Menentukan jumlah kolom elemen yang harus dibagi |
| column-fill | Menentukan cara mengisi kolom |
| column-gap | Menentukan jarak antar kolom |
| column-rule | Properti singkatan untuk menyetel semua properti rule-colums |
| column-rule-color | Menentukan aturan warna antar kolom |
| column-rule-style | Menentukan aturan gaya antar kolom |
| column-rule-width | Menentukan aturan lebar antar kolom |
| column-span | Menentukan berapa banyak kolom yang harus direntangkan oleh sebuah elemen |
| column-width | Menentukan lebar kolom yang disarankan dan optimal |
| columns | Properti singkatan untuk mengatur lebar kolom dan hitungan kolom |
