Articles
Pengenalan ke CSS
Properti CSS Terkait Tata Letak Kolom

Properti CSS Terkait Tata Letak Kolom

Artikel ini menjelaskan properti CSS yang terkait dengan tata letak kolom.

Anda dapat mempelajari cara mendeskripsikan tata letak kolom.

YouTube Video

HTML untuk Pratinjau

css-columns.html 
 1<!DOCTYPE html>
 2<html lang="en">
 3<head>
 4    <meta charset="UTF-8">
 5    <meta name="viewport" content="width=device-width, initial-scale=1.0">
 6    <title>CSS Properties Example</title>
 7    <link rel="stylesheet" href="css-base.css">
 8    <link rel="stylesheet" href="css-columns.css">
 9</head>
10<body>
11    <!-- Header -->
12    <header>
13        <h1>CSS Properties For Columns</h1>
14    </header>
15
16    <!-- Main content -->
17    <main>
18        <header>
19            <h2>Layout Related Properties</h2>
20        </header>
21        <article>
22            <h3>columns</h3>
23            <section style="width: 100%; height: 350px;">
24                <h4>Columns Example</h4>
25                <header><h4>columns: 100px 3; column-gap: 20px; column-rule: 2px solid #333;</h4></header>
26                <section class="sample-view">
27                    <section class="columns-container">
28                        <h5>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla id odio sit amet eros feugiat semper.</h5>
29                        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla id odio sit amet eros feugiat semper.</p>
30                        <p>Donec vehicula est non sapien sollicitudin, id tincidunt velit volutpat.</p>
31                        <p>Pellentesque malesuada diam eu sem finibus scelerisque.</p>
32                        <p>Integer eget dolor nec est dignissim fermentum ut eget nunc.</p>
33                        <p>Morbi in nibh in lorem vestibulum sollicitudin.</p>
34                    </section>
35                </section>
36            </section>
37        </article>
38        <article>
39            <h3>order</h3>
40            <section style="height: 300px;">
41                <header><h4>column-width: 250px</h4></header>
42                <section class="sample-view">
43                    <div class="container">
44                        <div class="item item-1">Item 1</div>
45                        <div class="item item-2">Item 2</div>
46                        <div class="item item-3">Item 3</div>
47                    </div>
48                </section>
49            </section>
50        </article>
51    </main>
52</body>
53</html>

Tata Letak Kolom

kolom 

1.columns-container {
2    columns: 100px 3;
3    column-gap: 20px;
4    column-rule: 2px solid #333;
5}
6
7h5 {
8  column-span: all;
9}

Properti CSS columns menyediakan cara yang mudah untuk menampilkan konten yang dibagi ke dalam beberapa kolom. Dengan satu deklarasi, Anda dapat dengan mudah mengatur lebar kolom dan jumlah kolom, membuatnya cocok untuk desain responsif. Ini sangat efektif ketika tata letak diperlukan di mana teks ditampilkan panjang secara vertikal dan diatur dalam beberapa kolom, seperti pada surat kabar atau majalah.

  • Dalam contoh ini, konten dibagi ke dalam 3 kolom dengan jarak 20px dan garis 2px di antara kolom. Selain itu, elemen h5 meliputi beberapa kolom.

columns adalah singkatan dari properti column-width dan column-count.

Sintaks Properti columns 

1columns: <column-width> <column-count>;

