CSS grid-row-gap özelliği, bir grid kutusunun satırları arasındaki boşluğu belirler. Bu özelliğin değeri bir CSS boyut değeri olabilir, örneğin piksel, em, % gibi.

Aşağıdaki örnek CSS kodu, bir grid kutusunun satırları arasındaki boşluğu 20px olarak ayarlamaktadır. Grid kutusu 3 sütünlü ve her satır için 1fr değerinde olacaktır ve grid-row-gap özelliği ile de 20px aralık bırakılmıştır.

.container {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-row-gap: 20px;
}

Ayrıca grid-row-gap özelliği ile grid kutusunda satır aralarının boyutlarını kullanıcı tarafından belirlenen bir değere göre ayarlayabilirsiniz.

Aşağıdaki örneği inceleyelim...

.container {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-row-gap: 2em;
}

Bu özellik, grid kutusunda daha estetik ve okunaklı bir görünüm sağlamak için kullanılabilir. Örneğin, bir web sayfasında grid kullanılarak yerleştirilmiş bir galeri gibi, satır aralarının boyutlarını ayarlamak görsel olarak daha iyi bir sonuç sağlayabilir.

• Not: grid-row-gap özelliği grid öğelerinde kullanılır. Örneklerdeki kullanımlar grid container öğesi içindir.