cssgridplacementMenengah5 mnt baca

Penempatan Grid Item

Menempatkan item di petak tertentu: grid-column/row, span, dan area bernomor.

Garis grid, bukan petak

Konsep kunci: grid bekerja dengan garis (lines), bukan petak. Grid 3 kolom punya 4 garis vertikal (1-2-3-4). Untuk menaruh item dari kolom 1 sampai 3, kamu menulis garis 1 sampai 4:

css

.hero {
  grid-column: 1 / 4; /* dari garis 1 sampai garis 4 = 3 kolom */
  grid-row: 1 / 3;    /* dari garis 1 sampai garis 3 = 2 baris */
}

Analoginya seperti memesan tanah: kamu menyebut patok batasnya (garis), bukan nomor petaknya.

Kata kunci span

Daripada menghitung nomor garis, pakai span yang lebih intuitif:

css

.hero {
  grid-column: span 3; /* bentang 3 kolom dari posisi saat ini */
}

.tinggi {
  grid-row: span 2; /* bentang 2 baris */
}

span berarti "sebesar ini, taruh di posisi otomatis berikutnya". Ini pola paling sering dipakai untuk item unggulan di galeri.

Contoh nyata: galeri dengan item unggulan

css

.galeri {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  grid-auto-rows: 150px;
  gap: 12px;
}

.unggulan {
  grid-column: span 2;
  grid-row: span 2; /* 2x2 kali lebih besar */
}

Item unggulan otomatis menempati blok 2x2, item lain mengalir mengisi sisanya. Pola ini dipakai galeri foto, portofolio, dan dashboard widget.

Menimpa urutan otomatis

Kadang kamu ingin item tertentu di posisi pasti, misal iklan di baris kedua:

css

.iklan {
  grid-column: 2 / 4;
  grid-row: 2;
}

Item lain tetap mengalir otomatis di sekitarnya. Kalau dua item menempati petak yang sama, mereka bertumpuk (yang belakangan di HTML di depan), yang bisa dimanfaatkan untuk efek overlay teks di atas gambar.

Catatan teknis: garis juga bisa diberi nama ([konten]), tapi untuk kebanyakan kasus nomor garis + span sudah cukup. Penamaan garis berguna di layout sangat kompleks.

Tips profesional

Untuk hero banner: grid-column: 1 / -1 (garis -1 = garis terakhir) membentang penuh tanpa menghitung.
Angka negatif pada garis menghitung dari AKHIR: grid-column: -3 / -1 = dua kolom terakhir.
Item yang tumpang tindih + z-index = pola kartu dengan badge "diskon" melayang di sudut gambar.

css

.grid-12 {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  gap: 16px;
}

.banner { grid-column: 1 / -1; }      /* penuh */
.konten { grid-column: 1 / 9; }       /* 8 kolom */
.sidebar { grid-column: 9 / -1; }     /* 4 kolom */

Grid 12 kolom klasik dengan garis negatif: banner penuh, konten + sidebar proporsional.

Rangkuman

Tempatkan item dengan grid-column/grid-row memakai nomor garis atau span. Span untuk ukuran relatif ("sebesar 2 kolom"), nomor garis untuk posisi pasti. Item bisa bertumpuk untuk efek overlay.

Live Playground

export default function App(): JSX.Element {
  return <h1>Hello world</h1>
}

Edit kode di kiri, preview kanan ter-update otomatis.

Tantangan

Pindahkan Unggulan ke Tengah

Penempatan item adalah yang membedakan grid dari flexbox. Kuasai ini dan kamu bisa bikin layout majalah.

Di playground:

Pindahkan item unggulan ke posisi pasti: kolom 2-4, baris 1-3 memakai nomor garis (grid-column: 2 / 4; grid-row: 1 / 3;).
Buat item "5" menumpuk tepat di atas item unggulan (posisi sama) dengan background semi-transparan sebagai overlay teks.
Di komentar, jelaskan kapan memakai span dan kapan memakai nomor garis.

<!doctype html>
<html>
<head>
<meta charset="utf-8" />
<link rel="stylesheet" href="styles.css" />
</head>
<body>
<h1>Halo CSS</h1>
<p>Edit styles.css dan lihat hasilnya.</p>
</body>
</html>

Open Sandbox