# Grid: Grid Struktur

#### Grid Struktur

1. **grid-template-columns dan grid-template-rows**: Properti ini digunakan untuk mendefinisikan struktur kolom dan baris dalam grid. Dengan `grid-template-columns`, Anda dapat menentukan lebar setiap kolom, sedangkan `grid-template-rows` digunakan untuk menentukan tinggi setiap baris.

Contoh:

```css
.container {
  display: grid;
  grid-template-columns: 100px 200px 100px; /* Tiga kolom dengan lebar masing-masing */
  grid-template-rows: 50px 100px; /* Dua baris dengan tinggi masing-masing */
}
```

2. **grid-template**: Properti ini adalah singkatan untuk `grid-template-columns`, `grid-template-rows`, dan `grid-template-areas`. Dengan menggunakan `grid-template`, Anda dapat mendefinisikan struktur grid secara lebih komprehensif.

Contoh:

```css
.container {
  display: grid;
  grid-template: 
    "header header header"
    "sidebar main main"
    "footer footer footer"; /* Struktur grid dengan tiga baris dan tiga kolom */
}
```

Dengan menggunakan properti-properti ini, Anda dapat mengatur struktur dan tata letak grid dengan lebih fleksibel dan efisien dalam desain web Anda.
