tarihinde Fatih Hayrioğlu

  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

tarihinde Fatih Hayrioğlu

  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

CSS grid yazılarımızın 8. sinde sizlere repeat işlevi ve beraberinde kullanılan auto-fit, auto-fill ve minmax değerlerini anlatacağım. minmax işlevinden bir önceki yazımızda bahsetmiştim. Burada sadece minmax‘ın repeat içindeki kullanımına değineceğim.

CSS grid’in göz alıcı özelliklerinden birisi ögeleri otomatik olarak yerleştirmesidir. Medya sorguları olmadan sayfa planlarımızı uyumlu hale getirmek benim hayal ettiğim bir özellikti. Tabi bunun sadece tekrarlanan grid ögeleri için olması üzücü, umarım ilerde tüm grid ögeleri için benzer bir özellik olur.

repeat işlevi

repeat işlevi uyguladığımız grid-template-columns ve grid-template-rows tanımlarının içindeki tekrarlayan yapıları teke indiren bir kısayoldur.

Örneğin 12 kolonlu ve kolonları eşit olarak yayılan esnek bir sayfa yapısını kodlamak isteyelim.

display:grid;
grid-template-area: 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr;

Uğraşı isteyen ve kötü gözüken bir kod, işte tam burada CSS grid repeat işlevi devreye giriyor.

display: grid;
grid-template-columns: repeat(12, 1fr);

Bu kadar. Nasıl, çok basit değil mi?

repeat(12, 1fr)

İlk parametre tekrarın adedi, ikinci parametre tekrarlanacak grid ögesinin boyutunu gösteriyor. Değer olarak ızgara izi değerlerinin tümünü (ölçü değerleri, fr, min-content, max-content ve auto) alır.

Başka bir örnek yapalım. Bu sefer farklı boyutlardaki tekrarlayan kolonlarımız olsun.

display: grid;
grid-template-columns:40px 1fr 2fr 40px 1fr 2fr 40px 1fr 2fr 40px 1fr 2fr;

gibi bir kodu tekrar eden blokları birleştirerek aşağıdaki gibi yazabiliriz.

display: grid;
grid-template-columns: repeat(4, 40px 1fr 2fr);

şeklinde yazabiliriz.

Tekrarlayan ve tekrarlamayan ögelerin birlikte kullanımı

Izgara izi tanımlarında repeat işlevini tekrar etmeyen değerlerle birlikte de kullanabiliyoruz. Yukarıdaki örnekte en sağa 40px’lik bir kolon daha ekleyelim mesela.

display: grid;
grid-template-columns:repeat(3, 40px 1fr 2fr) 40px;

şeklinde bir tanım ile istediğimiz sonucu alırız. Bu şekilde sayfa planımızda tekrarlayan alanlar ve tekrarlamayan alanları birlikte kullanarak bir çok çözüm üretebiliriz. Aynı şekilde birden fazla repeat işlevini de kullanabiliriz.

Örnekleri genelde kolonlar üzerinden versek te satırlar içinde aynı durum geçerlidir.

repeat ve minmax işlevini birlikte kullanalım

Yukarıdaki örnekler de gördüğümüz gibi geniş alanlarda esnek değerler iyi sonuç verirken daha küçük alanlarda ögeler büzüşüp işlevsiz görünmektedir. Bu durumu engellemek için bir önceki yazımda anlattığım minmax işlevini kullanacağız.

display: grid;
grid-template-columns: repeat(12, minmax(200px, 1fr));

Bu kodlama sonucunda da sayfada yatay kaydırma çubuğu çıkacaktır. Bu kaydırmayı engellemek için auto-fit ve auto-fill değerlerini kullanabiliriz.

auto-fit ve auto-fill değerleri

Bu değerler sayfa yapısını ve kolonları/satırları görüntüleyen aracın boyutuna göre bir alt satıra/yan kolona geçişini otomatik bir şekilde ayarlar. Bunu medya sorgusu kullanmadan yapmaları müthiş. Bu değerler özetle CSS grid ögelerinin satır içinde alt satıra kayıp kaymayacağını ayarlar.

Farklı bir örnekle bu değerleri anlamaya çalışalım.

.container {
   display: grid;
   grid-template-columns: repeat(4, 200px);
   grid-gap: 1.5rem;
}

Genişliği 200px olan grid ögelerini 4’lü kolonlara ayırır. Gösterilen aracın durumuna göre sağ tarafta boşluk oluşabilir. Masaüstü ekranlarda 5. öge ilk satıra sığardı ancak biz 4 kolon tanımı yaptığımız için 4 kolondan sonrasını bir alt satıra atacaktır. Uyumlu bir sayfa planını düşündüğümüzde eğer sığıyorsa bir üst satırda göstermek daha güzel olurdu. Bunun için görüntülenen aracın boyutuna göre medya sorgularıyla grid-template-columns değeri tanımlamak gerekirdi. İşte burada yardımımıza tekrarlanan ögeler için auto-fill ve auto-fit değerleri yetişiyor.

Yukarıdaki tanımı aşağıdaki şekilde değiştirerek

grid-template-columns: repeat(auto-fill, 200px);

200px’lik kolonlar dizilecektir. Yukarıdaki gibi 4 adet kolon olarak sınırlanmayacak dizilen kolonların sağında 200px’lik veya daha fazla boşluk olduğunda bir ögeyi ilk satıra çıkaracaktır. Bir de auto-fittanımı var.

grid-template-columns: repeat(auto-fit, 200px);

