CSS Izgara Düzeni, iki boyutlu bir sayfa düzen sistemidir. İçeriği satır ve sütunlara sıralamanızı sağlar. Karmaşık düzenler oluşturmayı kolaylaştıran birçok özelliğe sahiptir. Bu makalede, ızgaralar ile sayfa düzenine başlamak için bilmeniz gereken her şey açıklanacaktır.
Izgara (grid) düzeni nedir?
Izgara, tasarım öğelerimizi hizalayabileceğimiz bir desen oluşturan yatay ve dikey çizgilerden oluşan bir koleksiyondur. Web sitelerimizde daha fazla tutarlılık sağlayarak, sayfadan sayfaya geçerken öğelerimizin etrafından atlamayacağı veya genişliğini değiştirmeyeceği düzenler oluşturmamıza yardımcı olurlar.
Bir ızgara genellikle sütunlar (column) ve satırlar (row) bulunur. Sonra her satır ve sütun arasında da boşluklar bulunur. Boşluklar genellikle oluklar (gutter) olarak adlandırılır.
CSS’de ızgara oluşturma
Tasarımınızın ihtiyaç duyduğu ızgaraya karar verdikten sonra, oluşturmak için CSS Izgara Düzeni’ni kullanabilirsiniz. Önce Grid Layout’un temel özelliklerine bakalım ve ardından projeniz için basit bir ızgara sisteminin nasıl oluşturulacağı hakkında araştırma yapacağız.
Izgara tanımlama
Başlangıç noktası olarak, başlangıç noktası dosyasını indirin ve metin düzenleyicinizde açın. Bazı alt öğeler içeren bir öğenin olduğu bir örnek göreceksiniz. Varsayılan olarak bu öğeler normal akışta görüntülenir, böylece her kutu bir diğerinin altına yerleştirilir. Bu yazının ilk bölümü için bu dosyayla çalışacağız ve ızgaranın nasıl davrandığını görmek için değişiklikler yapacağız.
Bir ızgara tanımlamak için display özelliğinin grid değerini kullanırız. Flexbox’ta olduğu gibi, bu da Izgara Düzeni’ni etkinleştirir; üst öğenin tüm doğrudan çocukları ızgara öğeleri haline gelir. Aşağıdakini dosyanızın içindeki CSS’ye ekleyin:
.container {
display: grid;
}Flexbox’ın aksine, öğeler hemen farklı görünmeyecektir. Bildirimde bulunduktan sonra display:grid size bir sütun ızgarası verir, böylece öğeleriniz normal akışta olduğu gibi diğerinin altında görüntülenmeye devam eder.
Daha çok ızgaraya benzeyen bir şey görmek için ızgaraya bazı sütunlar eklememiz gerekir. Üç tane 200 piksellik sütun ekleyelim. Bu sütun parçalarını oluşturmak için herhangi bir uzunluk birimini veya yüzdeyi kullanabilirsiniz.
.container {
display: grid;
grid-template-columns: 200px 200px 200px;
}Bu bildirimi de CSS kuralınıza ekleyin ve sayfayı yeniden yükleyin. Öğelerin kendilerini ızgaranın her hücresinde bir tane olacak şekilde yeniden düzenlediklerini göreceksiniz.
fr birimi ile esnek ızgaralar
Uzunlukları ve yüzdeleri kullanarak ızgaralar oluşturmanın yanı sıra, ızgara satırlarını ve sütunlarını esnek bir şekilde boyutlandırmak için fr birimini de kullanabiliriz. Bu birim, grid üst öğesinde de kullanılabilir alanın bir kısmını temsil eder.
CSS’imizi aşağıdakine göre değiştirerek üç tane 1fr yazalım.
.container {
display: grid;
grid-template-columns: 1fr 1fr 1fr;
}Artık esnek boyutlandırmanız olduğunu görebilirsiniz. fr birimi alanları orantılı olarak dağıtır. Bu nedenle, bölümlerimiz için aşağıdaki gibi farklı pozitif değerler belirtebilirsiniz:
.container {
display: grid;
grid-template-columns: 2fr 1fr 1fr;
}İlk bölüm şimdi mevcut alandan 2fr ve diğer iki parça ise 1fr alır , ilk parçayı daha büyük hale getirir. fr birimlerini sabit uzunluktaki birimlerle de karıştırabilirsiniz – böyle bir durumda önce sabit birimler için gereken alan kullanılır; kalan alan daha sonra diğer parçalara dağıtılır.
Not: fr birimi tüm alanı değil, kullanılabilir alanı dağıtır. Bu nedenle, parçalarınızdan birinin içinde büyük bir öğe varsa, paylaşılacak daha az boş alan olacaktır.
Bölümler arasındaki boşluklar
Bölümler arasında boşluklar oluşturmak için column-gap ve row-gap‘ı kullanırız. Sütun arasındaki boşluklar için column-gap, satır arası boşluklar için row-gap ve her ikisi için de kısayol olarak gap‘ı kullanırız.
.container {
display: grid;
grid-template-columns: 2fr 1fr 1fr;
gap: 20px;
}Bu boşluklar herhangi bir uzunluk birimi veya yüzde olabilir, ancak fr birimi olamaz.
.container {
display: grid;
grid-template-columns: 2fr 1fr 1fr;
grid-gap: 20px;
gap: 20px;
}repeat
repeat CSS işlevini kullanarak bölümlerin tamamını veya yalnızca bir tanesini yineleyebiliriz:
.container {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 20px;
}Şimdi eskisi gibi yine üç bölümümüz olacak. Yineleme işlevine verilen ilk değer listenin kaç kez yinelenmesini istediğinizi belirtirken, ikinci değer yinelemek istediğiniz bölümdür.
Örtülü ve açık ızgara
Şimdiye kadar yalnızca sütunları belirttik ancak içeriğimizi yerleştirmek için satırlar da oluşturuyoruz. Bu, örtülü ızgara ve açık ızgaraya yönelik güzel bir örnek. Açık ızgara, grid-template-columns veya grid-template-rows kullanarak oluşturduğumuz ızgaradır. Örtülü ızgara ise oluşturduğumuz ızgaranın dışına içerik yerleştirildiğinde oluşturulur, satırlarımız gibi.
Varsayılan olarak, örtülü ızgarada oluşturulan bölümler otomatik boyutlandırılır, bu da genel olarak içeriklerini barındıracak kadar büyük oldukları anlamına gelir. Örtülü ızgara parçalarına bir boyut vermek istiyorsak, grid-auto-rows ve grid-auto-columns‘ü kullanabiliriz. CSS’nize 100px değerinde grid-auto-rows eklerseniz oluşturulan satırların artık 100 piksel uzunluğunda olduğunu görürsünüz.
.container {
display: grid;
grid-template-columns: repeat(3, 1fr);
grid-auto-rows: 100px;
grid-gap: 20px;
}
minmax() fonksiyonu
100 piksel uzunluğundaki bölümlerimiz 100 pikselden daha uzun içerikler eklersek çok da yararlı olmaz; bu durumda taşma olur. 100 piksel ve daha fazla içeriklerde de hala genişleyebilen bölümlerin olması daha iyi olabilir. Ancak, web hakkında oldukça temel bir gerçek de şu ki, bir şeyin ne kadar uzun olacağını asla bilemezsiniz – ek içerik veya daha büyük yazı tipi boyutları, piksel mükemmel olmaya çalışan tasarımlarda sorunlara neden olabilir.
minmax() fonksiyonu, bir bölüm için minimum ve maksimum boyut ayarlamamızı sağlar, örneğin minmax(100px, auto). Burada minimum boyut 100 piksel olmasına rağmen daha fazla içerik için genişleyebilecek bir bölüm elde ettik. Minmax değerini grid-auto-rows ile deneyelim:
.container {
display: grid;
grid-template-columns: repeat(3, 1fr);
grid-auto-rows: minmax(100px, auto);
gap: 20px;
}Şimdi ekleyeceğimiz fazladan içerikler ile bölümlerin genişlediğini görebiliriz. Genişlemenin satır boyunca gerçekleştiğini unutmayın.
Sığacak kadar sütun
Faydalı bir tasarım oluşturmak için bölümleri listeleme, tekrarlama ve minmax() hakkında öğrendiğimiz bazı yöntemleri birleştirebiliriz. Bazen ızgaraya sığacak kadar çok sütun oluşturmasını isteyebiliriz. Bunu grid-template-columns ve repeat() fonksiyonu ile yapıyoruz. Ancak repeat() fonksiyonuna parametre olarak bir sayı vermek yerine auto-fill anahtar sözcüğünü veriyoruz. Fonksiyonun ikinci parametresi için, sahip olmak istediğimiz minimum bölüm boyutuna eşit bir minimum değer ile maksimum 1fr veriyoruz.
Aşağıdaki CSS’i kullanarak bunu deneyelim:
.container {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
grid-auto-rows: minmax(100px, auto);
gap: 20px;
}
Bu yöntem, ızgaranın kapsayıcısına sığacak kadar 200 piksel sütun oluşturması ve ardından kalan alanı tüm sütunlar arasında paylaşması nedeniyle çalışır. Maksimum, zaten bildiğimiz gibi, boş alanı bölümler arasında eşit olarak dağıtan 1fr‘dir.
Çizgi tabanlı yerleşim
Şimdi bir ızgara oluşturmaktan, bir şeyleri ızgaraya yerleştirmeye geçiyoruz. Izgaramızda her zaman çizgiler bulunur. Bu çizgiler 1 ile başlayarak numaralandırılır. Bunlar belgenin Yazma Modu ile ilgilidir. Bu nedenle, İngilizce gibi bir dil için sütun çizgisi 1 ızgaranın sol tarafında ve satır çizgisi 1 üstte bulunur. Arapça gibi bir dil için sütun çizgisi 1, Arapça sağdan sola yazıldığı için, sağ tarafta olacaktır.
Başlangıç ve bitiş çizgilerini belirterek öğelerin bu satırlara uygun olarak yerleşmesini düzenleyebiliriz. Bunu aşağıdaki özellikleri kullanarak yapıyoruz:
Bu özelliklerin tümü, değer olarak bir satır numarası alabilir. Kısayol özelliklerini de kullanabilirsiniz:
Bunlar, başlangıç ve bitiş satırlarını bir kerede, eğik çizgiyle / ayırarak belirtmenizi sağlar.
Bir örneğe bakalım; bu dosyayı indirin. Dosyada tanımlanmış bir ızgara ve basit bir makale bulunuyor. Otomatik yerleştirmenin her öğeyi ızgaradaki kendi hücresine yerleştirdiğini görebilirsiniz.
Bunun yerine ızgara çizgilerini kullanarak sitemiz için tüm öğeleri düzenleyelim. CSS’nizin altına aşağıdaki kuralları ekleyin:
header {
grid-column: 1 / 3;
grid-row: 1;
}
article {
grid-column: 2;
grid-row: 2;
}
aside {
grid-column: 1;
grid-row: 2;
}
footer {
grid-column: 1 / 3;
grid-row: 3;
}
Not: -1 değeri ile bitiş sütununu veya satırını hedefleyebilirsiniz. Negatif değerleri kullanarak sondan içe doğru sayabilirsiniz. Ayrıca, satırların örtülü ızgaradan değil, açık ızgaradan saydığını unutmayın.
grid-template-areas ile konumlandırma
Izgaranızdaki öğeleri düzenlemenin alternatif bir yolu da grid-template-areas özelliğini kullanmak ve tasarımınızın çeşitli öğelerine bir isim vermektir.
Çizgi tabanlı konumlandırmayı son örnekten kaldırın (veya dosyayı yeniden indirin) ve aşağıdaki CSS’yi ekleyin.
.container {
display: grid;
grid-template-areas:
"header header"
"sidebar content"
"footer footer";
grid-template-columns: 1fr 3fr;
gap: 20px;
}
header {
grid-area: header;
}
article {
grid-area: content;
}
aside {
grid-area: sidebar;
}
footer {
grid-area: footer;
}Sayfayı yeniden yükleyin ve öğelerinizin herhangi bir satır numarası kullanmamıza gerek kalmadan daha önce olduğu gibi yerleştirildiğini göreceksiniz!
grid-template-areas için kurallar aşağıdaki gibi:
- Izgaranın her hücresini doldurtmalısın.
- İki hücreye de yayılmak için ismi yineleyin.
- Bir hücreyi boş bırakmak için bir
.(nokta) kullanın. - Alanlar dikdörtgen olmalıdır — örneğin L şeklinde bir alanınız olamaz.
- Alanlar farklı yerlerde tekrarlanamaz.
Düzenimizle oynayabilir, altbilgiyi yalnızca makalenin altına oturacak şekilde değiştirebilir ve kenar çubuğunu tamamen aşağıya yayabilirsiniz. Bu yöntem düzen tanımlamanın çok güzel bir yoludur, çünkü tam olarak ne olduğunu bilmek için sadece CSS’e bakmak yeterlidir.
CSS Izgarası, ızgara çerçevesi
Izgara “çerçeveleri” yaklaşık 12 veya 16 sütun olma eğilimindedir. CSS Grid ile böyle bir çerçeve oluşturmak için üçüncü bir araca ihtiyacınız olmaz.
Örnek için başlangıç noktası dosyasını indirin. Bu dosyada 12 sütun ızgarası ve önceki iki örnekte kullandığımız biçimlendirmeye sahip bir kapsayıcı bulunuyor. Artık içeriğimizi 12 sütun ızgarasına yerleştirmek için çizgi tabanlı yerleşimi kullanabiliriz.
header {
grid-column: 1 / 13;
grid-row: 1;
}
article {
grid-column: 4 / 13;
grid-row: 2;
}
aside {
grid-column: 1 / 4;
grid-row: 2;
}
footer {
grid-column: 1 / 13;
grid-row: 3;
}
Firefox Grid Inspector’ı kullanarak 12 sütun ızgaramızın nasıl çalıştığını görebiliriz.
Yeteneklerinizi test edin!
Bu makalenin sonuna ulaştınız, ancak makaledeki önemli bilgileri hatırlıyor musunuz?
Özet
Bu makalede CSS Grid Layout’un ana özelliklerini inceledik. Bu bilgileri tasarımlarınızda kullanmaya başlayabilirsiniz.