Fungsi kolom adalah membagi teks menjadi beberapa kolom dan kita dapat menentukan lebar perkolomnya. Seperti yang kita sering kita lihat di berbagai majalah atau koran, ada beberapa artikel yang sering sekali dibagi bagi kolomnya, nah begitupun di dalam sebuah website, kita bisa menggunakan fungsi columns ini pada website kita. ayo kita praktekan bagaimana cara Menggunakan Fungsi Colomn pada CSS,
jadi kasusnya kita akan membagi beberapa paragraf menjadi beberapa kolom. Paragraf pertama kita akan bagi menjadi 12 kolom, paragraf kedua menjadi 10 kolom, paragraf ketiga 5 kolom dan paragraf ke empat 2 kolom.
Pertama buka text editor kalian dan ketikan kode HTML berikut dan beri nama dengan nama file index.html.
index.html
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title> Fungsi Colomn pada CSS </title> </head> <link rel="stylesheet" href="style.css"> <body> <div class="colomn"> <h2>Membagi Kolom menjadi 12</h2> <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Officiis, eveniet. Aliquid dolorum, voluptates facere consequuntur odit optio neque, ipsa? Facere delectus earum, necessitatibus magni consequuntur consectetur perferendis eaque, sed veniam.Lorem ipsum dolor sit amet, consectetur adipisicing elit. Incidunt, libero, amet. Consectetur asperiores repellendus, quas debitis illum dolorum, ipsum soluta laudantium consequuntur nemo doloremque est? Aut rerum dolore impedit numquam. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Magnam aperiam error accusantium repellat voluptate quaerat tempora quae explicabo tempore, incidunt vitae natus ipsa, eaque quis optio ipsum quidem dolores at! </p> </div> <div class="colomn1"> <h2>Membagi Kolom menjadi 10</h2> <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Officiis, eveniet. Aliquid dolorum, voluptates facere consequuntur odit optio neque, ipsa? Facere delectus earum, necessitatibus magni consequuntur consectetur perferendis eaque, sed veniam.Lorem ipsum dolor sit amet, consectetur adipisicing elit. Incidunt, libero, amet. Consectetur asperiores repellendus, quas debitis illum dolorum, ipsum soluta laudantium consequuntur nemo doloremque est? Aut rerum dolore impedit numquam. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Magnam aperiam error accusantium repellat voluptate quaerat tempora quae explicabo tempore, incidunt vitae natus ipsa, eaque quis optio ipsum quidem dolores at! Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nisi ut consequuntur nam quibusdam eos laudantium rerum facilis deleniti consectetur vero unde, mollitia quisquam accusamus pariatur atque molestias suscipit tempora, vitae. </p> </div> <div class="colomn2"> <h2>Membagi Kolom menjadi 5</h2> <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Officiis, eveniet. Aliquid dolorum, voluptates facere consequuntur odit optio neque, ipsa? Facere delectus earum, necessitatibus magni consequuntur consectetur perferendis eaque, sed veniam.Lorem ipsum dolor sit amet, consectetur adipisicing elit. Incidunt, libero, amet. Consectetur asperiores repellendus, quas debitis illum dolorum, ipsum soluta laudantium consequuntur nemo doloremque est? Aut rerum dolore impedit numquam. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Magnam aperiam error accusantium repellat voluptate quaerat tempora quae explicabo tempore, incidunt vitae natus ipsa, eaque quis optio ipsum quidem dolores at! Lorem ipsum dolor sit amet, consectetur adipisicing elit. Architecto reprehenderit porro, sint dolore, rem quisquam ea incidunt ut nihil tenetur soluta magnam accusantium aliquam tempore laudantium illum totam. Quibusdam, amet. </p> </div> <div class="colomn3"> <h2>Membagi Kolom menjadi 2</h2> <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Officiis, eveniet. Aliquid dolorum, voluptates facere consequuntur odit optio neque, ipsa? Facere delectus earum, necessitatibus magni consequuntur consectetur perferendis eaque, sed veniam.Lorem ipsum dolor sit amet, consectetur adipisicing elit. Incidunt, libero, amet. Consectetur asperiores repellendus, quas debitis illum dolorum, ipsum soluta laudantium consequuntur nemo doloremque est? Aut rerum dolore impedit numquam. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Magnam aperiam error accusantium repellat voluptate quaerat tempora quae explicabo tempore, incidunt vitae natus ipsa, eaque quis optio ipsum quidem dolores at! </p> </div> </body> </html>
buat file css nya dan beri nama dengan nama style.css
style.css
body{
font-family: arial;
}
.colomn p{
columns: 100px 12;
width: 100%;
margin: auto;
}
.colomn1 p{
columns: 100px 10;
width: 100%;
margin: auto;
}
.colomn2 p{
columns: 100px 5;
width: 100%;
margin: auto;
}
.colomn3 p{
columns: 100px 2;
width: 100%;
margin: auto;
}
h2{
text-align: center;
}
berikut hasilnya.
sekian tutorial Cara Menggunakan Fungsi Colomn pada CSS semoga bermanfaat yah.. 
The post Cara Menggunakan Fungsi Columns pada CSS appeared first on Kursus Website Terbaik.