Özet
Flexbox'a aşinaysanız Grid size tanıdık gelecektir. Rachel Andrew, başlamanıza yardımcı olacak CSS Izgarasına özel bir web sitesi sunmaktadır. Izgara artık Google Chrome'da kullanılabilir.
Flexbox mı? Izgara mı?
Geçtiğimiz birkaç yılda, CSS Flexbox yaygın olarak kullanıldı ve tarayıcı desteği gerçekten iyi görünüyor (IE9 ve altını desteklemesi gereken fakir ruhlardan biri değilseniz). Flexbox, öğeler arasındaki eşit mesafe, yukarıdan aşağıya düzenler veya CSS büyücülüğünün mükemmel yolu: dikey ortalama gibi pek çok karmaşık düzen görevini kolaylaştırdı.
Ama ne yazık ki ekranlar genellikle endişelenmemiz gereken ikinci bir boyuta sahip. Ne yazık ki öğeleri kendiniz boyutlandırmanız yeterli değil. Ne yazık ki sadece flexbox'ı kullanarak dikey ve yatay ritmi hem kullanamazsınız. Bu noktada CSS Grid devreye giriyor.
CSS Grid, 5 yıldan uzun süredir çoğu tarayıcıda bir işaret arkasında kalmıştır. Flexbox gibi hatalı bir lansmandan kaçınmak için birlikte çalışabilirlik üzerinde daha fazla zaman harcanmıştır. 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 benzerlikleri olsa da Flexbox ve Grid'i birbiriyle rekabet eden düzen teknikleri olarak düşünmeyin. Izgara iki boyutlu olarak düzenlenirken Flexbox bir boyutta düzenler. Bu ikisi birlikte kullanıldığında sinerji ortaya çıkar.
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ı hakkında bilgi sahibi olmanız gerekir.
Şimdi standart 12 sütunlu ızgara düzenine bakalım. 12 sayısı 2, 3, 4 ve 6'ya bölündüğünden, 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;
}
Şimdi CSS Izgarasını kullanıyoruz. Tebrikler!
Bir sonraki adım, ızgaramızın satır 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 sağlaması 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, her iki boyutta da değişken olacaktır ancak üzerine 200 piksellik bir minimum genişlik uygulayacağız. (Neden? Tabii ki, CSS Izgarasının özelliklerini gösterelim.)
CSS ızgarasında, sütun ve satır kümesine kanallar 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 dizisini alır.
Bu örnekte, ilk satır için 150 piksel, son satırın yüksekliği de 100 piksel olur.
Orta satır auto olarak ayarlanır. Bu, satırdaki ızgara öğelerini (ızgara kapsayıcısının alt öğeleri) yerleştirmek için gerekli yüksekliğe ayarlanacağı anlamına gelir. Vücudumuz tüm görüntü alanı boyunca esnediğinden, içeriği barındıran kanal (yukarıdaki resimde sarı) en azından mevcut alanı doldurur ancak gerektiğinde büyür (ve belgenin kaydırılmasını sağ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'u ve esnek 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, 2 değer alan minmax() işlevi kullanılarak tanımlanır: Bu 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, mevcut alanı ızgara öğelerine dağıtmanıza olanak tanıyan ızgaraya özgü bir birimdir.
fr muhtemelen "kesir birimi" anlamına gelir, ancak yakında serbest birim anlamına da gelebilir.
Buradaki değerlerimiz, her iki sütunun da ekranı kaplayacak şekilde büyüyeceği, ancak içerik sütununun her zaman gezinme sütunu genişliğinin 3 katı olacağı anlamına gelir (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ıyor ve amaçladığımız davranışı sağlıyor:
Öğeleri yerleştirme
Izgara'nın en güçlü özelliklerinden biri, öğeleri DOM sırasına bakılmaksızın yerleştirebilmektir. (Bununla birlikte, ekran okuyucular DOM'de gezindiğinden, düzgün bir şekilde erişilebilir olmak için öğeleri nasıl yeniden sıraladığınıza dikkat etmeniz önemle tavsiye edilir.) 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 işgal eder. Izgaranın doldurulma sırası grid-auto-flow kullanılarak değiştirilebilir.
Peki, öğeleri nasıl yerleştiririz? Izgara öğelerini yerleştirmenin muhtemelen en kolay yolu, bunların hangi sütunları ve satırları kapsayacağı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 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 bölmemiz ikinci satırda başlamalı ve toplam 2 satırı kapsamalıdır.
Teknik olarak, düzenimizi uygulamayı bitirdik ancak size Grid'in yerleşimi daha kolay hale getirmenize yardımcı olan kullanışlı birkaç özelliği göstermek istiyorum. İlk özellik, parkur kenarlıklarınızı adlandırabilmeniz ve yerleşim için bu adları 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, daha önceki kodla aynı düzeni sağlar.
Daha da güçlüsü, şebekenizdeki bölgelerin tamamını adlandırma özelliğidir:
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ış adlardan oluşan bir dize alır. Böylece, geliştirici her hücreye bir ad verebilir. Bitişik iki hücre aynı ada sahipse
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.
Daha fazlası var mı?
Evet, evet, tek bir blog yayınında değinemeyecek kadar çok şey var. Aynı zamanda bir GDE olan Rachel Andrew, CSS Çalışma Grubu'nda Davetli Uzman ve Grid'in web tasarımını basitleştirmesi için en başından itibaren onlarla birlikte çalışıyor. Hatta bunun üzerine bir kitap bile yazdı. Web sitesi Grid by Example, Grid'i tanımak 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.