Skip to content
Kuliah Coding

CSS Layout

Apa Itu Layout dalam CSS?

Section titled “Apa Itu Layout dalam CSS?”

Layout dalam CSS adalah cara kamu mengatur letak elemen dalam halaman. Mulai dari menempatkan elemen berdampingan, berada di tengah halaman, atau mengatur posisi spesifik (seperti sticky header atau menu mengambang).

Berikut ini adalah beberapa properti css dasar yang biasanya digunakan untuk membuat layout sebuah halaman website.

1. display: Properti Dasar untuk Layout

Section titled “1. display: Properti Dasar untuk Layout”

Properti display sering digunakan untuk membuat tampilan website agar terlihat lebih baik. Properti display memiliki beberapa value yang dapat digunakan diantarnya:

NilaiFungsi
blockElemen tampil penuh satu baris (contoh: <div>, <p>)
inlineElemen tampil dalam satu baris (contoh: <span>, <a>)
inline-blockGabungan block & inline
noneElemen disembunyikan
flexMengaktifkan Flexbox layout
gridMengaktifkan Grid layout

Contoh:

div {
  display: flex;
}

2. position: Mengatur Posisi Spesifik Elemen

Section titled “2. position: Mengatur Posisi Spesifik Elemen”

Properti position digunakan untuk mengatur posisi lebih spesifik suatu elemen html. Value yang dapat diterapkan bisa dilihat pada tabel ini:

NilaiFungsi
staticPosisi default (mengikuti alur HTML)
relativePosisi relatif terhadap posisi semula
absolutePosisi absolut terhadap parent yang punya position: relative
fixedElemen tetap di layar saat scroll
stickyMenempel di posisi tertentu saat scroll

Contoh:

header {
  position: fixed;
  top: 0;
  width: 100%;
}

3. float: Elemen Melayang di Kiri atau Kanan

Section titled “3. float: Elemen Melayang di Kiri atau Kanan”

float dulu sering digunakan untuk membuat elemen sejajar (seperti kolom kiri dan kanan).

Contoh:

img {
  float: left;
  margin-right: 10px;
}

Sekarang float sudah jarang digunakan karena Flexbox dan Grid lebih fleksibel.

Contoh Layout Menggunakan display: flex

Section titled “Contoh Layout Menggunakan display: flex”

Berikut ini contoh code lengkap css layout yang menggunakan display: flex.

<!DOCTYPE html>
<html>
<head>
  <style>
    .container {
      display: flex;
      justify-content: space-between;
      background-color: #f0f0f0;
      padding: 20px;
    }


    .box {
      background-color: #2196f3;
      color: white;
      padding: 20px;
      width: 30%;
      text-align: center;
    }
  </style>
</head>
<body>


  <div class="container">
    <div class="box">Box 1</div>
    <div class="box">Box 2</div>
    <div class="box">Box 3</div>
  </div>


</body>
</html>

Hasilnya:

css-layout-display-flex

Tips Belajar CSS Layout

Section titled “Tips Belajar CSS Layout”
  • Mulailah dari display: flex untuk layout horizontal & vertikal
  • Gunakan position: sticky untuk navigasi yang menempel saat scroll
  • Pelajari grid jika ingin layout kompleks seperti majalah atau galeri
  • Gunakan developer tools (klik kanan > Inspect) untuk mengecek layout langsung di browser

Kesimpulan

Section titled “Kesimpulan”

Layout CSS membantu kamu:

  • Mengatur posisi elemen dengan rapi
  • Membuat desain responsif (tampilan di desktop & mobile tetap bagus)
  • Membuat elemen seperti navbar, sidebar, dan grid content