Pola: Footer Layout

Footer menutup setiap halaman dengan tiga pekerjaan: mengembalikan pengunjung ke bagian penting situs, menampilkan informasi kontak dan legal, dan menutup halaman secara visual. Tantangan teknisnya ada dua — menyusun banyak kelompok tautan yang tetap rapi di semua ukuran layar, dan masalah klasik halaman pendek: footer yang naik ke tengah layar karena kontennya tidak cukup panjang. Pada chapter ini kita selesaikan keduanya.

Footer Multi-Kolom dengan auto-fit #

Kelompok konten footer disusun grid dengan kolom otomatis:

.footer-utama {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 32px;
  padding-block: 48px;
}

Pola ini identik dengan card grid pada chapter sebelumnya — auto-fit plus minmax memang bawaan yang tepat untuk deretan apa pun yang jumlahnya berubah. Bedanya pada skala: kolom footer memuat kelompok tautan, bukan kartu, sehingga lebar minimumnya lebih kecil (180px cukup untuk kolom tautan). Struktur isi footer biasanya terdiri dari satu blok brand yang lebih lebar plus beberapa daftar tautan:

<footer class="footer-situs">
  <div class="footer-utama">
    <div>
      <p class="footer-brand">Kedai Senja</p>
      <p>Kopi langsung dari petani, disangrai setiap pagi.</p>
    </div>
    <nav aria-label="Tautan footer">
      <p class="footer-judul">Jelajah</p>
      <ul>
        <li><a href="#">Menu</a></li>
        <li><a href="#">Cerita Kami</a></li>
        <li><a href="#">Lokasi</a></li>
      </ul>
    </nav>
    <div>
      <p class="footer-judul">Kontak</p>
      <ul>
        <li>[email protected]</li>
        <li>+62 21 555 0123</li>
      </ul>
    </div>
  </div>
</footer>

auto-fit menghasilkan kolom yang sama lebar — cukup untuk mayoritas footer. Bila blok brand harus lebih dominan, kolomnya bisa didefinisikan eksplisit pada ukuran layar tertentu:

@media (min-width: 700px) {
  .footer-utama {
    grid-template-columns: 2fr 1fr 1fr;
  }
}

Perhatikan bahwa definisi eksplisit ini menimpa auto-fit hanya pada rentang layar yang dituju — dua aturan tidak bertabrakan karena media query memisahkannya. Nilai 2fr dan 1fr adalah unit fraksi yang sudah kita kuasai di section CSS Grid: ruang dibagi proporsional, bukan angka pasti. Demo berikut memperlihatkan pembagian kolom eksplisitnya:

Baris Bawah #

Di bawah kelompok kolom, baris bawah memuat hal kecil yang penting: hak cipta dan tautan legal:

.footer-bawah {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 8px 16px;
  padding-block: 20px;
  border-top: 1px solid rgba(255, 255, 255, 0.2);
  font-size: 0.875rem;
}

Kombinasi flexbox yang dipakai sudah kita kenal semua: justify-content: space-between mendorong dua kelompok ke ujung berlawanan, flex-wrap menjaga teks panjang tetap aman di layar sempit, dan gap memberi jarak ketika mereka melipat ke baris baru.

Footer Menempel di Dasar Halaman #

Sekarang masalah klasiknya. Halaman dengan konten satu paragraf membuat footer naik ke tengah layar — halaman terlihat tidak selesai. Solusinya: jadikan halaman satu kolom flex setinggi viewport, lalu beri footer margin-top: auto:

.halaman {
  min-height: 100dvh;
  display: flex;
  flex-direction: column;
}

.footer-situs {
  margin-top: auto;
}

Mekanismenya adalah pola auto margin yang sama yang mendorong tombol ke dasar kartu: konten halaman hanya setinggi isinya, sisa tinggi viewport menjadi ruang kosong, dan margin-top: auto menyerap seluruh ruang kosong itu sehingga footer terdorong ke dasar. Alternatif yang sama lazimnya adalah memberi flex: 1 pada elemen konten utama agar dia sendiri yang meregang; pilih salah satu dan konsisten. Karena min-height dipakai — bukan height — halaman yang lebih tinggi dari viewport tetap menggulir dengan wajar. Demo berikut memperlihatkan halaman yang sengaja pendek — footer tetap berdiri di dasar:

Kesalahan Umum #

Ringkasan #

Footer modern terdiri dari dua tingkat: grid auto-fit untuk kelompok konten dan baris flex space-between untuk informasi legal. Kuncinya pada halaman pendek — kolom flex setinggi viewport dengan margin-top: auto pada footer membuat footer selalu berdiri di dasar tanpa trik tambahan. Kita kini punya pola untuk setiap bagian halaman; chapter penutup section ini merangkai semuanya menjadi satu halaman utuh.