Three-column Layout

Tiga kolom sama lebar muncul di mana-mana: baris fitur pada landing page, galeri ringkasan produk, atau tiga panel statistik pada dashboard. Karena ketiga kolom berbagi ruang secara adil, repeat() dari grid membuat resepnya menjadi satu baris saja. Setelah resep dasarnya rapi, kita lanjut ke variasi klasiknya — holy grail — yang mengapit konten utama dengan dua aside.

Resep Tiga Kolom Sama Lebar #

repeat(3, 1fr) adalah singkatan untuk menulis 1fr 1fr 1fr — tiga track yang sama besar (lihat repeat-minmax ):

.tiga-kolom {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
  max-width: 900px;
  margin-inline: auto;
}

HTML-nya tiga kartu sebagai anak langsung:

<div class="tiga-kolom">
  <article class="kartu">
    <h3>Impor Data</h3>
    <p>Unggah berkas CSV dan petakan kolomnya ke tabel tujuan.</p>
  </article>
  <article class="kartu">
    <h3>Laporan Otomatis</h3>
    <p>Kirim ringkasan mingguan ke email seluruh anggota tim.</p>
  </article>
  <article class="kartu">
    <h3>Ekspor PDF</h3>
    <p>Simpan laporan apa pun menjadi dokumen siap cetak.</p>
  </article>
</div>

Hasil di Browser:

Pada viewport 1280x720, wadah 900px terbagi tiga dengan gap 24px:
computed grid-template-columns "284px 284px 284px". Ketiga kartu
masing-masing selebar 284px — perhitungannya (900 - 2 x 24) / 3.

Perhatikan bahwa gap dihitung dua kali karena ada dua celah antara tiga kolom. Ruang yang dibagikan ke track adalah 900 − 48 = 852px, sehingga tiap track mendapat 284px. Menulis repeat(3, 1fr) alih-alih 1fr 1fr 1fr bukan sekadar hemat baris: mengubah jumlah kolom menjadi empat atau lima cukup mengganti satu angka.

Satu bonus dari grid yang sering luput: ketiga kartu otomatis sama tinggi, karena baris grid membentang setinggi item tertingginya. Di era layout float, efek ini membutuhkan JavaScript atau trik tambahan. Bila justru tiap kartu harus setinggi isinya sendiri, tetapkan align-items: start pada wadah (lihat alignment-dan-gap ).

Variasi Holy Grail dengan Area Bernama #

Nama holy grail dipakai komunitas web untuk kerangka halaman dengan header di atas, footer di bawah, dan area tengah yang terdiri atas dua aside mengapit konten utama. Versi grid-nya memakai area bernama agar denah terbaca seperti gambar:

.halaman {
  display: grid;
  grid-template-columns: 220px 1fr 220px;
  grid-template-areas:
    "header header header"
    "kiri   utama  kanan"
    "footer footer footer";
  gap: 24px;
}
.halaman > .header { grid-area: header; }
.halaman > .kiri   { grid-area: kiri; }
.halaman > .utama  { grid-area: utama; }
.halaman > .kanan  { grid-area: kanan; }
.halaman > .footer { grid-area: footer; }

String denah diperlakukan seperti peta: header dan footer membentang tiga kolom, sementara utama duduk di tengah antara kiri dan kanan. Kolom tengah memakai 1fr agar menyerap sisa ruang, sedangkan dua aside dikunci 220px agar menu dan iklannya konsisten. Bila jumlah panel terus bertambah — misalnya delapan panel data yang bentangannya bervariasi — pola dua belas kolom pada chapter Grid Layout Patterns lebih lentur daripada tiga kolom tetap. Versi lengkap holy grail dengan tinggi viewport penuh dan area bergulir kita bahas pada chapter Dashboard Layout .

Dari Tiga Kolom ke Layout Responsif #

Ketika jumlah kartu tidak selalu tiga, media query mengubah jumlah kolom dalam dua tahap — dua kolom pada tablet, satu kolom pada ponsel:

@media (max-width: 1100px) {
  .tiga-kolom { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 640px) {
  .tiga-kolom { grid-template-columns: 1fr; }
}

Perhatikan urutannya: query yang lebih lebar ditulis lebih dulu, dan query berikutnya menimpa deklarasi sebelumnya pada layar yang lebih sempit. Tiga kartu pada grid dua kolom meninggalkan satu sel kosong di baris kedua — bila itu mengganggu, repeat(auto-fit, minmax(220px, 1fr)) membuat jumlah kolom menyesuaikan isi tanpa media query sama sekali; resep lengkapnya kita bahas pada chapter Card Grid .

Demo chapter ini memuat penanda uji otomatis yang memverifikasi serialisasi grid-template-columns “284px 284px 284px” dan lebar 284px pada ketiga kartu.