Bir önceki yazıda;

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.

Tanımını yapmıştık ve detayını bu makaleye bırakmıştık. Öneminden dolayı fr birimini ayrı bir makalede incelemenin daha iyi olacağını düşündüm.

Jen Simmons‘ın yaptığı bir örnekle başlayalım. Örneği ilk olarak yüzde değerlerle çözmeye çalışalım ve sonra fr birimi ile çözelim. Aradaki farkı görelim.

İlk örneğimizde 3 kolon böldüğümüz bir alan düşünelim kapsayıcısı %100 olan.

Birinci örnekte işler gayet düzgün çalışır. 3 kolon var ve her kolon 33% değeri alıyor. (aslında 33.33% gibi bir değer olması gerekiyor ancak border değerleri için burada 33% yaptık.)

İkinci örnekte, kolonların yapışık olmaması için kolonların arasına boşluk verelim. Bunu dediğimizde hesaplamalar başlıyor. 2%’lik bir boşluk değeri belirleyelim. %2 boşluk değeri sonrası yatayda kaydırma çubuğu çıktı. Yatay çubuğu engellemek için şöyle bir hesap (100% - 4%) / 3 yapmamız gerekiyor.

grid-template-columns: calc((100% - 4%)/3) calc((100% - 4%)/3) calc((100% - 4%)/3);
grid-gap: 2%;

çözümü bulduk diye sevinirken, tasarımcıdan bir haber geldi “Bu güzelde mobilde boşluklar çok küçük kaldı bunu 2%’yi %3’e çıkaralım padding verelim” vs. gibi istekler sonrası bu yaptığımız hesapları hep güncellememiz gerekiyor. Bu noktada fr birimi yardımımıza yetişiyor. Aynı örneği fr ile yapalım.

Yaptığımız tanımla hiçbir hesaplamaya gerek duymadık. fr tanımı bizim yerimize diğer değerlerden sonra kalan alanı hesapladı ve sonucu üretti. Büyük kolaylık.

grid-template-columns: 1fr 1fr 1fr;
grid-gap: 3%;

fr birimi esnekliği

Yukarıdaki hareketli gif’te görüldüğü gibi grid-gap değerini her arttırdığımızda kutu genişlikleri otomatik olarak değişmektedir.

CSS Öğren CSS hakkında daha fazla bilgiye ulaşman çok kolay. CSS Dersleri sayfasında CSS hakkında bilmen gereken tüm bilgilere dair makale bulunuyor. Hemen Öğrenmeye Başla

fr birimi her zaman eşit grid alanları üretmez

fr birimi kullanılabilir boşlukları kullanır, ancak grid alanı içinde uzun içerik, resim veya video gibi kırılması mümkün olmayan alanların olduğu durumlarda fr birimi grid alanını bu içeriğe göre genişletir.

Bu gibi durumları istemiyorsak metinlerin bir alt satıra atılıp atılmadığına ve resim ve videoların esnek olup olmadığından emin olmalıyız.

Bunun için iki yol tercih edilebilir.

1. yol 1fr yerine minmax(0, 1fr) kullanmak.

2. yol Metinler için word-break: break-all ve resimler ve videolar için max-width:auto kullanarak bu durumu çözebiliriz.

fr değeriyle diğer değerleri birlikte kullanmak

fr birimi diğer birimlerle birlikte kullanılabilir.

Örneğin sağ kolonunda banner bulunan bir sayfada içeriği esnek bir değer alsın istersek.

grid-template-columns: 1fr 220px

İçerik alanına min-width değeri vererek çok küçük boyutlara gelmesi engellenebilir.

İşi biraz daha abartırsak.

grid-template-columns: 270px 1fr 2fr min-content;

Daha önce hesap yapmamız gereken veya kodlamakta zorlandığımız birçok sayfa planını kodlayabiliriz artık.

Dikeyde fr kullanımı

