tarihinde Fatih Hayrioğlu

CSS, tanımları, değerleri ve birimleri W3C tarafından belirlenen bir standarttır.

body {
    font-size: 16px;
}

özellik (font-size), değer (16) ve birim (px) W3C tarafından belirlenir.

CSS Grid modülündeyse bu kuralı değiştirip kullanıcının girdiği bazı değerleri anlamlandırmıştır. Grid isimlendirme başlığı altında anlatacağımız bu tanımlar birazının bizim birazının W3C’nin belirlediği isimlerdir.

Bu makalede daha önce grid özellikleri yazımızda kısaca bahsedip geçtiğimiz grid çizgisi isimlendirmesi ve kullanımını göreceğiz.

Kendi belirlediğimiz değerlerin CSS’te kullanılması alışık olmadığımız durumlar olduğu için başta garipseyebiliriz ancak alışınca güzel oluyor.

CSS Grid Modülü terimleri

CSS Grid örneklerinde grid çizgisini belirleyen rakamlar yerine isimleri kullanmak daha okunaklı olmasını sağlar.

Basit yapılı grid kodlarında çok ihtiyaç duymasak ta daha gelişmiş yapıdaki sayfa planlarının geliştirilmesi ve yönetilmesinde grid çizgi isimleri işe yarıyor.

Bu tanımları yorum satırıyla çözemez miydik? Evet çözerdik ama buradaki tanımları yeri geldiğinde grid hücre ve alanlarını konumlandırırken kullanabiliyoruz. Bizim belirlediğimiz isimleri bir CSS değeri gibi kullanacağız.

İnsanlar rakamlara göre isimleri daha anlaşılır bulur.

CSS grid, sayfa yapılarımızı daha kolay oluşturmamızı sağlar. Üç kolonlu bir sayfa planını nasıl yapacağımızı görelim. Bu örnek üzerinde grid çizgi isimlendirmeyi anlatmaya çalışalım.

<main>
  <header></header>
  <aside></aside>
  <div class="content"></div>
  <div class="banner"></div>
  <footer></footer
</main>

HTML’imiz yukarıdaki gibi olur.

CSS kodunu yazmadan önce sayfa yapısını düşünelim.

3 kolonlu bir sayfa planımız olacak, yani grid-template-columns özelliğine 3 adet tanım yapacağız. 3 adet de satır olacak grid-template-rows özelliğine 3 tanım yapacağız.

Belirlediğimiz bu 3 kolonun genişlikleri sabit genişlik olarak belirlendiyse tek tek bu genişlikleri tanımlarız ama esnek bir yapı olsun istersek dikeyde tahminen 10 parça bir alanımız olsa bunları içeriklerine göre 3 e bölersek 3 birim 5 birim ve 2 birim gibi bir sonuç çıkar. Kolon kodumuz grid-template-columns: 3fr 5fr 2fr olur.

Gelelim satırları belirlemeye satır yüksekliği genelde içeriğe göre şekillenir ancak biz satır yüksekliklerini de esnek 3 parçaya bölelim. Yükseklik tanımlarında ilk olarak gösteren aracın yüksekliğini almak için height: 100vh tanımlarız. 11 parçaya bölüp gelecek içeriğe göre 3’e bölersek satırları grid-template-rows: 3fr 6fr 2fr şeklinde paylaştırabiliriz.

Kodumuz aşağıdaki gibi olacaktır.

.kapsayici {
  display:grid;
  grid-template-columns: 3fr 5fr 2fr;
  grid-template-rows: 3fr 6fr 2fr;
  grid-gap: 15px;
  height: 100vh;
}

Yukarıdaki gibi bir sonuç çıkar. Burada <header> ve <footer> alanlarının tam satırı kaplayacak şekilde genişletmemiz gerekiyor. CSS Grid ile bunu yapmanın birçok yöntemi var. Şimdiye kadar anlatmadığımız ve ilerde anlatmayı planladığımız grid ögesi özellikleri yardımıyla bu işi yapalım.

grid çizgi numaraları

main header {
  grid-column: 1 / 4;
  grid-row: 1;
}

main footer {
  grid-column: 1 / 4;
  grid-row: 3;
}

İstediğimiz sonucu elde ettik.

Kodu biraz yorumlarsak. Grid çizgilerine tarayıcılar yukarıda görüldüğü gibi rakamlar atar. Biz bu rakamları kullanarak grid ögelerimizi ve grid alanlarımızı konumlandırabiliyoruz. <header> için yaptığımız tanımda grid-column: 1 / 4 tanımı header elemanının kolon yerleşiminin grid çizgisinin 1.’sinden başlayıp 4.’ünde sonlandığını belirtiyor. grid-row tanımıysa header elemanının dikey grid çizgisinin 1.’sinde olduğunu gösteriyor. Aslında burada da başı ve sonu olarak tanımlayabilriz, grid-row: 1/2 şeklinde. Buradaki yazım kısayoludur.

Benzer şekilde footer elemanına da tanımlar yaptık tek fark footer elemanı dikeyde 3. satırın sonrasında olması.

Grid İsimlendirme

Gelelim bizim konumuza, buradaki örneğimiz çok basit bir 3 kolon 3 satırlı bir örnekti. Bir çok projede durum çok daha karmaşık hal alır. Karmaşık yapılı sistemlerde bu rakamlar bize anlamsız gelir. Bunun çözümü Grid Çizgi İsimlerini kullanmaktan geçiyor.

Yukarıdaki örneği çizgi isimlerini kullanarak yapalım.