auto-fill ile auto-fit tanımlarının arasındaki fark ancak satır genişliğinin, grid ögelerinin toplam genişliğinden daha fazla olduğu durumlarda ortaya çıkar. auto-fill ile auto-fit tanımları sayesinde grid ögelerinin fazladan kalan boşluğu nasıl değerlendirmesi gerektiğine biz karar veririz. Aşağıdaki hareketli giflerde durum daha iyi anlaşılır.

auto-fill auto-fit karşılaştırma

Hareketli gif’te görüldüğü gibi kapsayıcı genişliği içerik toplam genişliğini geçince fark anlaşılıyor. auto-filltanımında boş kolonlar eklerken, auto-fittanımında boş alanları mevcut öge genişliğine ekliyor.

Farkı görmek için bir diğer örnek ise Wes Bos’un videosunda anlattığı örnek.

En son elemana -1 tanımı yapalım. Daha sonraki bir yazımızda grid ögesi tanımlarını öğreneceğiz.

.grid-ogesi-7 {
  grid-column-end: -1;
}

Kodu 7 numaralı elemanı grid kapsayıcısının en sağına yaslamış olduk. Tabi bunu auto-fill tanımlı kapsayıcıda görebiliyoruz. auto-fittanımlı kapsayıcı içindeki ögeler boş alanı doldurduğu için böyle bir durum söz konusu bile olamıyor.

Kalın sağlıcakla.

Kaynaklar

tarihinde Fatih Hayrioğlu

Düzelt: min-content codepen paylaşımı yanlıştı düzettik. Düzeltme uyarısı için L. Arman Özak‘a teşekkürler

  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

CSS grid makalelerimizin bu 7. sinde sizlere minmax() işlevini anlatmaya çalışacağım. CSS grid standartları ilk yazılmaya başlandığında çok karmaşık ve anlaşılması zor diye mesafeli yaklaşıyordum ancak beraberinde getirdiklerini öğrendikçe ve uyguladıkça daha iyi anlıyor ve seviyorum.

CSS minmax işlevi tanımlandığı grid ögesine en az (min) verilen değerine eşit ve daha büyük ve en fazla (max) değerine eşit ve daha küçük bir boyut aralığı tanımlar. Sadece CSS grid içinde kullanılır.

minmax(min, max)

İlk parametresi minimum değeri, ikinci parametresi maksimum değeri belirler.

Maksimum değeri eğer minimum değerden küçükse maksimum değeri tarayıcı tarafından yorumlanmaz ve minimum değer uygulanır.

Minimum değer fr birimli değer alamaz, maksimum değer fr birimli değer alabilir.

CSS minimax işlevi 5 farklı birimde değer alır.

  1. Ölçü değerleri (px, em, vm, vh, …)
  2. Esnek değerler (fr)
  3. max-content
  4. min-content
  5. auto

Bu değerlere göz atalım.

Ölçü değerleri

Ölçü değerleri, CSS uzunluk (px, em, vm vh, …) değerleri ve yüzde değerlerdir. Tanımlanan değer kolon genişliğini belirler ve eksi değer alamaz. Örneğin 25%, 250px, 100vw gibi.

Ölçü değerleri minmax işlevinin en basit halini gösterir.

.kapsayici {
    display: grid;
    grid-template-columns: minmax(80px, 240px) 100px 100px;
}

CSS grid minmax sabit ölçüleri

Kapsayıcı eleman için tanımlanmış grid-template-columns değeriyle 2. ve 3. ögeler 100px ile sabitlenmişken 1. öge görüntülenen alanın genişliğine göre en az 100px en fazla 200px genişlik değeri alır.

Yüzde değerlerine bir örnek yapalım.

.kapsayici {
    display: grid;
    grid-template-columns: minmax(50%, 80%) 100px 100px;
}

Esnek değer (fr)

Esnek değer, fr(ing. fraction) birimi ‘kesir’ anlamına gelir. px veya % gibi bir uzunluk değil, bunun yerine ‘esnek’ bir birim olarak kabul edilir. CSS grid ile birlikte gelen bir değerdir. Kullanılabilir alanı tanımlamamızı sağlayan esnek bir birimdir. Daha detaylı bilgi için fr birimi yazımıza göz atınız.

.kapsayici {
display: grid;
grid-template-columns: minmax(50%, 1fr) 1fr 1fr;
}

CSS grid minmax esnek değerler

Esnek değerler ile uyumlu bir yapı kazanır grid ögelerimiz.

min-content ve max-content tanımları

max-content

Izgara izi içindeki boşluklar da dahil en geniş içerikli ögesinin değeridir. Metin bir alt satıra kaydırılmadan boyut ölçülür.

.kapsayici {
  display: grid;
  grid-template-columns: minmax(max-content, 1fr) 1fr 1fr;
}

CSS grdi minmax max-content

Diğer kutular genişlik daralınca iki satıra düşerken max-content tanımlı kutu içeriğininin uzunluğunca sabit kalıyor.

min-content

Izgara izi içindeki ızgara ögesinin en az daraldığı durumdaki değeridir. Metin taşmadan daralabileceği en son noktadaki değerdir ya da ızgara ögesi içindeki satır içi ögenin genişliği kadardır.

.kapsayici {
  display: grid;
  grid-template-columns: minmax(min-content, min-content) minmax(max-content, max-content) 1fr;
}

CSS grid minmax min-content

min-content tanımlanan eleman scroll çıkmadan ufalacağı en dar genişliğe gelir.

auto

auto tanımlanan grid ögesi en fazla max-content değeri kadar, en az min-content değeri kadar değer alır.

.kapsayici {
  display: grid;
  grid-template-columns: minmax(auto, auto) 1fr 1fr;
}

CSS grid minmax auto

Kaynaklar