Şimdiye kadar ki tüm örnekleri yatayda versekte aynı kolaylığı dikeyde de sağladığını unutmayalım.

grid-template-rows: 120px 1fr 220px

süper değil mi?

Bunun dışında çok karmaşık sayfa planlarını fr birimi sayesinde daha kolay bir şekilde kodlayabiliriz. Dan Webb‘in yazısında anlattığı gibi bir sayfa planı örnek olarak verilebilir.

Karışık örnek resmi

https://danwebb.co/journal/how-to-build-complicated-grids-using-css-grid yazısı şimdilik karışık gelebilir, ama okumakta fayda var.

fr birimine ait diğer notlar

  • fr birimi sadece tam sayılar değil ondalık sayılarda da kullanılır. (Örnek: 1.5fr, 3.5fr gibi)

  • fr birimi sadece kapsayıcı grid için kullanılabilir bir birimdir. Belki ilerde yaygınlaşabilir.

  • fr birimi güzel imkanları olan bir birim. Bu güzel özelliği calc() ile kullanmak mümkün değil. Bunun nedeni fr birimi bir değer olarak değil esnek bir değer olarak tanımlanması.

  • fr birimi kullanılabilir boş alanı kullanır ancak hiçbir zaman kapsayıcı grid’in minimum genişliğinden küçük olamaz.

  • fr birimi boşlukları doldurur ancak asla satır veya kolon içeriğinden daha küçük olamaz.

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

Kaynaklar

Bir önceki yazıda CSS Grid‘e giriş yaptık ve grid ile gelen yeni terimleri öğrendik. İşin teorisini öğrenmeye devam edelim.

CSS Grid ile birlikte 17 adet özellik öğreneceğiz. Bunların bazıları daha önce bildiğimiz özellikler (grid hizalama özellikleri), bazılarıysa tamamen yeni özellikler. Bu özelliklerin yanı sıra yeni tanımlar, değerler ve birimler de öğreneceğiz.

Kapsayıcı grid ve grid ögesi özellikleri diye iki ana gruba ayıracağız özellikleri. Flex’e benzer bir yapı. Tümünü bir anda sunmak yerine bölüm bölüm tanıtmak daha iyi olur diye düşünüyorum.

Bu yazı içinde birçok yeni kavramla karşılaşacağız, bu kavramlara kısaca değinip sonraki yazılarda daha detaylı bahsedeceğim.


Grid container (kapsayıcı) Özellikleri     Grid ögesi özellikleri
grid-template-columns   grid-column-start
grid-template-rows   grid-column-end
grid-template-areas   grid-row-start
grid-template   grid-row-end
grid-column-gap   grid-column
grid-row-gap   grid-row
grid-gap   grid-area
justify-items   justify-self
place-items   align-self
justify-content   place-self
align-content    
place-content    
grid-auto-columns    
grid-auto-rows    
grid-auto-flow    
grid    

Yukarıdaki listeden kalın olarak işaretlediklerimi bu makalede inceleyeceğiz.

Kapsayıcı (container) bir grid oluşturduktan sonra sayfa planını oluşturmak için satır ve kolonları oluşturmanın bir kaç yöntemi var. Bu yöntemleri sırasıyla göreceğiz.

İlk olarak grid-template-columns ve grid-template-rows özelliklerini öğrenelim.

grid-template-columns özelliği

grid-template-columns CSS özelliği, oluşturduğumuz grid’in ızgara çizgi isimlerini (line name) ve ızgara kolonlarının iz boyutlandırma işlevini (track size) tanımlar. Atanan değerler ızgara iz listesi olarak adlandırılan boşluklarla ayrılmış değerleri ifade eder. Çizgi isimleri isteğe bağlıdır.

grid-template-columns

Yapısı : grid-template-columns: none | İz-listesi | Otomatik-iz-listesi
Aldığı Değerler : none | İz-listesi | Otomatik-iz-listesi
Başlangıç değeri: none
Uygulanabilen elementler: Kapsayıcı ızgaralara
Kalıtsallık: Yok