columns mengikuti format ini.

  • <column-width>: Menentukan lebar setiap kolom. Anda dapat menggunakan auto atau satuan panjang apa pun (misalnya, px, em, `%, dll.) sebagai nilai.
  • <column-count>: Menentukan jumlah kolom. Dinyatakan sebagai nilai numerik.
Properti column-width 
1.container {
2  column-width: 250px;
3}

column-width adalah properti yang menentukan lebar minimum setiap kolom. Ketika digunakan dengan column-count, penempatan dan penyesuaian kolom secara otomatis menjadi mungkin. Browser mempertimbangkan lebar kontainer dan secara otomatis menghitung jumlah kolom yang diperlukan.

  • Dalam contoh ini, lebar per kolom adalah 250px, dan jumlah kolom yang optimal dihitung berdasarkan lebar kontainer.
column-count adalah properti yang secara eksplisit menentukan berapa banyak kolom elemen tertentu dibagi 
1.container {
2  column-count: 3;
3}

column-count adalah properti yang secara eksplisit menentukan berapa banyak kolom sebuah elemen akan dibagi. Berbeda dengan column-width, ini menetapkan jumlah kolom secara pasti.

  • Dalam contoh ini, konten dalam container dibagi menjadi tiga kolom.
column-gap adalah properti yang menentukan jarak (gap) antara setiap kolom 
1.container {
2  column-gap: 20px;
3}

column-gap adalah sifat yang menentukan jarak (gap) antar kolom. column-gap penting memberi ketamanan agar Anda focus aanatan.

  • Dalam contoh ini, terdapat margin sebesar 20px di antara setiap kolom. Nilai bawaan (default) adalah 16px.
Properti column-rule 
1.container {
2  column-rule: 2px solid #333;
3}

column-rule adalah properti untuk menggambar garis di antara kolom. Syntax-nya mirip dengan properti border dan memungkinkan Anda menentukan lebar, gaya, dan warna garis.

  • Dalam contoh ini, garis hitam solid dengan lebar 2px ditampilkan di antara kolom. column-rule dapat dirinci menjadi tiga properti berikut.
    • column-rule-width: Menentukan lebar garis.
    • column-rule-style: Menentukan gaya garis. Sebagai contoh, ada solid, dashed, dotted, dll.
    • column-rule-color: Menentukan warna garis.
Properti column-span 
1h5 {
2  column-span: all;
3}

column-span adalah properti yang mengatur elemen tertentu untuk meluas ke beberapa kolom. Ini terutama digunakan untuk elemen seperti heading atau judul. Ada dua nilai yang mungkin:. - none: Elemen tidak meluas ke kolom lain dan hanya muat dalam satu kolom. Ini adalah nilai default. - all: Elemen ditampilkan meluas ke semua kolom.

  • Dalam contoh ini, elemen h5 ditampilkan meluas ke beberapa kolom.
Properti column-fill 
1.container {
2  column-fill: balance;
3}

column-fill adalah properti yang mengontrol bagaimana konten didistribusikan di antara kolom. Secara normal, kolom diisi secara merata, namun properti ini memungkinkan Anda menentukan pengaturan yang berbeda. Nilai-nilai berikut tersedia:. - balance: Konten diatur untuk mengisi kolom secara merata. Ini adalah nilai default. - auto: Kolom akan terisi secara otomatis. Kolom terakhir mungkin menjadi lebih panjang.

  • Pengaturan ini menyesuaikan agar konten terdistribusi secara merata.
Menggunakan dengan Media Query 
1.container {
2  columns: 200px 3;
3}
4
5@media (max-width: 600px) {
6  .container {
7    columns: 1;
8  }
9}

Properti columns dapat dikombinasikan dengan media query untuk mendukung desain responsif. Anda dapat dengan fleksibel mengubah jumlah kolom dan lebar kolom tergantung pada ukuran layar yang berbeda.

  • Dalam contoh ini, ketika lebar layar 600px atau kurang, akan ada 1 kolom. Untuk layar yang lebih lebar, akan dibagi menjadi 3 kolom dengan lebar masing-masing 200px.

Ringkasan

Properti columns CSS adalah alat yang kuat untuk dengan mudah menerapkan tata letak menggunakan beberapa kolom. Properti ini sangat berguna untuk desain responsif dan tata letak teks yang mengutamakan keterbacaan. Dengan menggabungkan properti terkait, Anda dapat dengan fleksibel menyesuaikan jumlah dan lebar kolom, jarak antar kolom, dekorasi, dll.

Ini memungkinkan penerapan desain yang lebih canggih dengan mudah, jadi manfaatkanlah ini.

urutan 

 1.container {
 2    all:initial;
 3    display: flex;
 4}
 5.item {
 6    padding: 10px;
 7    background-color: lightblue;
 8    margin: 5px;
 9}
10.item-1 {
11    order: 3;
12}
13.item-2 {
14    order: 1;
15}
16.item-3 {
17    order: 2;
18}

Properti order CSS digunakan untuk mengontrol urutan tampilan elemen saat menggunakan tata letak Flexbox atau Grid. Biasanya, elemen dirender sesuai dengan markup HTML, tetapi Anda dapat mengubah urutan visualnya dengan menggunakan properti order. Properti ini membantu dalam merancang antarmuka pengguna yang fleksibel dan membangun desain yang responsif.

  • Dalam contoh ini, item diberi markup dalam HTML sebagai Item 1, Item 2, Item 3, tetapi urutan tampilan berubah menjadi Item 2, Item 3, Item 1 karena properti order CSS.

Dasar dari Properti order

Properti order diterapkan pada item di dalam container Flexbox atau Grid. Anda menentukan urutan penempatan dengan menetapkan nilai integer untuk setiap item. Secara default, order semua item disetel ke 0. Dengan mengubah nilai ini, Anda dapat menentukan urutan item ditampilkan.

Sintaks Dasar 
1.item {
2  order: <integer>;
3}
  • Anda dapat menentukan nilai integer apa pun untuk order. Nilai positif, negatif, atau nol dapat digunakan. Semakin kecil nilainya, semakin awal elemen ditampilkan, dan semakin besar nilainya, semakin akhir elemen ditampilkan.

Menggunakan Nilai Positif dan Negatif

Anda juga dapat menetapkan nilai negatif ke properti order. Elemen dengan nilai negatif ditampilkan sebelum urutan default.

1.item-1 {
2    order: -1;
3}
4.item-2 {
5    order: 2;
6}
7.item-3 {
8    order: 1;
9}

Dalam contoh ini, Item 1 diatur menjadi order: -1, sehingga muncul pertama. Sebaliknya, Item 3 diatur menjadi order: 1, dan Item 2 diatur menjadi order: 2, sehingga mereka muncul dalam urutan tersebut.

order dalam Desain Responsif

Dalam desain responsif, memungkinkan untuk mengubah urutan elemen sesuai dengan ukuran layar. Sebagai contoh, dalam tampilan seluler, Anda dapat mengubah urutan elemen untuk menampilkan informasi penting terlebih dahulu.

 1.item-1 {
 2    order: 1;
 3}
 4.item-2 {
 5    order: 2;
 6}
 7.item-3 {
 8    order: 3;
 9}
10
11/* Change the order on screens with a width of 800px or less */
12@media (max-width: 800px) {
13    .item-1 {
14        order: 3;
15    }
16    .item-2 {
17        order: 1;
18    }
19    .item-3 {
20        order: 2;
21    }
22}

Dalam contoh ini, dalam tampilan normal, item ditampilkan dalam urutan Item 1, Item 2, Item 3, tetapi ketika lebar layar di bawah 600px, Item 2 muncul pertama, Item 3 berikutnya, dan Item 1 terakhir.

Pertimbangan untuk order

Menggunakan properti order dapat menghasilkan urutan visual yang berbeda dari urutan dalam pohon DOM. Hal ini dapat memengaruhi alat aksesibilitas, seperti pembaca layar. Ketika urutan berubah, navigasi keyboard dan teknologi bantu lainnya mungkin tidak berfungsi seperti yang diharapkan. Oleh karena itu, perlu dipertimbangkan dengan cermat dampaknya pada pengalaman pengguna saat menggunakan order.

Kesimpulan

Properti order CSS adalah alat yang kuat yang memungkinkan Anda dengan mudah mengontrol urutan tampilan elemen dalam tata letak Flexbox atau Grid. Dengan menggunakan nilai positif atau negatif, Anda dapat fleksibel mengubah urutan elemen, yang sangat berguna dalam desain responsif. Namun, perhatian harus diberikan pada aksesibilitas dan perbedaan antara urutan visual dan struktur HTML. Jika hal-hal ini dipertimbangkan dengan benar, properti order dapat berguna untuk menciptakan tata letak yang lebih dinamis dan fleksibel.

Anda dapat mengikuti artikel di atas menggunakan Visual Studio Code di saluran YouTube kami. Silakan periksa juga saluran YouTube kami.

YouTube Video

Properti CSS yang terkait dengan tata letak grid