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:

.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 */
}

1. 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:

.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.