GRID AREA

Grid Area adalah fitur penting dalam CSS Grid Layout yang memungkinkan kamu untuk menentukan posisi elemen dalam grid. Ini memungkinkan kontrol yang lebih efisien dan fleksibel atas tata letak situs web, memungkinkan elemen individu ditempatkan di mana saja dalam grid.

Definisi Grid Area

Dalam CSS Grid, Grid Area adalah area di dalam grid yang didefinisikan oleh baris dan kolom. Ini dapat mencakup satu atau lebih sel dalam grid dan digunakan untuk menentukan di mana elemen HTML harus ditempatkan dalam grid.

Berikut adalah contoh penamaan grid area:

.grid-container {
  display: grid;
  grid-template-areas: 
    "header header header"
    "menu content content"
    "footer footer footer";
}

Menggunakan Grid Area

Untuk menggunakan area grid, kamu perlu mendefinisikan grid-template-areas dalam kontainer grid kamu. Kamu juga perlu menetapkan elemen HTML ke sebuah area dengan properti grid-area.

Berikut adalah contoh penggunaan area grid:

.grid-container {
  display: grid;
  grid-template-areas: 
    "header header header"
    "menu content content"
    "footer footer footer";
}

.header {
  grid-area: header;
}

.menu {
  grid-area: menu;
}

.content {
  grid-area: content;
}

.footer {
  grid-area: footer;
}

Dalam contoh ini, elemen dengan class .header akan menempati baris pertama dalam grid, .menu akan menempati baris kedua, kolom pertama, dan seterusnya.

Mengganti Grid Area

Grid area bisa diganti dengan mudah hanya dengan merubah nilai dari grid-template-areas. Ini sangat berguna saat membuat desain responsif, di mana kamu ingin tata letak elemen berubah tergantung pada ukuran layar.

Berikut contoh menggantinya:

@media (max-width: 600px) {
  .grid-container {
    grid-template-areas: 
      "header"
      "menu"
      "content"
      "footer";
  }
}

Dalam contoh ini, ketika lebar layar kurang dari 600px, setiap elemen akan menempati baris sendiri dalam grid.

Dengan memahami dan mengimplementasikan grid area dalam desainmu, kamu bisa menciptakan layout yang fleksibel dan responsif dengan lebih efisien.