Pola: Split Screen Layout

Halaman masuk, pendaftaran, dan banyak landing page modern membagi layar menjadi dua panel penuh: satu sisi menyampaikan pesan brand, sisi lainnya memuat form atau konten utama. Pola split screen memberi kesan aplikasi yang utuh — tidak ada halaman yang digulir di latar belakang, hanya dua panel yang masing-masing mengurus dirinya sendiri. Pada chapter ini kita susun polanya dengan grid, beri tiap panel gulir mandiri, dan jadikan bentuk paling umumnya: halaman autentikasi.

Dua Panel Sejajar #

Bentuk dasarnya satu grid dua kolom dengan tinggi viewport penuh:

.split {
  display: grid;
  grid-template-columns: 1fr 1fr;
  min-height: 100dvh;
}

1fr 1fr membagi ruang horizontal tepat berdua, sementara min-height: 100dvh — recap dari chapter hero — menjadikan pola ini setinggi viewport dinamis. Bila satu panel membutuhkan lantai lebar, misalnya panel form yang tidak boleh terlalu sempit, bentuknya diturunkan menjadi minmax(320px, 1fr) 1fr: kolom pertama tak pernah di bawah 320 piksel, sisa ruang tetap terbagi seimbang. Pengisian konten di dalam panel biasanya diserahkan kepada flex column dengan justify-content: center agar terpusat vertikal.

Panel dengan Gulir Sendiri #

Inti dari kesan aplikasi penuh: konten yang melebihi tinggi layar menggulir di dalam panelnya, bukan di seluruh halaman:

.panel-form {
  height: 100dvh;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  padding: 48px 24px;
}

.isi-form {
  margin: auto;
  width: 100%;
  max-width: 360px;
}

Property overflow-y: auto sudah kita bahas di chapter Overflow dan Scrolling; di sini dia bekerja pada satu panel, bukan seluruh halaman. Perhatikan detail penengahannya: konten form ditengahkan lewat margin: auto pada pembungkusnya, bukan lewat justify-content: center pada panel. Penyebabnya penting — bila konten lebih tinggi dari panel, konten yang ditengahkan dengan justify-content bagian atasnya terpotong dan tidak dapat dijangkau dengan menggulir; margin auto menengahkan konten hanya ketika ada ruang sisa, dan mundur dengan wajar ketika ruang habis.

Pola Halaman Autentikasi #

Bentuk split screen yang paling sering dipakai adalah halaman masuk: panel kiri berbicara untuk brand, panel kanan melayani form:

<main class="split">
  <section class="panel-brand">
    <h1>Kedai Senja</h1>
    <p>Kelola pesanan dan stok kopi dari satu dasbor.</p>
  </section>
  <section class="panel-form">
    <form class="isi-form">
      <h2>Masuk</h2>
      <div class="kolom-form">
        <label for="email">Email</label>
        <input id="email" type="email" name="email">
      </div>
      <div class="kolom-form">
        <label for="sandi">Kata sandi</label>
        <input id="sandi" type="password" name="sandi">
      </div>
      <button type="submit">Masuk</button>
    </form>
  </section>
</main>

Panel brand memakai latar gradient dan konten terpusat — perangkat yang sama dengan hero:

.panel-brand {
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 48px;
  background: linear-gradient(160deg, #14503a, #0d3d2e);
  color: #ffffff;
}

.panel-brand h1 {
  margin: 0 0 8px;
  font-size: 2rem;
}

Menumpuk di Layar Sempit #

Di ponsel, kedua panel bertukar menjadi tumpukan vertikal:

@media (max-width: 700px) {
  .split {
    grid-template-columns: 1fr;
  }

  .panel-brand {
    min-height: 180px;
  }

  .panel-form {
    height: auto;
    min-height: 100dvh;
  }
}

Tiga penyesuaian bekerja bersama: kolom tunggal menumpukkan panel, min-height: 180px mencegah banner brand memakan layar, dan height: auto pada panel form melepaskan ketinggian kaku agar halaman kembali menggulir secara normal ketika formnya panjang. Prioritasnya jelas — pengguna ponsel harus sampai ke form secepat mungkin. Demo berikut merakit pola lengkap, termasuk gulir mandiri pada panel form. Perkecil lebar bingkai sampai di bawah 480 piksel untuk melihat panelnya menumpuk:

Kesalahan Umum #

Ringkasan #

Split screen membagi viewport berdua dengan grid 1fr 1fr dan min-height: 100dvh, lalu memberi tiap panel overflow-y: auto agar kontennya menggulir mandiri. Penengahan via margin auto menjaga form tetap aman saat meluber, dan penumpukan mobile menempatkan form sebagai prioritas. Pola berikutnya memindahkan fokus ke elemen yang selalu terlihat di bagian atas halaman: navigasi yang menempel.