Grid Layout CSS: Kolom, Baris, fr, gap, dan Area

Grid dalam tiga baris

Atur display: grid pada container dan tulis kolom-kolomnya dengan grid-template-columns. Anak-anaknya mengisi sel secara berurutan, dari kiri ke kanan dalam bahasa Inggris, dan baris baru dimulai setiap kali kolomnya penuh:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>CSS grid</title>
  <style>
    body { font-family: system-ui, sans-serif; }
    .grid {
      display: grid;
      grid-template-columns: 1fr 1fr 1fr; /* three equal columns */
      gap: 12px;
    }
    .grid div { background: #2563eb; color: white; padding: 16px; border-radius: 6px; }
  </style>
</head>
<body>
  <div class="grid">
    <div>1</div><div>2</div><div>3</div>
    <div>4</div><div>5</div><div>6</div>
    <div>7</div>
  </div>
</body>
</html>

Tujuh item, tiga kolom: dua baris penuh dan baris ketiga dengan item 7 di kolom pertama. Setiap kolom sama lebarnya, dan setiap item dalam satu baris sama tingginya, jadi tepi-tepinya sejajar di kedua arah. Itulah yang ditambahkan grid dibanding flexbox.

Playground grid

Ketik nilai grid-template-columns apa saja, atau klik salah satu preset. Teks di bawahnya menunjukkan lebar kolom yang dihitung browser (dari getComputedStyle) dan berapa baris yang dibutuhkan item-item itu:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Grid playground</title>
  <style>
    body { font-family: system-ui, sans-serif; font-size: 14px; }
    .presets { display: flex; flex-wrap: wrap; gap: 6px; margin: 8px 0; }
    .presets button { font: 12px ui-monospace, monospace; padding: 4px 8px; border: 1px solid #111827; background: white; cursor: pointer; }
    #grid { display: grid; gap: 8px; padding: 8px; background: #e5e7eb; }
    #grid div { background: #16a34a; color: white; padding: 10px; text-align: center; }
    pre { white-space: pre-wrap; background: #f3f4f6; padding: 8px; }
  </style>
</head>
<body>
  <label>grid-template-columns: <input id="cols" size="36" value="repeat(3, 1fr)"></label>
  <div class="presets" id="presets"></div>
  <div id="grid"></div>
  <pre id="out"></pre>
  <script>
    const grid = document.getElementById('grid');
    const input = document.getElementById('cols');
    for (let i = 1; i <= 8; i++) grid.insertAdjacentHTML('beforeend', '<div>' + i + '</div>');
    const update = () => {
      grid.style.gridTemplateColumns = input.value;
      const cols = getComputedStyle(grid).gridTemplateColumns;
      const rows = getComputedStyle(grid).gridTemplateRows.split(' ').length;
      document.getElementById('out').textContent =
        'columns: ' + cols + '\n' + cols.split(' ').length + ' columns, ' + rows + ' rows';
    };
    ['repeat(3, 1fr)', '1fr 2fr', '200px 1fr', 'auto 1fr auto', 'repeat(4, 100px)', 'repeat(auto-fill, minmax(120px, 1fr))'].forEach((v) => {
      const b = document.createElement('button');
      b.textContent = v;
      b.addEventListener('click', () => { input.value = v; update(); });
      document.getElementById('presets').append(b);
    });
    input.addEventListener('input', update);
    update();
  </script>
</body>
</html>

Beberapa hal yang bisa dilihat: 1fr 2fr membuat kolom kedua tepat dua kali kolom pertama. 200px 1fr mempertahankan 200px dan memberikan sisanya ke kolom kedua. auto 1fr auto mengatur kolom luar seukuran kontennya. repeat(4, 100px) menyisakan ruang kosong di akhir karena tidak ada yang fleksibel. Nilai yang tidak valid, seperti 1fr 2, diabaikan, dan grid tetap memakai nilai valid terakhir.

Satuan fr

fr berarti "satu bagian dari ruang kosong". Browser lebih dulu mengurangi kolom yang ukurannya tetap (px, rem, %, konten auto) dan gap, lalu membagi sisanya ke kolom-kolom fr sesuai angkanya.

fr tidak sama dengan %: persentase ditambah gap bisa berjumlah lebih dari 100% dan meluber, sedangkan kolom fr selalu hanya membagi apa yang tersisa setelah gap.

repeat(), minmax(), dan grid responsif tanpa media query

repeat(4, 1fr) sama dengan 1fr 1fr 1fr 1fr. minmax(120px, 1fr) adalah kolom yang tidak pernah lebih sempit dari 120px dan membesar untuk mengambil bagiannya. Gabungkan keduanya dengan auto-fill atau auto-fit sebagai pengganti jumlah kolom, dan grid membuat kolom sebanyak yang muat:

.cards {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 16px;
}

Satu deklarasi itu menghasilkan kolom minimal 180px sebanyak yang muat di container: beberapa kolom di layar lebar, satu kolom di ponsel, tanpa media query. Perbedaan antara auto-fill dan auto-fit terlihat saat item-nya lebih sedikit dari jumlah kolom:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>auto-fill vs auto-fit</title>
  <style>
    body { font-family: system-ui, sans-serif; font-size: 13px; }
    .g { display: grid; width: 560px; background: #e5e7eb; margin: 4px 0 14px; }
    .fill { grid-template-columns: repeat(auto-fill, minmax(100px, 1fr)); }
    .fit { grid-template-columns: repeat(auto-fit, minmax(100px, 1fr)); }
    .g div { background: #2563eb; color: white; padding: 10px; outline: 1px solid white; }
  </style>
</head>
<body>
  <code>auto-fill</code>
  <div class="g fill"><div>A</div><div>B</div><div>C</div></div>
  <code>auto-fit</code>
  <div class="g fit"><div>A</div><div>B</div><div>C</div></div>
  <p id="out"></p>
  <script>
    document.getElementById('out').textContent = [...document.querySelectorAll('.g')].map((g) =>
      g.className.split(' ')[1] + ': ' + [...g.children].map((c) => Math.round(c.getBoundingClientRect().width) + 'px').join(', ')
    ).join(' | ');
  </script>
</body>
</html>

Container-nya muat lima kolom 100px. auto-fill mempertahankan kelimanya, jadi A, B, dan C masing-masing 112px dan tersisa dua kolom kosong. auto-fit menciutkan kolom yang kosong, jadi ketiga item meregang menjadi sekitar 187px masing-masing.

Menempatkan item: grid-column dan grid-row

Garis grid diberi nomor mulai dari 1 di tepi awal. grid-column: 1 / 3 berarti "dari garis 1 sampai garis 3", yaitu dua kolom. span 2 berarti "dua kolom dari mana pun posisimu", dan -1 adalah garis terakhir:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Spanning</title>
  <style>
    body { font-family: system-ui, sans-serif; font-size: 13px; }
    .grid { display: grid; grid-template-columns: repeat(4, 1fr); grid-auto-rows: 60px; gap: 8px; }
    .grid div { background: #16a34a; color: white; padding: 8px; }
    .grid .wide { grid-column: 1 / -1; background: #111827; }
    .grid .big { grid-column: span 2; grid-row: span 2; background: #2563eb; }
    .grid .tall { grid-row: span 2; background: #f59e0b; }
  </style>
</head>
<body>
  <div class="grid">
    <div class="wide">grid-column: 1 / -1</div>
    <div class="big">span 2 x 2</div>
    <div class="tall">grid-row: span 2</div>
    <div>a</div>
    <div>b</div>
  </div>
</body>
</html>

Item gelap mengisi seluruh baris pertama. Item biru menutupi blok 2 kali 2, item kuning tua dua baris. Item a dan b mengisi sel sisanya dengan sendirinya: grid menaruh setiap item yang bisa ditaruhnya ke sel kosong berikutnya. grid-auto-rows: 60px mengatur tinggi baris yang tidak kamu deklarasikan dengan grid-template-rows.

grid-template-areas: memberi nama bagian-bagian tata letak

Untuk tata letak halaman, beri nama area-areanya lalu gambar sebagai teks. Setiap string adalah satu baris, setiap kata satu sel, dan item bergabung ke sebuah area dengan grid-area:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Grid areas</title>
  <style>
    body { font-family: system-ui, sans-serif; margin: 0; }
    .page {
      display: grid;
      grid-template-columns: 160px 1fr;
      grid-template-rows: auto 1fr auto;
      grid-template-areas:
        "header header"
        "side   main"
        "footer footer";
      gap: 8px;
      min-height: 280px;
    }
    header { grid-area: header; background: #111827; color: white; }
    aside  { grid-area: side;   background: #e5e7eb; }
    main   { grid-area: main;   background: #bfdbfe; }
    footer { grid-area: footer; background: #111827; color: white; }
    .page > * { padding: 12px; }
  </style>
</head>
<body>
  <div class="page">
    <header>Header</header>
    <aside>Sidebar</aside>
    <main>Main content</main>
    <footer>Footer</footer>
  </div>
</body>
</html>

Header dan footer membentang di kedua kolom karena namanya mengisi kedua sel di barisnya. Baris tengah bernilai 1fr, jadi mengambil sisa tinggi dari 280px itu. Untuk menumpuk semuanya di ponsel, sebuah media query cukup menggambar ulang area-areanya sebagai satu kolom: grid-template-areas: "header" "side" "main" "footer" dengan grid-template-columns: 1fr. Halaman media query menunjukkan polanya.

Perataan di dalam sel

Item grid meregang mengisi selnya secara default. Properti-properti ini menggerakkannya di dalam sel:

display: grid; place-items: center; adalah cara terpendek untuk menengahkan satu anak di dalam kotak.

Grid atau flexbox

Grid bersifat dua dimensi: kamu menentukan kolom (dan baris), lalu konten mengisinya, jadi setiap kartu di galeri punya lebar yang sama bahkan di baris terakhir. Flexbox bersifat satu dimensi: item menentukan ukurannya sendiri dari konten di sepanjang satu garis. Keduanya bisa dipadukan dengan baik: grid untuk halaman dan galeri kartu, flexbox di dalam setiap kartu untuk baris header-nya. Halaman flexbox membahas separuh lainnya.

Urutan dan aksesibilitas

grid-template-areas, grid-row, grid-column, dan order bisa menaruh item di mana saja, tetapi pembaca layar dan tombol Tab tetap mengikuti urutan HTML. Jaga agar urutan sumbernya bermakna (header, navigasi, main, footer) dan pakai grid untuk menatanya, bukan untuk memperbaiki urutan HTML yang tidak masuk akal.

Kesalahan umum

• Menaruh display: grid di item. Properti ini ditaruh di induk; hanya anak langsung yang menjadi item grid.
• Memakai persentase bersama gap. grid-template-columns: 50% 50% ditambah gap: 16px meluber 16px. Pakai 1fr 1fr.
• auto-fill padahal yang kamu mau auto-fit. Dengan sedikit item, auto-fill menyisakan kolom kosong. Ganti ke auto-fit agar item-nya meregang.
• Kolom 1fr yang membesar melebihi bagiannya. Kolom 1fr tidak akan menyusut lebih kecil dari konten terpanjangnya (URL panjang, gambar lebar). Pakai minmax(0, 1fr) agar bisa menyusut.
• String area yang tidak berbentuk persegi panjang. Setiap area bernama harus membentuk persegi panjang, dan setiap string baris harus punya jumlah sel yang sama, kalau tidak seluruh deklarasi grid-template-areas diabaikan.
• Lupa bahwa nomor garis dimulai dari 1. Tiga kolom punya empat garis: 1 / 4 atau 1 / -1 membentang di ketiganya.