Aldığı değerler

  • none değeri: Başlangıç değeridir. Bu değer atanan kapsayıcı grid Explicit (Belirlenmiş) Grid kapsamının dışına çıkar. (grid-template-area özelliği ile Belirli Grid özellikleri kapsamına sokulmuş olabilir.) Explicit (Belirlenmiş) ve Implicit (Belirsiz) Izgaralar kavramlarını daha sonra daha detaylı anlatacağız.

  • İz listesi değer kümesi(track-list) / Otomatik iz listesi değer kümesi(auto-track-list) Değerler listesi her bir grid izinin boyutunu ve grid çizgisi ismini belirler.

    [ Grid çizgisi isimi ? [ İz boyutu İz tekrar işlevi ] ]+ Grid çizgisi isimi ?
    • grid iz boyut değerleri (track-size):
      • ölçü değerleri CSS uzunluk (px, em, vm vh, …) değerleri ve yüzde değerler. Tanımlanan değer kolon genişliğini belirler ve eksi değer alamaz. Örneğin 25%, 250px, 100vw gibi.
    - 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. İleride bu değere daha detaylı değineceğiz. fr birimi

       

    enter image description here

        - max-content: Izgara izi içindeki en geniş içerikli ögesinin değeridir. Metin bir alt satıra kaydırılmadan ölçülür. - min-content: Izgara izi içindeki ızgara ögesinin en az daraldığı durumdaki değeridir. Metin taşmadan daralabileceği en son noktadaki değerdir. - auto: En fazla max-content değeri kadar, en az min-content değeri kadar değer alır.

    • minmax(min, max): min değerine eşit veya daha büyük ve max değerden küçük veya ona eşit bir boyut aralığı tanımlar. Eğer max değeri min değerinden küçükse max değeri yok sayılır ve fonksiyon min değeri olarak kabul edilir.
    • fit-content (ölçü değeri yüzde değeri) Belirlenen değer max-contentdeğerinden büyükse max-contentdeğerini alır, grid ögesi en az auto değeri kadar olur. minmax(auto, max-content) şeklinde formulize edilmiş.
    • inherit: Kalıtsal olarak aldığı değere döner. ebeveyninden aldığı değere döndürür.

    • initial: Başlangıç değerine döndürür.

    • unset: Bu değer kısmen inherit kısmen initial değeri gibi davranır. Kalıtsal olarak ebeveyninden gelen değerleri alırken kalıtsal olarak gelmeyen değerlerde initial gibi davranıp başlangıç değerini alır.
  • repeat() işlevsel değeri Tekrarlanan içerikli sayfa yapısından kolonları daha basit ve anlaşılır kılan bir değer yapısıdır. Bu işlevselliği bize repeat() fonksiyonunu sağlar.

grid-template-columns: 30px 100px 30px 100px 30px 100px 30px 100px;
    
/* yukaridaki kodu repeat fonksiyonu ile yazalim * /
    
grid-template-columns: repeat(4, 30px 100px);
    
  • Grid çizgisi ismi: Projeler büyüdükçe tanımlanan değerler anlamsız olmaya başlayıp kod okunurluğu düşer. Bu durumun önüne geçmek için grid çizgilerini adlandırıp tanımlarımızın içinde kullanırız. Verdiğimiz bu isimlere grid çizgi ismi denir.
grid-template-columns: [menu-start] 150px [menu-end icerik-start] 1fr [icerik-end banner-start] 1fr [banner-end];

daha anlaşılır bir yapı. Bu isimleri daha sonra kodumuz içinde kullanabilmemiz de ayrı bir güzellik.

Aldığı değerleri burada bitirdik.

Aldığı değerlerin yetenekleri için MDN’nin örneklediği listeye göz atalım.

/* Başlangıç değeri */
grid-template-columns: none;

