CARA MEMBUAT LAYOUT 6 KOLOM DENGAN CSS

Membuat layout yang rapi dan responsif adalah bagian penting dari desain web. Salah satu cara yang bisa kamu lakukan adalah dengan membuat layout 6 kolom menggunakan CSS. Berikut adalah cara membuatnya.

Langkah 1: Membuat HTML Dasar

Untuk mulai membuat layout, kamu perlu memiliki struktur HTML yang dasar terlebih dahulu.

<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 class="kolom">Kolom 6</div>
</div>

Langkah 2: Membuat CSS untuk Container

Selanjutnya, buatlah CSS untuk container. Container ini akan bertindak sebagai “wadah” untuk keenam kolom tersebut.

.container {
  display: flex;
  flex-wrap: wrap;
}

Langkah 3: Membuat CSS untuk Kolom

Kemudian, kamu perlu mendefinisikan CSS untuk masing-masing kolom. Dalam kasus ini, setiap kolom harus mempunyai lebar 16.66% dari total lebar container.

.kolom {
  flex: 0 0 16.6667%;
  max-width: 16.6667%;
}

Memberi Padding pada Kolom

Untuk membuat tampilan yang lebih rapi, tambahkanlah padding pada masing-masing kolom.

.kolom {
  flex: 0 0 16.6667%;
  max-width: 16.6667%;
  padding: 0.75rem;
}

Langkah 4: Menerapkan Responsive Design

Agar layout kamu dapat diakses dengan baik di berbagai ukuran layar, kamu perlu menerapkan prinsip responsive design pada CSS.

Aturan Media Query

Media query memungkinkan kamu untuk menerapkan CSS berbeda berdasarkan ukuran viewport.

@media (max-width: 768px) {
  .kolom {
    flex: 0 0 100%;
    max-width: 100%;
  }
}

Dengan mengikuti langkah-langkah di atas, kamu sudah bisa membuat layout 6 kolom dengan CSS. Tentu saja, kamu dapat mengubah dan menyesuaikan CSS sesuai kebutuhan desain situs web kamu. Selamat mencoba!