GRID TEMPLATE AREA

Pengenalan tentang Grid Template Area

Dalam CSS Grid Layout, Grid Template Area merupakan teknik yang sangat kuat dan fleksibel untuk definisi layout. Teknik ini memungkinkan kamu untuk membuat layout dengan cara yang lebih deskriptif dan mudah dimengerti, dengan memberi nama pada area grid dan merujuk nama tersebut dalam kode kamu.

Mendefinisikan Grid Template Area

Area pada grid didefinisikan dengan properti grid-template-areas. Dalam properti ini, kamu memetakan layout grid kamu dengan cara memberi nama pada setiap sel dalam grid. Sel-sel ini dapat diberi nama apa pun yang kamu inginkan, dan dapat mencakup lebih dari satu sel grid. Berikut contoh sederhananya:

.container {
  display: grid;
  grid-template-areas:
    "header header header"
    "sidebar main main"
    "footer footer footer";
}

Dalam contoh di atas, masing-masing kata dalam tanda kutip merujuk pada satu sel grid. Seperti yang bisa kamu lihat, sel-sel dengan nama yang sama akan membentuk satu area.

Mengacu pada Grid Template Areas

Setelah area grid didefinisikan dalam grid-template-areas, kamu dapat merujuknya langsung dalam elemen-elemen anak dari container grid. Ini dilakukan dengan menggunakan properti grid-area. Berikut contoh penggunaannya:

.container div:nth-child(1) { 
  grid-area: header; 
}
.container div:nth-child(2) { 
  grid-area: sidebar; 
}
.container div:nth-child(3) { 
  grid-area: main; 
}
.container div:nth-child(4) { 
  grid-area: footer; 
}

Dengan teknik ini, layout grid menjadi lebih mudah untuk dibaca dan dimengerti. Selain itu, jika kamu ingin memindahkan suatu elemen ke posisi yang berbeda, kamu cukup merubah nama area grid pada elemen tersebut.

Beberapa Hati-Hati dalam Grid Template Area

Ada beberapa hal yang perlu diperhatikan dalam penggunaan Grid Template Area. Pertama, jika nama area grid tidak didefinisikan dalam grid-template-areas, maka kamu tidak bisa merujuknya dalam grid-area. Kedua, semua sel dalam area grid harus membentuk sebuah persegi atau persegi panjang. Jika tidak, browser tidak akan mengenali area tersebut dan akan memperlakukannya sebagai area kosong.

Namun, dengan memperhatikan hal-hal tersebut, kamu bisa mengoptimalkan penggunakan Grid Template Area dalam CSS Grid Layout untuk membuat layout yang lebih fleksibel dan mudah mengerti.