Özet
Flexbox'a aşinasanız Grid'i de kolayca anlayabilirsiniz. Rachel Andrew, başlangıç yapmanıza yardımcı olmak için CSS Grid'e özel harika bir web sitesi işletiyor. Grid artık Google Chrome'da kullanılabilir.
Flexbox? Izgara?
CSS Flexbox son birkaç yılda yaygın olarak kullanılmaya başlandı ve tarayıcı desteği oldukça iyi (IE9 ve önceki sürümleri desteklemek zorunda kalan talihsizlerden biri değilseniz). Flexbox, öğeler arasındaki eşit mesafeli boşluklar, yukarıdan aşağıya düzenler veya CSS sihirbazlığının kutsal kasesi olan dikey merkezleme gibi birçok karmaşık düzen görevini kolaylaştırdı.
Ancak ekranların genellikle endişelenmemiz gereken ikinci bir boyutu vardır. Öğelerin boyutlarını kendiniz belirlemediğiniz sürece, ne yazık ki yalnızca flexbox'u kullanarak hem dikey hem de yatay bir ritim elde edemezsiniz. İşte bu noktada CSS Grid devreye girer.
CSS Grid, 5 yıldan uzun süredir çoğu tarayıcıda bir işaretin arkasında geliştiriliyordu ve Flexbox'ta olduğu gibi hatalı bir lansmandan kaçınmak için birlikte çalışabilirlik üzerinde fazladan zaman harcanıyordu. Dolayısıyla, düzeninizi Chrome'da uygulamak için Grid'i kullanırsanız, Firefox ve Safari'de aynı sonucu alma ihtimaliniz yüksektir. Bu yazının yazıldığı sırada, Microsoft'un Edge Grid uygulaması güncelliğini yitirmiş (IE11'de bulunanlarla aynı). Güncelleme "üzerinde değerlendiriliyor".
Kavram ve söz dizimi açısından benzerliklerine rağmen Flexbox ve Grid'i rekabet halindeki düzen teknikleri olarak düşünmeyin. Izgara iki boyutta düzenlenirken Flexbox bir boyutta düzenlenir. İkisini birlikte kullandığınızda sinerji elde edersiniz.
Izgara tanımlama
Grid'in bağımsız özelliklerini tanımak için Rachel Andrew'un Grid by Example veya CSS Tricks Cheat Sheet'i öneririm. Flexbox'a aşinaysanız özelliklerin çoğu ve anlamları size tanıdık gelecektir.
Standart 12 sütunlu ızgara düzenine bakalım. 12 sayısı 2, 3, 4 ve 6'ya bölünebildiğinden klasik 12 sütunlu düzen popülerdir ve bu nedenle birçok tasarım için kullanışlıdır. Ş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, body öğemizi tüm görüntü alanını kapsayacak şekilde genişletip ızgara kapsayıcıya dönüştürerek başlıyoruz:
html, body {
width: 100vw;
min-height: 100vh;
margin: 0;
padding: 0;
}
body {
display: grid;
}
Artık CSS Grid kullanıyoruz. Yaşasın!
Bir sonraki adım, ızgaramızın satırlarını ve sütunlarını uygulamaktır. Modelimizde 12 sütunun tümünü uygulayabiliriz, ancak her sütunu kullanmadığımız için bunu yapmak CSS'mizi gereksiz yere karmaşık hale getirir. Kolaylık açısından düzeni şu şekilde uygulayacağız:
Üstbilgi ve altbilginin genişliği ve içeriğin de iki boyutta da değişkenliği vardır. Gezinme menüsü de her iki boyutta da değişken olacaktır ancak minimum genişliği 200 piksel olarak belirledik. (Neden? Elbette CSS Grid'in özelliklerini göstermek için.)
CSS Grid'de sütun ve satır grubuna parça denir. İ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 dizisi alır.
Bu durumda, ilk satıra 150 piksel, son satıra ise 100 piksel yükseklik veririz.
Ortadaki satır auto olarak ayarlanmıştır. Bu, satırdaki ızgara öğelerini (ızgara kapsayıcının alt öğeleri) barındırmak için gerekli yüksekliğe ayarlanacağı anlamına gelir. Gövdemiz görüntü alanının tamamına yayıldığı için içeriği içeren parça (yukarıdaki resimde sarı renkli) en azından mevcut tüm alanı doldurur ancak gerekirse büyür (ve dokümanı kaydırmaya başlar).
Sütunlar için daha dinamik bir yaklaşım uygulamak istiyoruz: Hem gezinme hem de içeriğin büyümesini (ve küçülmesini), ancak gezinmenin hiçbir zaman 200 pikselin altına daralmasını ve içeriğin de gezinmeden daha büyük olmasını istiyoruz. Flexbox'ta flex-grow ve flex-shrink özelliklerini kullanırız ancak Grid'de 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, minmax() işlevi kullanılarak tanımlanır. Bu işlev 2 değer alır: İlgili parçanın minimum ve maksimum boyutu.
(Örneğin min-width ve max-width var.) Daha önce de konuştuğumuz gibi minimum genişlik 200 pikseldir. Maksimum genişlik 3fr olmalıdır. fr, kullanılabilir alanı ızgara öğelerine dağıtmanıza olanak tanıyan ızgaraya özgü bir birimdir. fr muhtemelen "fraction unit" (kesirli birim) anlamına gelir ancak yakında ücretsiz birim anlamına da gelebilir.
Buradaki değerlerimiz, her iki sütunun da ekranı dolduracak şekilde büyüyeceği, ancak içerik sütununun her zaman gezinme sütunundan 3 kat daha geniş olacağı anlamına gelir (gezinme sütununun 200 piksel genişliğinden daha 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ıyor ve amaçladığımız davranışı sağlıyor:
Öğeleri yerleştirme
Grid'in en güçlü özelliklerinden biri, DOM sırasına bakılmaksızın öğeleri yerleştirebilmesidir. (Ancak ekran okuyucular DOM'da gezindiği için, düzgün bir şekilde erişilebilir olması amacıyla öğeleri nasıl yeniden sıraladığınıza dikkat etmenizi önemle tavsiye ederiz.) Manuel yerleştirme yapılmazsa öğeler, DOM sırasına göre Izgaraya soldan sağa ve yukarıdan aşağıya olacak şekilde yerleştirilir. Her öğe bir hücre kaplar. Izgaranın doldurulma sırası grid-auto-flow kullanılarak değiştirilebilir.
Öğeleri nasıl yerleştiririz? Izgara öğelerini yerleştirmenin en kolay yolu, hangi sütunları ve satırları kapsadıklarını tanımlamaktır. Grid, 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 kapsam tanımlıyorsunuz:
header {
grid-column: 1 / 3;
}
nav {
grid-row: 2 / span 2;
}
Başlığımızın ilk sütunda başlamasını ve 3. sütundan önce bitmesini istiyoruz. Gezinme menümüz ikinci satırda başlamalı ve toplam 2 satır sürmelidir.
Teknik olarak düzenimizi uygulamayı tamamladık ancak Grid'in yerleşimi kolaylaştırmak için sunduğu birkaç kolaylık özelliğini göstermek istiyorum. İlk özellik, parça kenarlarınızı adlandırıp 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 oluşturur.
Şebekenizdeki bölgelerin tamamını adlandırma özelliği daha da güçlüdü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, geliştiricinin her hücreye ad vermesine olanak tanıyan, boşlukla ayrılmış bir ad dizesi alır. Bitişik iki hücrenin adı aynıysa aynı alanda birleştirilir. Bu şekilde, düzen kodunuza daha fazla anlam getirebilir ve medya sorgularını daha sezgisel hale getirebilirsiniz. Bu kod da öncekiyle aynı düzeni oluşturur.
Başka bir konu var mı?
Evet, evet var. Tek bir blog yayınında ele alınabilecek çok fazla konu var. GDE olan Rachel Andrew, CSS Çalışma Grubu'nda davetli uzmandır ve Grid'in web tasarımını basitleştirmesini sağlamak için en başından beri onlarla birlikte çalışmaktadır. Hatta bu konuda bir kitap bile yazdı. Grid By Example adlı web sitesi, Grid'e aşina olmak için değerli bir kaynaktır. Pek çok kişi Grid'in web tasarımında devrim niteliğinde bir adım olduğunu düşünür. Şu anda Chrome'da varsayılan olarak etkinleştirildiği için Grid'i hemen kullanmaya başlayabilirsiniz.