Merhaba.
özelliği, CSS Grid Layout modelinde kullanılan bir özelliktir ve bir öğenin bir grid konteynırında hangi satır ve sütunlarda yer alacağını belirlemek için kullanılır. Bu özellik, öğelerin grid üzerinde yerleşimini kontrol etmek için kullanılan diğer özelliklerle birlikte çalışır.
grid-area
grid-area
özelliği, bir öğenin konumunu belirlemek için bir dizi değeri kabul eder. Bu değerler şu sırayla sıralanır:
İlk değer, öğenin başlangıç satırını belirtir.
İkinci değer, öğenin başlangıç sütununu belirtir.
Üçüncü değer, öğenin bitiş satırını belirtir.
Dördüncü değer, öğenin bitiş sütununu belirtir.
Bu değerler, öğenin grid içindeki konumunu belirlemek için kullanılır. Örneğin:
.item {
grid-area: 2 / 1 / 4 / 4;
}
Bu örnekte, “item” adlı öğe, grid üzerinde 2. satırdan başlayıp 4. satırda sona erer ve 1. sütundan başlayıp 4. sütunda sona erer.
Ayrıca, grid-area
özelliğini kullanmak yerine ayrı ayrı grid-row-start
, grid-column-start
, grid-row-end
ve grid-column-end
özelliklerini kullanarak da aynı sonuca ulaşabilirsiniz. Ancak, grid-area
kullanımı daha kısa ve okunabilir bir yol sağlar.
body{
margin: 0;
padding: 0;
font-family: sans-serif;
padding: 30px;
}
.box{
width: 400px;
height: 100px;
background-color: #ccc;
font-size: 20px;
text-align: center;
line-height: 100px;
border-radius: 20px;
margin-bottom: 5px;
}
.divider{
height: 40px;
}
.container1{
padding: 10px;
background-color: #21b5da;
display:grid;
grid-template-columns: repeat(5, 1fr); /* 3 eşit genişlikte sütun */ grid-template-rows: 200px 200px; /* 2 farklı yükseklikte satır */ gap: 10px; /* Sütunlar ve satırlar arasındaki boşluk */
}
.box1 {
grid-area: 3 / 2 / 5 / 5;
}
.box2 {
grid-area: 1 / 3 / 4 / 4;
}
.box3 {
grid-area: 3 / 5 / 3 / 5;
}
.box4 {
grid-area: 4 / 2 / 4 / 4;
}
.box5 {
grid-area: 1 / 4 / 4 / 4;
}
Bir sonraki yazımda görüşmek üzere.
Selamlar, bu yazımda Oly'nin 1 hafta boyunca olduğu GS iğnesi, yaşanan değişimleri anlatmaya çalışacağım. PCR…
Selamlar, bu yazımda Hemogram ve Biyokimya sonuçlarımızı göstermek için İÜCHH'ne tekrar gidişimizi ve sonrasını anlatacağım.…
Selamlar, bu yazımda GS iğnesine başlama kararımızı ve Oly’de bu süreçte nelere dikkat ediyor, neler…
Selamlar, bu yazımda İÜCHH'deki tedavi sürecimiz ve sonrasında yaşananlardan bahsetmeye çalışacağım. 20.06.2025 Cuma günü saat…
Eve Dönüş ve İlk Şüpheler 18 Haziran Perşembe saat 23 sularında İstanbul’daki evimize giriş yaptık.…
9 Haziran Pazartesi günü Aydın’daki sürecimiz bitti ve Antalya yolculuğumuz başladı. Saat 11 gibi yola…