CARA MEMBUAT LAYOUT 5 KOLOM DENGAN CSS

Dalam pengembangan web, memahami cara mengatur layout situs web Anda adalah keterampilan yang sangat penting. Cara termudah untuk melakukan ini adalah dengan menggunakan CSS. Bagi kamu yang belum pernah membaca tutorial ini sebelumnya, kami menyarankan untuk mencoba membuat layout 5 kolom. Artikel ini akan menunjukkan cara membuat layout 5 kolom menggunakan CSS.

Menyiapkan HTML

Sebelum mulai dengan CSS, pertama-tama kita harus menyiapkan HTML. Berikut adalah struktur dasar HTML untuk layout 5 kolom.

<div class="container">
  <div class="kolom">Kolom 1</div>
  <div class="kolom">Kolom 2</div>
  <div class="kolom">Kolom 3</div>
  <div class="kolom">Kolom 4</div>
  <div class="kolom">Kolom 5</div>
</div>

Melakukan Penataan Dengan CSS

Setelah memiliki struktur HTML, kita dapat beralih ke bagian CSS. Berikut adalah kode dasar untuk membuat 5 kolom dengan CSS.

.container {
  display: flex;
}

.kolom {
  flex: 1;
  border: 1px solid #000;
  padding: 10px;
  margin: 5px;
}

Penjelasan Kode

Kode di atas menciptakan layout dengan 5 kolom yang memiliki lebar yang sama.

• display: flex digunakan pada container untuk menjadikan anak-anak div (dalam hal ini, .kolom) menjadi elemen flex.

• flex: 1 adalah properti pada .kolom yang memungkinkan setiap div memiliki lebar yang sama, tidak peduli berapa banyak isi di dalamnya.

• border: 1px solid #000, padding: 10px, dan margin: 5px digunakan untuk membuat tampilan layout lebih rapi.

Kamu dapat menyesuaikan kode di atas sesuai kebutuhan kamu. Misalnya, kamu dapat mengubah warna border, padding, dan margin.

Kini kamu telah belajar cara membuat layout 5 kolom dengan CSS. Selamat mencoba dan eksplorasi lebih lanjut!