/* <track-list> Grid iz değer kümesi */
grid-template-columns: 100px 1fr;
grid-template-columns: [linename] 100px;
grid-template-columns: [linename1] 100px [linename2 linename3];
grid-template-columns: minmax(100px, 1fr);
grid-template-columns: fit-content(40%);
grid-template-columns: repeat(3, 200px);

/* <auto-track-list> Otomatik grid iz değer kümesi */
grid-template-columns: 200px repeat(auto-fill, 100px) 300px;
grid-template-columns: minmax(100px, max-content)
                       repeat(auto-fill, 200px) 20%;
grid-template-columns: [linename1] 100px [linename2]
                       repeat(auto-fit, [linename3 linename4] 300px)
                       100px;
grid-template-columns: [linename1 linename2] 100px
                       repeat(auto-fit, [linename1] 300px) [linename3];

/* Genel değerler */
grid-template-columns: inherit;
grid-template-columns: initial;
grid-template-columns: unset;

Basit bir örnekle özelliği anlayalım.

Kodu incelediğimizde .kapsayici seçicisine tanımlanan display: grid; ve grid-template-columns: 25% 25% 25% 25%; tanımları bize 4 kolonlu ve her kolon genişliği 25% olan bir sayfa planı oluşturdu.

CSS grid’in en büyük özelliği iki eksenli sayfa planı olduğu için tam olarak giriş yapmak için birde satır eklemeyi öğrenmemiz gerekiyor.

grid-template-rows özelliği

grid-template-rows CSS özelliği, oluşturduğumuz grid’in ızgara çizgi isimlerini (line name) ve ızgara satırlarının iz boyutlandırma işlevini (track size) tanımlar. Atanan değerler ızgara iz listesi olarak adlandırılan boşluklarla ayrılmış değerleri ifade eder. Çizgi isimleri isteğe bağlıdır.

grid-template-rows

   

Yapısı : grid-template-rows: none | İz-listesi | Otomatik-iz-listesi
Aldığı Değerler : none | İz-listesi | Otomatik-iz-listesi
Başlangıç değeri: none
Uygulanabilen elementler: Kapsayıcı ızgaralara
Kalıtsallık: Yok

   

Alın size çubuklu forma :) grid-template-s: 100vh; tanımı bize bir satır olacağını ve bu satır yüksekliğinin de ekran yüksekliği ile eşit olacağını gösterir. Genişlik ve yükseklik olarak esnek bir sayfa planımız oldu. Hemde 3 satır kod ile.

grid-template-rows özelliğini anlamak için örneğe ufak ek daha yapalım.

Büyük ekranlarda 4 kolon tek satır olan ekran küçük ekranlarda 2 satır 2 kolon olacak şekilde kod yazdık.

CSS Grid’in kazanımların biri de uyumlu web için yazdığımız kod sayısını azaltmasıdır. Bu sayede grid sistemleri için bootstrap, foundation, 960grid gibi yapılara gerek kalmıyor. Çünkü grid alanlarınızı kendiniz sistematik olarak kodlayabiliyorsunuz.

grid-gap, grid-column-gap ve grid-row-gap

grid-gap, grid-column-gap ve grid-row-gap tanımları ızgara çizgisinin kalınlığını belirler. İkisini ayrı ayrı tanımlaya bildiğimiz gibi grid-gap kısayoluyla iki değeri tek özellikle de tanımlaya biliriz.

CSS Çoklu kolon özelliğinden bildiğimiz column-gap özelliğine benzer bir yapıdadır. Çoklu kolonlarda sadece kolon düşünüldüğü için özellik column-gap olarak tanımlanmış, ancak grid iki eksenli olduğu için grid-column-gap ve grid-row-gap olarak tanımlanmıştır. Çok kullanışlı bir özellik. Flex’e de geleceği konuşuluyor.

