Özet
Flexbox'a aşinaysanız Grid de size tanıdık gelebilir. Rachel Andrew, başlamanıza yardımcı olmak için CSS Izgarasına özel harika bir web sitesi sağlamaktadır. Grid artık Google Chrome'da kullanılabilir.
Flexbox mı? Izgara mı?
CSS Flexbox son birkaç yıldır yaygın olarak kullanılıyor ve tarayıcı desteği çok iyi görünüyor (IE9 ve altını desteklemesi gereken fakirlerden biri değilseniz). Flexbox, öğeler arasında eşit mesafeli boşluklar, yukarıdan aşağıya düzenler veya CSS sihirbazının kutsal alanı olan dikey ortalama gibi birçok karmaşık düzen görevini kolaylaştırdı.
Ancak maalesef ekranlar genellikle endişelenmemiz gereken ikinci bir boyuta sahiptir. Öğelerin boyutlarını kendiniz hallederseniz ne yazık ki yalnızca flexbox'ı kullanarak dikey ve yatay ritme sahip olamazsınız. CSS Grid tam da bu noktada yardım eder.
CSS Grid, 5 yılı aşkın bir süredir çoğu tarayıcıda bir işaretin arkasında geliştirme aşamasındaydı. Flexbox'ta olduğu gibi hatalı bir lansmanı önlemek için birlikte çalışabilirliğe ekstra zaman harcadı. Dolayısıyla, düzeninizi Chrome'da uygulamak için Grid kullanırsanız, Firefox ve Safari'de de aynı sonucu elde etme olasılığınız vardır. Bu yazma sırasında, Microsoft'un Edge uygulamasının ızgara uygulaması güncel değil (IE11'dekiyle aynı şekilde) ve güncelleme "değerlendiriliyor".
Konsept ve söz dizimi benzerliklerine rağmen, Flexbox ve Grid'i rakip düzen teknikleri olarak düşünmeyin. Izgara iki boyutta düzenlenirken Flexbox bir boyutta düzenlenir. İkisini birlikte kullanmak sinerji yaratır.
Izgara tanımlama
Izgara'nın özelliklerini yakından tanımak için Rachel Andrew'un Örneklere Göre Kılavuz veya CSS Püf Noktaları'nın Yardımcı Sayfası adlı eserini önemle tavsiye ederim. Flexbox'a aşinaysanız birçok özelliği ve anlamlarını da bilmeniz gerekir.
Standart 12 sütunlu bir ızgara düzenine göz atalım. Klasik 12 sütunlu düzen; 12 rakamı 2, 3, 4 ve 6'ya bölünebildiği için popülerdir ve bu nedenle birçok tasarım için kullanışlıdır. Şimdi şu düzeni uygulayalım:
İşaretleme kodumuzla başlayalım:
<!DOCTYPE html>
<body>
<header></header>
<nav></nav>
<main></main>
<footer></footer>
</body>
Stil sayfamızda, tüm görüntü alanını kapsayacak şekilde body öğemizi genişleterek ve bir ızgara kapsayıcısına dönüştürüyoruz:
html, body {
width: 100vw;
min-height: 100vh;
margin: 0;
padding: 0;
}
body {
display: grid;
}
Şimdi CSS Izgarasını kullanıyoruz. Tebrikler!
Sonraki adım, ızgaramızın satırlarını ve sütunlarını uygulamaktır. Modelimizdeki 12 sütunun tamamını uygulayabiliriz ancak her sütunu kullanmadığımız için bunu yapmak CSS'mizi gereksiz şekilde karmaşık hale getirir. Basitlik sağlaması için düzeni şu şekilde uygulayacağız:
Üstbilgi ve altbilginin genişliği ve içeriğin her iki boyutta da değişkendir. Gezinme alanı her iki boyutta da değişken olacaktır, ancak buna en az 200 piksellik bir genişlik uygulayacağız. (Neden? CSS ızgarasının özelliklerini göstermek için de tabii ki.)
CSS Izgarasında, sütun ve satır kümesine tracks adı verilir. İlk parça grubumuzu, yani satırları tanımlayarak başlayalım:
body {
display: grid;
grid-template-rows: 150px auto 100px;
}
grid-template-rows, bağımsız satırları tanımlayan bir boyut sırası alır.
Bu örnekte, ilk satıra 150 piksel, son satıra ise 100 piksel yüksekliğinde bir değer veririz.
Orta satır auto değerine ayarlanırsa ızgara öğelerini (ızgara kapsayıcısının alt öğeleri) barındırabilmek için gereken yüksekliğe ayarlanır. Vücudumuz görüntü alanının tamamına esnediğinden, içeriği içeren parça (yukarıdaki resimde sarı) en azından mevcut tüm alanı doldurur, ancak gerekirse büyür (ve dokümanı kaydırır).
Sütunlar için daha dinamik bir yaklaşım benimsemek istiyoruz: hem gezinme öğelerinin hem de içeriğin büyümesini (ve küçülmesini) ve nav modunun hiçbir zaman 200 pikselin altına inmemesini ve içeriğin nav'dan daha büyük olmasını istiyoruz. Flexbox'ta flex-grow ve flex-shrink kullanırdık ama Grid için bu biraz farklıdır:
body {
display: grid;
grid-template-rows: 150px auto 100px;
grid-template-columns: minmax(200px, 3fr) 9fr;
}
2 sütun tanımlıyoruz. İlk sütun, 2 değer alan minmax() işlevi kullanılarak tanımlanır: bu parçanın minimum ve maksimum boyutu.
(Birinde min-width ve max-width gibi). Minimum genişlik, daha önce de konuştuğumuz gibi 200 pikseldir. Maksimum genişlik 3fr karakterdir. fr, kullanılabilir alanı ızgara öğelerine dağıtmanıza olanak tanıyan tabloya özel bir birimdir.
fr muhtemelen "kesirli birim" anlamına gelir ama yakında serbest birim anlamına da gelebilir.
Buradaki değerlerimiz, her iki sütunun da ekranı dolduracak şekilde büyüyeceği anlamına gelir. Ancak içerik sütunu, her zaman gezinme sütunundan 3 kat daha geniş olur (gezinme sütununun 200 pikselden geniş kalması koşuluyla).
Izgara öğelerimizin yerleşimi henüz doğru olmasa da satır ve sütunların boyutu doğru şekilde davranır ve hedeflediğimiz davranışı verir:
Öğeleri yerleştirme
Izgara'nın en güçlü özelliklerinden biri, öğeleri DOM sırası dikkate almadan yerleştirebilmektir. (Yine de, ekran okuyucular DOM'da gezindiği için düzgün bir şekilde erişebilmeniz için öğeleri yeniden sıralarken dikkatli olmanızı önemle tavsiye ederiz.) Manuel yerleştirme yapılmazsa öğeler, DOM sırasında soldan sağa ve yukarıdan aşağıya doğru düzenlenmiş şekilde ızgaraya yerleştirilir. Her öğe bir hücre kaplar. Izgaranın doldurulma sırası grid-auto-flow kullanılarak değiştirilebilir.
Peki öğeleri nasıl yerleştiririz? Izgara öğelerini yerleştirmenin en kolay yolu muhtemelen hangi sütunları ve satırları kapsadıklarını tanımlamaktır. Izgara, bunu yapmak için iki söz dizimi sunar: İlk söz diziminde başlangıç ve bitiş noktalarını tanımlarsınız. İkincisinde bir başlangıç noktası ve bir aralık tanımlarsınız:
header {
grid-column: 1 / 3;
}
nav {
grid-row: 2 / span 2;
}
Başlığımızın ilk sütunda başlayıp 3. sütundan önce bitmesini istiyoruz. Gezinme bölmemiz ikinci satırda başlamalı ve toplamda 2 satır içermelidir.
Teknik olarak düzenimizi uygulamayı bitirdik ancak size, ızgaranın yerleşimi kolaylaştırmak için sunduğu birkaç kullanışlı özelliği göstermek istiyorum. İlk özellik, parkur kenarlıklarınıza ad verebilmeniz ve bu adları yerleşim için kullanabilmenizdir:
body {
display: grid;
grid-template-rows: 150px [nav-start] auto 100px [nav-end];
grid-template-columns: [header-start] minmax(200px, 3fr) 9fr [header-end];
}
header {
grid-column: header-start / header-end;
}
nav {
grid-row: nav-start / nav-end;
}
Yukarıdaki kod, önceki kodla aynı düzeni verir.
Izgaranızdaki bölgelerin tamamını adlandırma özelliği daha da büyük bir avantajdır:
body {
display: grid;
grid-template-rows: 150px auto 100px;
grid-template-columns: minmax(200px, 3fr) 9fr;
grid-template-areas: "header header"
"nav content"
"nav footer";
}
header {
grid-area: header;
}
nav {
grid-area: nav;
}
grid-template-areas, boşlukla ayrılmış bir ad dizesi alarak geliştiricinin her bir hücreye ad vermesini sağlar. Bitişik iki hücre aynı ada sahipse
aynı alanda birleştirilir. Bu şekilde, düzen kodunuza daha fazla anlamsallık sağlayabilir ve medya sorgularını daha sezgisel hale getirebilirsiniz. Bu kod da yine öncekiyle aynı düzeni oluşturur.
Daha fazlası var mı?
Evet, evet, tek bir blog yayınında anlatılacak çok fazla şey var. Aynı zamanda GDE pozisyonunda olan Rachel Andrew, CSS Çalışma Grubu'nda Davet Edilen Bir Uzman ve Grid'in web tasarımını basitleştirmek için en başından beri onlarla birlikte çalışmaktadır. Hatta üzerine bir kitap bile yazmış. Web sitesi Örneklerle Kılavuz, Grid'i tanımak için değerli bir kaynaktır. Birçok kişi Grid'in web tasarımında devrim niteliğinde bir adım olduğunu düşünüyor ve artık Chrome'da varsayılan olarak etkinleştirildiğinden, kullanmaya hemen başlayabilirsiniz.