tarihinde Fatih Hayrioğlu

Twitter’da paylaştım ancak twitter’da yazılan zamanla kayboluyor, bundan dolayı buraya yazayım dedim. Herhangi bir kütüphane kullanmadan bu işi yapabiliyor olmak süper.

```js const anlasilirSaat = new Intl.RelativeTimeFormat(‘tr’, { numeric: ‘auto’ });

console.log(anlasilirSaat.format(-1, ‘hour’)); //konsol çıktısı: “1 saat önce” ``

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
  9. CSS Grid öge özellikleri
  10. Grid hizalama ve sıralama işlemleri

CSS grid yazılarımızın 11.sindeyiz. CSS grid modülünün öğrenilmesi diğer CSS modüllerine göre daha zor ve karışık. Toplamda 17 adet tanım olduğu düşünülürse bu karmaşa daha iyi anlaşılır. Bu tanımları azaltmak için kısaltmalar kullanılmıştır. Buraya kadar yazdığımız makalelerde yeri geldikçe bu kısaltmalardan bahsettik. Şimdiye kadar bahsettiğimiz kısaltmalar:

Bu yazımızda ise

  • grid-template
  • grid

kısaltmalarından bahsedeceğiz.

grid-template kısaltması

grid-template-columns, grid-template-rows ve grid-template-area özelliklerinin kısaltmasıdır.

Bu özelliklerin tanımını ve kullanımını CSS Grid Özellikleri yazımızda anlatmıştık.

.kapsul {
    display: grid;
    grid-template-columns: auto 1fr;
    grid-template-rows: auto 1fr auto;
}

tanımını aşağıdaki şekilde kısaltabiliriz.

/* grid-template-rows / grid-template-columns */
.kapsul {
    display: grid;
    grid-template: auto 1fr auto / auto 1fr;
}

grid-template-areas tanımını da bu kısaltma içinde kullanabiliyoruz.

/* grid-template-areas grid-template-rows / grid-template-columns */
  grid-template: 
            "menu ust ust" 4ch
            "menu icerik icerik" auto
            "baner alt alt" 4em / 20% 20px 1fr;

Bu kodun açık hali

grid-template-rows: 4ch auto 4em;
grid-template-columns: 20% 20px 1fr;
grid-template-areas: "menu ust ust" "menu icerik icerik" "baner alt alt";

şeklindedir.

Firefox, CSS grid ve flex konusunda diğer tarayıcılara göre daha iyi araçlar sunuyor. Grid kısayollarını kullanırken açık halini görmek çok kolay. Tanımın yanındaki sağ ok butonuna tıklayınca tek tek tanımını gösteriyor.

grid kısayolu detayı

grid kısaltması

Grid kısaltması sadece tanımlı ve tanımsız grid atamalarını kısaltır. CSS grid alt özellikleri bu kısaltma kapsamında değildir. Ara boşluk değerini (gap) bu kısaltma ile sıfırlanamaz.

Belirlenmiş (explicit) tanımlar:

  • grid-template-columns
  • grid-template-rows
  • grid-template-areas

Belirlenmemiş (implicit) tanımlar:

  • grid-auto-rows
  • grid-auto-columns
  • grid-flow

Yukarıda sıralanan tanımların kısayolu olarak grid tanımını kullanabiliriz.

İlk örneğimizi grid-template-xtanımlarının kısayolu olarak kullanımı için yapalım.

.container  { 
    grid: 100px 300px / 3fr 1fr;
}

kodunun açılımı:

Bir başka örnek explicit (belirlenmiş) ve implicit(belirlenmemiş) tanımların birlikte kullanımına yapalım.

.kapsul {
    display: grid;
    grid-template-rows: repeat(3, [line1 line2 line3] 150px);
    grid-auto-columns: 100px;
    grid-auto-flow: column;
}

Kısaltırsak:

.kapsul  {
    /* <'grid-template-rows'> /
   [ auto-flow && dense? ] <'grid-auto-columns'>? values */
   display: grid;
   grid: repeat(3, [line1 line2 line3] 150px) / auto-flow 100px;
}

Bir başka örnek:

.kapsul  { 
    grid-template-columns: repeat(3, [line1 line2] minmax(20em, max-content));
    grid-auto-rows: 50px;
    grid-auto-flow: dense;
}

Kısaltması:

.kapsul  { 
    grid: auto-flow dense 50px / repeat(3, [line1 line2 line3] minmax(20em, max-content));
}

CSS kısayolları kullanmayı severim ancak CSS grid kısayollarındaysa aynı şeyi söyleyemeyeceğim. Bu biraz da grid ile yeni yeni kodluyor olmamızdan kaynaklanıyor olabilir. Grid kısayolu kullandığımızda kodumuz ilk bakışta anlamsız bir kod yığını gibi duruyor. Bu kodu bir editör ile yönetiyorsanız sorun değil ama kendiniz yazıp yönetecekseniz sıkıntı. Belli bir süre açık halini kullanıp iyice aşina olduktan sonra kısayolları kullanabiliriz.

Yardımlarından dolayı Serkan Bektaş‘a teşekkürlerimi sunarım.

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
  8. repeat() işlevi, auto-fill ve auto-fit değerleri
  9. CSS Grid öge özellikleri

CSS grid yazılarımızın 10. sundayız. Yazımızın konusu hizalama ve sıralama hakkında olacaktır.

CSS grid ögesi ve kapsayıcısına atanan toplam 9 adet hizalama tanımları vardır.

  • justify-items
  • align-items
  • place-items
  • justify-content
  • align-content
  • place-content
  • justify-self
  • align-self
  • place-self

Yukarıdaki tanımlar W3C’nin kutu modeli hizalama modülü olarak belirlediği modülün özellikleridir. Hem grid hem de flex hizalamaları için kullanılır.

justify-items, align-items, tanımlarıyla justify-content, align-content, tanımları arasındaki fark -items ile bitenlere atanan değerler, kapsayıcı içindeki her bir ögeye ayrı ayrı uygulanırken, -content ile bitenlere atananlar kapsayıcı içindeki ögelerin hepsi bir içerik olarak kabul edilip topluca uygulanırlar.

Eğer flex hizalama özelliklerini ve etkilerini biliyorsanız benzer şeyler grid için de geçerlidir. Grid ögelerinin hizalamasında flex’e göre şöyle bir fark vardır: grid iki eksen üzerine (X,Y) etki ederken flex tek eksene etki eder.

iki eksenli planlama

Bu yazıda flex’te anlattığımız bilgileri tazeleyeceğiz. Bu özellikler kapsayıcıya yaptığı etki ile grid ögesine yaptığı etkileri ayrı ayrı inceleyelim.

Kapsayıcı grid hizalama özellikleri

6’sı grid kapsayıcısına

  • justify-items
  • align-items
  • place-items kısaltması
  • justify-content
  • align-content
  • place-content kısaltması

3’ü grid ögesine atanır.

  • justify-self
  • align-self
  • place-self kısaltması

Grid kapsayıcı ve grid öge hizalama tanımları aşağıdaki değerleri alır.

  • auto
  • normal
  • start
  • end
  • center
  • stretch
  • baseline
  • first baseline
  • last baseline

Aşağıda verdiğimiz grid hizalama örneklerini sadece bir değer için vereceğiz. Siz yukarıdaki değerlerin her birini tek tek deneyerek sonuçlarını görebilirsiniz.

justify-items

Kapsayıcı grid içindeki ögelerinin tamamının yatayda hizalanması için kullanılır.

.kapsayici {
   display: grid;
   grid-gap: 1rem;
   grid-template-columns:  repeat(5, 150px);
   grid-template-rows: repeat(5, 100px);
   justify-items: center;
}

justify-items

Yatayda tüm grid ögelerini ortalamış olduk. Grid ögesinin içeriği grid hücresinin alanından daha büyükse bu özellik işlevsel olur.

justify-items atanmış kapsayıcı içindeki her bir grid ögesinin justify-self değerine atanmış gibi davranır.

align-items

Kapsayıcı grid içindeki ögelerinin tamamının dikeyde hizalanması için kullanılır.

.kapsayici {
   display: grid;
   grid-gap: 1rem;
   grid-template-columns:  repeat(5, 150px);
   grid-template-rows: repeat(5, 100px);
   align-items: center;
}

align-items

Dikeyde tüm grid ögelerini ortalamış olduk.

align-items atanmış kapsayıcı içindeki her bir grid ögesinin align-self değerine atanmış gibi davranır.

place-items kısaltması

place-items tanımı yukarıda tanımladığımız align-items ve justify-items tanımlarının kısaltmasıdır. Yatay ve dikey tanımları ortak bir yerden yapılmış oluruz.

.kapsayici {
   display: grid;
   grid-gap: 1rem;
   grid-template-columns:  repeat(2, 100px);
   grid-template-rows: repeat(3, 50px);
   justify-content: center end;
}

place- tanımları grid ile birlikte geldiği için diğer tanımlara göre tarayıcı desteği daha düşüktür. Şu an baktığımda %87 (Aralık 2019)

justify-content

Grid ögelerinin genişliği, kapsayıcıdan az olduğu durumlar için etkindir. Grid kapsayıcı, içindeki ögeleri tek bir içerik gibi kabul edip ona göre atanan değerleri uygular. justify-content yatayda hizalama yapar.

Yukarıdaki değerlere ek olarak

  • space-around
  • space-between
  • space-evenly

değerlerini de alır.

.kapsayici {
   display: grid;
   grid-gap: 1rem;
   grid-template-columns:  repeat(2, 100px);
   grid-template-rows: repeat(3, 50px);
   justify-content: center;
   width: 315px;
   height: 250px;
}

justify-content

Grid kapsayıcı, içindeki tüm ögeler bir içerik gibi kabul edip tümü birden yatayda ortalandı.

align-content

Grid ögelerinin yüksekliği kapsayıcıdan az olduğu durumlar için etkindir. Grid kapsayıcı içindeki ögeleri tek bir içerik gibi kabul edip ona göre atanan değerleri uygular. align-content tanımı içeriği dikeyde hizalar.

Yukarıdaki değerler ek olarak

  • space-around
  • space-between
  • space-evenly

değerlerini de alır.

.kapsayici {
   display: grid;
   grid-gap: 1rem;
   grid-template-columns:  repeat(2, 100px);
   grid-template-rows: repeat(3, 50px);
   align-content: center;
   width: 315px;
   height: 250px;
}

align-content

Grid kapsayıcı, içindeki tüm ögeler bir içerik gibi kabul edilip tümü birden dikeyde ortalandı.

place-content kısaltması

place-content tanımı align-content ve justify-content tanımlarının kısaltmasıdır.

.kapsayici {
   display: grid;
   grid-gap: 1rem;
   grid-template-columns:  repeat(2, 100px);
   grid-template-rows: repeat(3, 50px);
   place-content: start center;
}

place- tanımları grid ile birlikte geldiği için diğer tanımlara göre tarayıcı desteği daha düşüktür. Şu an baktığımda %87 (Aralık 2019)

Grid ögesi tanımları

CSS grid ögesi hizalama tanımları 3 tanedir.

  • align-self
  • justify-self
  • place-self kısaltması

Aldığı değerler kapsayıcı değerleriyle aynıdır.

justify-self

Tanımlandığı CCC grid ögesinin yatayda hizalanmasını sağlar.

.oge1 {
    justify-self: start
}

justify-self

oge1 sınıfı tanımlı ilk eleman belirlenen hücrenin başlangıç çizgisine hizalanmıştır.

align-self

CSS grid ögesine atanan bu tanımlama ile sadece tanımlı ögenin dikeydeki hizasını ayarlarız.

.item1 {
    align-self: end;
}

align-self

oge1 sınıfı tanımlı ilk eleman belirlenen hücrenin alt çizgisine hizalanmıştır.

place-self kısaltması

CSS ögesine atanan align-self ve justify-self tanımları kısaltıp tek tanımda birleştirebilriz.

.item1 {
    place-self: center right
}

place- tanımları grid ile birlikte geldiği için diğer tanımlara göre tarayıcı desteği daha düşüktür. Şu an baktığımda %87 (Aralık 2019)

Sıralama order özelliği

order özelliği flex’ten bildiğimiz bir özellik. CSS grid ögeleri de tanımlanan order değerine göre sırasını ayarlar. order tanımı grid tarafından otomatik olarak sıralanmış ögelere etki eder, grid-column, grid-rows ve grid-areaile sıralaması özel olarak etikilenmiş ögelere etki etmez.

İçeriği dinamik olarak eklenen ögelerin olduğu bir yapıda order özelliği kullanılabilir. Dinamik birçok öge eklediğimiz bir yapıda, bir ögenin her zaman en son sırada olmasını order ile sağlayabiliriz.

Flex’tekinin aksine grid ögelerinin sıralaması için sadece order özelliği yoktur. Yukarıda gördüğümüz ve diğer yazılarda bahsettiğimiz özellikler ile sıralama işini yapabiliyoruz. Grid yapısı içinde order çok aranacak bir özellik değil gibi.

Grid ögelerinin sıralama özellikleri sadece görsel olarak etki eder. Kaynak kodunun sıralamasına etki etmediği için erişebilirlik açısından sorunlar çıkarabilir. Bu konuya dikkat etmek gerekir.

Kalın sağlıcakla.

Kaynaklar