CARA MEMBUAT LAYOUT 4 KOLOM DENGAN CSS

Bagi seorang pengembang web, memiliki pemahaman yang kuat tentang Cascading Style Sheets (CSS) adalah keharusan. Salah satu aspek paling fundamental yang dapat kamu pelajari adalah bagaimana cara membuat layout 4 kolom menggunakan CSS. Dalam tutorial ini, kamu akan dipandu melalui langkah-langkah mudah untuk menciptakan layout 4 kolom yang rapi.

Menyiapkan HTML Anda

Sebelum memulai dengan CSS, kamu perlu membangun struktur dasar dengan HTML. Membuat empat div berdampingan dalam container induk. Misalnya, HTML kamu mungkin terlihat seperti ini:

<div class="container">
  <div class="kolom"></div>
  <div class="kolom"></div>
  <div class="kolom"></div>
  <div class="kolom"></div>
</div>

Setiap div dengan kelas .kolom akan mewakili salah satu kolom dalam layout 4 kolom.

Menulis CSS

Setelah HTML siap, saatnya menulis CSS. Pertama, berikan lebar tetap ke setiap kolom menggunakan properti lebar.

.kolom {
  lebar: 25%;
}

Ini akan membuat setiap kolom mengambil seperempat dari kontainer induk.

Mengatur Floating

Salah satu cara membuat div berdampingan adalah dengan menggunakan properti perapian CSS. Dengan menerapkan float: left; ke setiap div, kita dapat membuat mereka berada di sebelah kiri yang lain.

.kolom {
  lebar: 25%;
  float: left;
}

Mengatur Padding

Untuk memberikan ruang antara setiap kolom, kamu dapat menggunakan properti padding. Misalnya, untuk menambahkan padding 10px ke setiap sisi dari setiap kolom, kamu akan menulis:

.kolom {
  lebar: 25%;
  float: left;
  padding: 10px;
}

Peekaran ini akan memberikan ruang 10px di antara setiap kolom dalam layout.

Mengatur Responsifitas

Untuk membuat layout kamu responsif dan terlihat baik di semua ukuran layar, kamu perlu menggunakan media queries. Misalnya,

@media screen and (max-width: 600px) {
  .kolom {
    lebar: 100%;
  }
}

Ini berarti jika lebar layar kurang dari 600px, setiap kolom akan mengambil lebar penuh dari kontainer induk, secara efektif menumpuk mereka satu sama lain.

Dengan langkah-langkah ini, kamu akan dapat membuat layout 4 kolom dengan CSS. Semoga bermanfaat dan selamat mencoba!