CSS Grid 2: Area, Span, & Grid Responsif

Menempatkan item dengan garis

Setiap item bisa menentukan dari garis mana ke garis mana ia membentang:

.lebar {
  grid-column: 1 / 3;     /* dari garis 1 sampai garis 3 (menjangkau 2 kolom) */
  grid-row: 1 / 2;
}
.penuh { grid-column: 1 / -1; }   /* -1 = garis terakhir: sepanjang baris */

span: "bentang sebanyak…"

.unggulan { grid-column: span 2; }   /* menjangkau 2 kolom dari posisinya */
.tinggi   { grid-row: span 2; }      /* menjangkau 2 baris */

grid-template-areas: layout dengan nama

Cara paling mudah dibaca untuk kerangka halaman: gambar tata letak dalam teks, lalu beri nama area ke tiap elemen.

.halaman {
  display: grid;
  grid-template-columns: 220px 1fr;
  grid-template-areas:
    "kepala kepala"
    "samping isi"
    "kaki   kaki";
  gap: 12px;
}
header { grid-area: kepala; }
aside  { grid-area: samping; }
main   { grid-area: isi; }
footer { grid-area: kaki; }

Dengan satu perubahan di media query (misalnya menjadi satu kolom), tata letak seluruh halaman berubah. Setiap baris string harus punya jumlah kolom yang sama, dan area harus berbentuk persegi panjang.

Grid responsif tanpa media query

Kombinasi repeat(auto-fit, minmax()) membuat jumlah kolom menyesuaikan lebar layar secara otomatis:

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

• minmax(180px, 1fr): tiap kolom minimal 180px, maksimal berbagi sisa ruang.
• auto-fit: muat sebanyak mungkin kolom yang bisa; sisanya turun ke baris berikutnya.

Pada layar lebar, mungkin 5 kolom; di tablet 3 kolom; di ponsel 1 kolom, semuanya tanpa menulis satu pun media query. Ini salah satu trik paling berguna dalam CSS modern.

auto-fit vs auto-fill

Keduanya mirip. auto-fill mempertahankan kolom kosong; auto-fit menyusutkan kolom kosong sehingga item yang ada melebar mengisi ruang. Untuk kartu, biasanya auto-fit yang dipilih.