CSS "grid-area" özelliği, bir elementin Grid Layout içinde hangi hücreleri kapladığını belirleyerek elementin boyutunu ve konumunu gösterir.

"grid-area" özelliği, iki temel seçenek alır: bir hücre adı veya bir hücre ad aralığı.

Örneğin, "header" değeri, elementin Grid Layout içinde "header" hücresini kaplamasını sağlar. "header / sidebar / main" değeri ise, elementin Grid Layout içinde "header", "sidebar" ve "main" hücrelerini kaplamasını sağlar.

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

/* Grid Layout tanımla */
.container {
  display: grid;
  grid-template-areas: 
    "header header header"
    "sidebar main main"
    "footer footer footer";
}

/* header hücresini kapla */
header {
  grid-area: header;
}

/* sidebar ve main hücrelerini kapla */
.content {
  grid-area: sidebar / main;
}

Bu örnekte, ".container" sınıfı için Grid Layout tanımlanmıştır ve hücrelerin adları ve yerleşimleri belirtilmiştir. "header" elemanı için "grid-area: header" özelliği kullanılmıştır ve bu eleman Grid Layout içinde sadece "header" hücresini kaplayacaktır. ".content" sınıfı için ise "grid-area: sidebar / main" özelliği kullanılmıştır ve bu eleman Grid Layout içinde "sidebar" ve "main" hücrelerini kaplayacağını belirtir. Bu şekilde, elementlerin Grid Layout içinde istediğiniz şekilde yerleştirilmesini sağlayabilirsiniz.

Bu özellik, web tasarımında Grid Layout kullanırken kullanışlıdır. Örneğin, bir sayfanın içeriğini sıralı hücrelere bölmek ve her hücrenin boyutunu ve konumunu belirlemek için kullanabilirsiniz.