Yapısı : grid-gap: <‘grid-row-gap’> <‘grid-column-gap’>?
Aldığı Değerler : değer | yüzde değer
Başlangıç değeri: 0
Uygulanabilen elementler: Kapsayıcı ızgaralara
Kalıtsallık: Yok

   

Grid özelliklerini, değerlerini, birimlerini ve tanımlarını öğrenmeye devam edeceğiz. Şimdiye kadar öğrendiklerimizle birşeyler deneyerek CSS grid özelliklerini pekiştirmekte fayda var.

Kaynaklar

CSS Grid (Izgara) hakkında bir şeyler yazmaya daha önce karar verdim. Ancak CSS’in diğer konularına göre öğrenmesi biraz daha zor olan bu konuyu anlatmak da zor. 17 tane özelliği ve yeni terimleriyle anlaşılması zor bir konu. Nereden nasıl başlayacağım konusunda kararsız kaldım. Nihayet bu ilk yazıyla ilk adımı attım. Bu yazıda giriş yazısı ve terminolojiyi anlatmaya çalışacağım.

2011 yılında Microsoft ekibi tarafından W3C’ye önerildi ve ilk olarak IE10 -ms öneki ile adapte edildi. Ben de ilk olarak Microsoft tarafından geliştiriliyor olmasıyla biraz mesafeli yaklaştım. Malum Internet Explorer ile yaşadığımız kötü geçmişimizden kaynaklı. Zamanla CSS Grid’e alıştım.

Giriş

CSS uzun süre önce sayfa planını HTML’den (tablo ile sayfa planı yaptığımız günler) aldı. float kullanımı ve position değerleri ile sayfa planları oluşturduk ancak bazı konularda (dikey de ortalama gibi, eşit yükseklikte kolonlar ve tuğla yapılı (masonry) sayfa planlarını oluşturmak gibi ihtiyaçlar için farklı çözümler denememiz gerekti) sorunlara rağmen CSS bu konuda bayağı yol kat etti. Sonra flex ile bu sorunlara bazılarına çözümler bulduk.

Sayfa planları bir çerçeve içine alınacak ve basitçe çözülecek yapılar değildir. Çok farklı tiplerdeki sayfa planlarını kapsayacak bir çözüm aradı standart geliştiriciler (W3C). Uyumlu web ile birlikte zorluk derecesi daha da arttı. Artık esnek yapılı sayfa planlarını da kapsayan çözümler gerekiyor. Bu sorunları çözmek için çeşitli standartlar geliştirildi. Son çıkan çözüm CSS Grid Sayfa Planlama Modülü.

Sayfa planlama konusunda grid ile birlikte önemli kazanımlarımız oldu. Bunların başında float ve flex ile devam eden tek eksenli sayfa planlamaları yerine iki eksenli sayfa planlamasını yapabiliyoruz artık.

İki eksenli sayfa planlamayı en son tablo ile sayfa planı oluştururken kullanıyorduk. Tekrar iki eksenli sayfa planlama metoduyla sayfalarımız kurgulamamız gerekiyor. Bu tek eksenli planlamaya göre büyük kolaylıklar sağlıyor. Bu arada aklınıza tablo ile iki eksenli sayfa planı yapıyorduk niye grid’e gerek var demeyin. Tablo yapıları çok sabit yapılardı esnek ve üzerine geçen sistemler için çok uygun değildi.

İki eksenli sayfa planlamanın uyumlu (responsive) web geliştirmelerinde büyük kolaylığı var. Örneğin mobilde en alt sırada olan bir öğeyi masaüstünde sağ üste koymak grid öncesinde zordu. İki eksenli sayfa planından sayfadaki tüm ögeler ve sıralaması html’deki yerinden bağımsız şekilde sıralana biliyor ve farklı özellikleri tanımlanabiliyor. Süper değil mi?

