Grid: Item Placment

Item Placement in Grid Layout

Pada modul ini, kita akan membahas cara menempatkan grid items secara individual di dalam grid container menggunakan beberapa properti yang telah disediakan oleh CSS Grid Layout. Berikut adalah properti-properti yang akan kita bahas:

1. grid-row-start dan grid-column-start: Properti ini menentukan baris dan kolom awal dari grid item di dalam grid container.

2. grid-row-end dan grid-column-end: Properti ini menentukan baris dan kolom akhir dari grid item di dalam grid container.

3. grid-row dan grid-column: Properti singkat yang menggabungkan grid-row-start, grid-row-end, grid-column-start, dan grid-column-end untuk menentukan letak grid item.

4. grid-area: Properti ini memberikan nama pada area grid yang ditempati oleh grid item di dalam grid container.

5. grid-template-areas: Properti ini mengatur tata letak grid items menggunakan nama area yang telah ditentukan.

Contoh Penggunaan:

.item {
  grid-row-start: 1; /* Grid item dimulai dari baris pertama */
  grid-row-end: 3; /* Grid item berakhir pada baris ketiga */
  grid-column-start: 2; /* Grid item dimulai dari kolom kedua */
  grid-column-end: 4; /* Grid item berakhir pada kolom keempat */
  grid-area: 1 / 2 / 3 / 4; /* Menentukan posisi grid item dengan row-start / column-start / row-end / column-end */
}

.container {
  display: grid;
  grid-template-columns: repeat(4, 100px);
  grid-template-rows: repeat(3, 100px);
  grid-template-areas: 
    "header header header header"
    "main main . sidebar"
    "footer footer footer footer";
}

Dengan menggunakan properti-properti ini, Anda dapat secara presisi menentukan letak dan tata letak grid items di dalam grid container sesuai dengan desain yang diinginkan.