Display, Visibility, dan Layout Dasar

Display

Property display menentukan bagaimana sebuah elemen dirender dan bagaimana elemen tersebut berperilaku dalam layout.

Jenis umum:

• block: elemen mengambil satu baris penuh, dimulai dari baris baru (contoh: <div>, <p>, <h1>).
• inline: elemen hanya selebar kontennya dan tidak memulai baris baru (contoh: <span>, <a>).
• inline-block: seperti inline, tetapi bisa diatur lebar dan tingginya.
• none: elemen tidak ditampilkan dan tidak mengambil ruang.

Contoh:

nav {
  display: flex;
  gap: 40px;
}

Di proyek portfolio, flex digunakan untuk layout, tetapi secara konsep, elemen block dan inline tetap penting dipahami.

Visibility

Property visibility mengatur apakah elemen terlihat, dengan tetap mempertahankan ruangnya.

• visible: elemen terlihat.
• hidden: elemen tidak terlihat, tetapi ruangnya tetap ada.

Perbedaan dengan display: none:

• display: none: elemen seolah tidak ada, ruangnya hilang.
• visibility: hidden: elemen tidak terlihat, tetapi layout masih terpengaruh.

Layout dengan Flexbox

Flexbox digunakan untuk membuat layout satu dimensi (horizontal atau vertikal) yang fleksibel.

Contoh pada header:

header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 30px 60px;
}

Penjelasan:

• display: flex; mengaktifkan flex container.
• justify-content: space-between; menyebar elemen secara horizontal.
• align-items: center; meratakan elemen secara vertikal.

Contoh pada container profil:

.profile-container {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 50px;
  padding: 0 60px;
}

Layout dengan Grid

CSS Grid digunakan untuk layout dua dimensi (baris dan kolom). Di proyek portfolio, Grid digunakan untuk daftar projek.

.project-list {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 20px;
  margin-top: 40px;
  margin-bottom: 40px;
}

Penjelasan:

• display: grid; mengaktifkan grid container.
• grid-template-columns: repeat(4, 1fr); membuat 4 kolom dengan lebar sama.
• gap: 20px; memberi jarak antar card.

Dengan kombinasi flexbox dan grid, layout halaman bisa diatur dengan rapi dan responsif.