CSS Grid öge özellikleri

12 Aralık 2019

  1. CSS Grid’e (Izgara) Giriş
  2. CSS Grid Özellikleri
  3. fr birimi
  4. CSS Izgara çizgi isimlendirmesi ve kullanımı
  5. Sayfa planlama sihirbazı grid-template-areas
  6. Explicit(belirlenmiş) ve implicit(belirlenmemiş) grid ögeleri
  7. CSS minmax işlevsel değeri
  8. repeat() işlevi, auto-fill ve auto-fit değerleri

Grid yazılarımızın 9. sındayız. Bu yazıda grid öge özelliklerine değineceğiz.

Şimdiye kadar ki yazılarda hep kapsayıcı elemana yapılan tanımlarla CSS grid ögelerini konumlandırdık. Bu yazıdaysa grid ögesine yapılan atamalarla grid ögesini konumlandırmayı göreceğiz. Şimdiye kadar yapılan tanımlar genel tanımlarken bu yazımızda bahsedeceğimiz tanımlar özel tanımlar olacak.

CSS Grid Modülü terimleri

Bu tanımlar genelde grid izi sayıları üzerinden yapılıyor. Bu sayılar soldan sağa doğru yazılan diller için soldan sağa iken sağdan sola yazılan diller için sağdan sola numaralandırılır. Bir de grid-template-area ile kullandığımız ve grid ögelerine tanımladığımız grid isimleriyle de aynı şeyleri yapabiliriz.

grid-column-start, grid-column-end, grid-row-start ve grid-row-end tanımları ve bu tanımların kısayolları olan grid-column, grid-row ve grid-area tanımlarını anlatmaya çalışacağız. Son olarak da span anahtar kelime değerinden bahsedeceğiz.

Bu tanımlar css grid ögesinin sol/sağ ve üst/alt sınırlarını belirler. Sırasıyla grid-columm-start/grid-column-end ve grid-row-start/grid-row-end tanımlarıyla bu işi yapıyoruz.

.icerik {
    grid-column-start: 2;
    grid-column-end: 4;
    grid-row-start: 2;
    grid-row-end: 4;
}

Tanımıyla icerik elemanı kolon olarak 2. ve 4. ızgara satır çizgisi arasında ve satır olarak 2. ve 4. satır çizgisi arasında konumlanacaktır. Benzer şekilde diğer elemanları da yerleştirebiliriz.

Sadece tek grid kapsamı olan kolon ve satır tanımlarında -start tanımları yeterli olur. Örneğin

.tanitim {
    grid-column-start: 1;
    grid-column-end: 2;
    grid-row-start: 3;
    grid-row-end: 5;
}

Kolon tanımı tek bir hücreyi kapsadığı için tanımını aşağıdaki gibi yazabiliriz.

.tanitim {
    grid-column-start: 1;
    grid-row-start: 3;
    grid-row-end: 5;
}

Negatif değerler

Grid öge tanımlarında sadece artı değerler değil eksi değerle de kullanılabilir. Negatif değerler tanımlı ızgara çizgilerinin sondan başa doğru tanımlamamızı sağlar. Bu tanımlar kapsayıcı elemanın alt/sağ çizgilerine göre yerleştirme yapar.

.ust-alan {
    grid-column-start: 1;
    grid-column-end: 4;
}

Tüm satırı kaplayan bir grid ögesi yapmak için

.ust-alan {
    grid-column-start: 1;
    grid-column-end: -1;
}

Her zaman ızgara izinin sonuna dayanacaktır.

Yukarıdaki tanımın hepsini de eksi değer ile de yapabiliriz.

.ust-alan {
    grid-column-start: -4;
    grid-column-end: -1;
}

kodu aynı sonucu verecektir.

grid-column ve grid-row

Grid ögelerine yapılan grid-column-start, grid-column-end, grid-row-start ve grid-row-end daha kısa yazmamızı sağlayan özelliklerdir.

.icerik {
    grid-column-start: 2;
    grid-column-end: 4;
    grid-row-start: 2;
    grid-row-end: 4;
}

Yukarıdaki örneği tekrar yazalım.

.icerik {
    grid-column: 2 / 4;
    grid-row: 2 / 4;
}

Tüm sayfayı bu şekilde kısaltırsak

İlk baştaki kod 52 satır iken son yaptığımız 45 satıra düştü.

Izgara çizgi isimleri kullanıyorsak kısayollarda bu isimleri de yazabiliriz.

grid-area kısaltması

Yukarıda yaptığımız kısaltmayı daha da kısaltabiliriz. Kolon ve satırları tek tanımda toplamak için grid-area kısayolu kullanırız.

grid-area: row-start / col-start / row-end / col-end;

Sıralamayı unutursanız, hatırlamak için şöyle düşünebilirsiniz: ilk üst/sol (row-start / column-start) sonra alt/sağ (row-end / column-end) tanımlarının geldiğini düşünün.

.tanitim {
    grid-column: 1 / 2;
    grid-row: 3 / 5;
}

Yukarıdaki tanımı tek satırda

.tanitim {
    grid-area: 3 / 1 / 5 / 2;
}

span tanımı

CSS grid ögesini genişletmek için kullanılır. Izgara hücrelerini bileştirmek için span anahtar değerini de kullanabiliriz. Örneğin

.tanitim {
    grid-column: 1 / 2;
    grid-row: 3 / 5;
}

Kodunu aşağıdaki gibi de yazabiliriz.

.tanitim {
    grid-column: 1;
    grid-row: 3 / span 2;
}

Kalın sağlıcakla.

Kaynaklar

Avatar Popout Efekti

Avatar Popout Efekti uygulaması Devamını oku

Kapsayıcı sorguları (container query)

29 January 2024 tarihinde yayınlandı.

Renk geçişli ve Hareketli kenar çizgileri

22 January 2024 tarihinde yayınlandı.