Tüm interneti düşününce tüm sayfa planlarına çözüm bulmak çokta kolay bir şey değildir. Grid bunu yapmak için ortaya çıktığı için anlaşılması diğer CSS özelliklerine göre nispeten daha zor bir konu oldu. İş karmaşık olunca haliyle çözümü de biraz karmaşıklaşıyor. Basit sayfa planlarını yapmak için basit iki satırlık kodlar yeterli olurken karmaşık sayfa planlarını oluştururken biraz işin inceliklerini bilmek gerekiyor.

Makalenin ve yazı dizisinin devamında CSS Grid Sayfa Planı Modülü kısaca Grid olarak adlandırılacaktır.

CSS Grid (Izgara) Modülü Terimleri

Bir işe girişirken önce o işin terimlerine bilmekte fayda var deyip hemen Izgara modülünün terimlerine göz atalım.

CSS Grid Modülü terimleri

Grid container (Kapsayıcı Izgara) ve Grid item (Izgara ögesi) tanımlarıyla başlayalım. Flex özellikleriyle benzer bir yapıdır. Flex yapılara alışık olanlar için yabancılık çekilmeyecek terimler.

Grid container; kapsadığı elemanları ızgara öğesi haline getirir. Grid davranışı grid container tanımıyla başlar.

Grid container display özelliğine aşağıdakilerden biri tanımlayınca oluşur.

  • display: grid tanımlanan elemanı blok bir ızgara kapsayıcı yapar
  • display: inline-grid tanımlanan elemanı satır içi bir ızgara kapsayıcı yapar
  • display: subgrid tanımlanan eleman hem ızgara öğesi hemde bir ızgara kapsayıcısı olur

Dikkat: subgrid değeri CSS Grid Layout Level 2 ile birlikte gelecek, henüz hiçbir tarayıcı desteklemiyor.

Kapsayıcı Izgara elemanı atamasından sonra birinci seviye altındaki tüm çocuk elemanları birer grid ögesi olur.

Grid tanımı yapıldıktan sonra görünümde bir fark yoktur. Bu ilk aşamadıki farkı ancak tarayıcının geliştirici araçlarında görebiliriz.

enter image description here Firefox geliştirme aracında elemanı seçince ızgara şeklinde bir ikon çıkıyor. Bu ikonu tıklayınca görüntü aşağıdaki gib oluyor.

enter image description here

Grid line (Izgara çizgileri)

Grid Line (Izgara çizgileri); ızgarayı yatay ve dikeyde bölen çizgilerdir. Her bir ızgara çizgisi, grid container’ın en dış kenarından başlayarak sırasıyla bir numara verir. Numara vermeye 1’den başlar. Yukarıdaki Firefox geliştirici aracı görüntüsünde bu sayıları görüyoruz. Kodumuzu yazarken her bir ızgara hücresini bu numaraları referans alarak yerleştirebiliriz. İlerideki örneklerde bunu göreceğiz.

grid line

Grid track (Izgara izi)

İki çizgi arasındaki alanları ifade etmek için kullanılır. Yatay ve dikey olabilir. Izgara satır ve kolonlarını kapsayan bir terimdir.

grid track

Grid cell (Izgara ögesi)

Izgara kapsayıcı içindeki en küçük yapıdır. Dört tarafı ızgara çizgileri ve boşluklarla kaplı olan ızgara birimidir.

grid cell

Grid Areas (Izgara alanı)

Izgara alanı dört ızgara çizgisi arasında kalan alandır. Bir ve birden fazla ızgara biriminden oluşur. Her ızgara ögesi aynı zamanda bir ızgara alanıdır diye biliriz.

grid areas

Tarayıcı desteği

Tarayıcı desteği konusunda çok güzel yerlerde CSS Grid Modülü. Makaleyi yazdığım bugün baktığımda %92’lik bir desteği vardı.

Tarayıcı Desteği

Chrome explorer Firefox
+ + +

Mobil Tarayıcılar

Chrome Mobil Safari Samsung Internet
+ + 6.4+

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

Kaynaklar