Grid: Gap

Column dan Row Gaps

1. column-gap dan row-gap: Properti ini digunakan untuk mengontrol jarak antara kolom dan baris dalam grid. Anda dapat menentukan jarak vertikal dengan row-gap dan jarak horizontal dengan column-gap.

Contoh:

.container {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  column-gap: 20px; /* Jarak antara kolom */
  row-gap: 10px; /* Jarak antara baris */
}

1. gap: Properti gap adalah singkatan untuk column-gap dan row-gap. Dengan menggunakan gap, Anda dapat menentukan jarak antara kolom dan baris secara bersamaan.

Contoh:

.container {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 20px 10px; /* Jarak antara kolom (20px) dan baris (10px) */
}