grid çizgi isimleri

grid-template-columns: [sol-menu-star] 3fr [icerik-start] 5fr [banner-alani-start] 2fr;

şeklinde tanımlarımızı isimlendirerek koda anlam kattık. Tanımlara dikkat edersek başını bizim belirlediğimiz ama sonu sabit isimlerdir.

*-start

gibi. Aynı şekilde

*-end

kullanımı da çizgi ismi bitişi için kullanılır. Tanımlarımızı köşeli parantez [] içinde kullanıyoruz. Bu tanımları sadece başlangıç değerleriyle yapabildiğimiz gibi başlangıç ve bitiş değerlerini yazarak da yapabiliriz.

Izgara çizgi isimlerinde CSS’in kullandığı anahtar kelimler kullanılamaz auto ve span vd.

grid-template-columns: [sol-menu-start] 3fr [sol-menu-end icerik-start] 5fr [icerik-end banner-alani-start] 2fr [banner-alani-end];

Kodumuz daha da anlamlı hale geldi.

Aynı şekilde dikeydeki çizgi isimlerini kullanarak satır tanımlarımızı da güncelleyelim.

grid-template-rows: [ust-alan-start] 3fr [ust-alan-end icerik-start] 6fr [icerik-end alt-alan-start] 2fr [alt-alan-end];

Grid isimlendirmenin kodu anlamlandırmanın dışında CSS değeri olarak atanma özelliği de vardır. Yine yukarıdaki örnekle devam edelim. <header> ve <footer> için yaptığımız tanımları aşağıdaki gibi değiştirelim.

main header {
  grid-column: [sol-menu-start] / [banner-alani-end];
  grid-row: [ust-alan-start];
}

main footer {
  grid-column:[sol-menu-start] / [banner-alani-end] ;
  grid-row: [alt-alan-start alt-alan-end];
}

Tanımladığımız isimlerin işlevsel olarak kullanılıyor olması süper bir avantaj. Rakam yerine isim kullanmak anlaşılabilirliği arttırıyor.

Uyumlu (responsive) web öncelikli bir kod yapısı kullanırsak

Mobil öncelikli bir yapı ve uyumlu web kodlarını eklersek kod rakamlı kullanım için daha da karmaşıklaşır. Ancak isimlendirme ile yapılan uyumlu web kodları bu karışıklığı da önleyerek işimizi kolaylaştırıyor.

Uyumlu web kodlarken grid-template-area ile yazmak daha kolay ve avantajlı ancak bu yazıda bahsettiğimiz gibi bir seçeneğin olduğunu bilmek güzel.

Kalın sağlıcakla.

Kaynaklar

  • https://www.w3.org/TR/css-grid-1/#named-lines
  • https://www.joomlashack.com/blog/tutorials/how-to-name-grid-lines/
  • https://webdesign.tutsplus.com/tutorials/quick-tip-name-your-css-grid-lines-just-in-case–cms-27844
  • https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Grid_Layout/Layout_using_Named_Grid_Lines
  • https://gedd.ski/post/naming-css-grid-lines/
  • https://www.smashingmagazine.com/2017/10/naming-things-css-grid-layout/
  • https://learncssgrid.com/#naming-positioning-lines-same-name
  • https://www.youtube.com/watch?v=mQ5r8u1bT50
  • https://mozilladevelopers.github.io/playground/css-grid/09-named-lines
  • https://codepen.io/airen/pen/RGkXqZ?editors=1100
  • https://rachelandrew.co.uk/archives/2013/04/29/css-grid-layout-named-grid-lines-and-areas/
  • https://www.smashingmagazine.com/2017/10/naming-things-css-grid-layout/
tarihinde Fatih Hayrioğlu

React’ı yeni yeni öğreniyorum. Öğrenirken en çok başlıkta yazdığım hatayla karşılaştım. Kendime ve size not düşerek aklımızın bir kenarında durmasını sağlamak için böyle bir not tutayım dedim.

import React, { Component } from 'react'

class BasitOrnek extends Component {
  render() {
    return (
       <h1>{this.props.title}</h1>
       <p>{this.props.description}</p>
    )
  }
}

şeklinde return içinde iki elemanlı tanımlama yaptığımızda React

…ContentDetail.jsx: Adjacent JSX elements must be wrapped in an enclosing tag. Did you want a JSX fragment <>…</>? (72:16)

Yukarıdaki hatayı veriyor. Aslında hatada ne yapmamız gerektiğini de söylüyor. React jsx içinde return içinde birden fazla öge dönmeye izin vermiyor. Döneceksen bir tek sen dön diyor :)

React eğitim videolarını izlerken bunu belirtmişti eleman ama unutuyor insan. Çözüm bu elemanları saran kapsayıcı bir <div> tanımlamak.

import React, { Component } from 'react'

class BasitOrnek extends Component {
  render() {
    return (
       <div>
	       <h1>{this.props.title}</h1>
	       <p>{this.props.description}</p>
       </div>
    )
  }
}

React v16.2 ile birlikte daha da basit bir çözüm gelmiş.

import React, { Component } from 'react'

class BasitOrnek extends Component {
  render() {
    return (
       <>
	       <h1>{this.props.title}</h1>
	       <p>{this.props.description}</p>
       </>
    )
  }
}

Sadece <> ve </> ile daha basit kullanımı var. Bu kullanım için Babel 7+ gerekiyormuş.

Kaynaklar

tarihinde Fatih Hayrioğlu

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://medium.com/@danwebb/how-to-build-complicated-grids-using-css-grid-609b1197cf75 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