Altın Konu CSS - Izgarasıyla (Grid) iki Boyutlu Web Sitesi Oluşturma

[Replicant]

Türkiye'de ilk Mobil & PC Aynı Anda Metin2 Oyna. Triarchonline kalıcı ve uzun ömürlü yapısı ile 24 Temmuz'da açılıyor. | 1-99 Mobil Metin2 Triarch HEMEN TIKLA!

Merhabalar, CSS Grid ile normalde yapacağınız sürenin yarısı kadar bir sürede iki boyutlu web sitesi düzenleri oluşturabilirsiniz.

CSS Grid, kayan mizanpaj sisteminin halefidir.Kayan mizanpaj yapısı kullanmanın CSS Grid kullanmaktan daha pratik olduğu durumlar olsada, bazı geliştiriciler web sitelerini yapılandırmak için yalnızca CSS Grid'i kullanma eğilimindedir.

Bu kılavuz, tüm web geliştirme projelerinizde CSS Grid'i nasıl kullanacağınızı öğretecektir.

CSS (Grid) Izgara Sistemi Nasıl Çalışır?​

CSS Grid, aslında bir web sayfasındaki öğeleri yapılandırmak için kullanılan iki boyutlu bir web sitesi düzeni sistemidir. CSS Grid mizanpaj sistemi, bir ana konteynıra ve bu konteynır içinde birkaç farklı ızgara öğesine (alt öğeler) sahip olacağınız bir ebeveyn-çocuk kavramı üzerine inşa edilmiştir.

Herhangi bir web sitesinde CSS Izgarasını kullanmak için önce Izgara kabını başlatmanız gerekir.
Amaçlanan ana çalışmanın display özelliğini, ızgara değerine ayarlayarak yapılır.

CSS Izgara Kabı Örneği​

selector{
display: grid;
}

Seçici bir HTML elemanı, bir sınıf veya bir kimliği oluşturabilir.Önemli olan, web sayfasındaki diğer tüm HTML öğelerini çevreleyen HTML öğesini doğrudan tanımlamasıdır.

Bir ızgara düzeni yapısında, kap içindeki tüm öğeler ızgara öğeleri olarak adlandırılır. Varsayılan olarak, CSS Izgara düzeni dikeydir (bu aynı zamanda HTML'deki varsayılan mizanpaj yapısıdır), bu nedenle bir CSS ızgarası, ızgara öğelerinin mizanpajının üzerindeki display özelliği kullanılarak başlatıldığında aynı kalır.

Web sayfasındaki ızgara öğelerini yeniden düzenlemek için , grid-template-column özelliğini, grid-template-rows özelliğini veya her ikisinin bir kombinasyonunu kullanmanız gerekecektir .

Bu nedenle CSS Grid iki boyutlu bir yerleşim sistemi olarak tanımlanır.Izgara öğelerinizi aynı anda hem yatay (satırlar) hem de dikey (sütunlar) olarak yapılandırmanıza olanak tanır.

Grid-template-column Özelliğini Kullanma​

Izgara şablon sütun özelliği her zaman gösterge özelliği ile birlikte muhafaza elemanı içinde kullanılmalıdır. Bu özellik ile, CSS Izgara düzeninde istediğiniz sütun sayısını belirtebilirsiniz.

Izgara öğelerinizi yapılandırmanın bir yolu piksel (px) kullanmaktır.

Piksel ile Izgara Öğelerini Yapılandırma Örneği​

.gridContainer{
display: grid;
grid-template-columns: 400px 400px 400px;
}

Yukarıdaki örnekte not etmeniz gereken iki şey var. Birincisi, yukarıdaki kodu kullanmak, web sayfanızda her biri 400 piksel genişliğinde üç sütun oluşturacaktır. Konteynırınızda üçten az ızgara öğeniz varsa, ekranınızda yalnızca bir veya iki sütun görüntülenir.

Bununla birlikte, konteynırınızdaki ızgara öğelerinin sayısı üçü aşarsa, üç ızgara öğesinden oluşan her grup, bitene kadar yeni bir satıra yerleştirilecektir.

Unutulmaması gereken ikinci nokta, ızgara öğelerinizi yapılandırmak için px değerlerini kullanmanın çok pratik bir yaklaşım olmadığıdır. Bunun başlıca nedeni, piksel biriminin duyarlı tasarımı desteklememesidir .

Yukarıdaki örneğe geri dönün, Kutumuzda altı ızgara öğesi olsaydı, soldaki iki ızgara öğesi bir tablette hemen görünmezdi.

Izgara öğelerinizi düzenlemek için px (veya başka bir sabit değer) kullanmanın önerilen bir alternatifi, kesirleri kullanmaktır.

Kesir Değerlerini Kullanma Örneği​

.gridContainer{
display: grid;
grid-template-columns: 1fr 2fr;
}

Yukarıdaki kod, amaçlanan web sayfasında iki sütun oluşturacaktır. Sağdaki sütun soldakinin iki katı genişliğinde olacaktır. Fr kullanımının önerilmesinin ana nedeni, fr'nin yanıt verebilirliği desteklemesidir.

Bu nedenle, bir cihazdaki ekran boyutu ne olursa olsun, sağdaki sütun her zaman soldakinden iki kat büyük olacaktır.

Bu düzen, bir web sayfasında yan bölümün olduğu durumlarda popülerdir. Daha küçük boyutlu sütun, ana akışla ilgili olan içerikleri içeren yan bölüm için ayrılacaktır. (içerik tablosu gibi)

Grid-template-rows Özelliğini Kullanma​

Izgara-şablon-satırları özelliğini kullanma kriterleri, sütunların özellikleriyle bir şekilde aynıdır.

Belirgin bir fark, grid-template-rows özelliğinin satırlar yarattığı yerde grid-template-column özelliğinin sütunlar yaratmasıdır.
Ancak, iki özellik arasında daha ince farklılıklar da var. (örtük satırlar ve genel satır yapısı gibi).

Satır Yapısı​

Yukarıdaki kesir değerlerini kullanma örneğine dönecek olursak, bu kod ikiden fazla öğede kullanılıyorsa, fazladan öğeler ızgarada olana kadar iki sütunlu ek satırlar oluşturarak etrafına sarılır.

Bu, grid-template-rows özelliğinde geçerli değildir. Aşağıdaki örneği düşünün.

Kılavuz şablon satırları Örnek​

.gridContainer{
display: grid;
grid-template-rows: 1fr 3fr;
}

Yukarıdaki CSS kodu, gridContainer sınıf öğesinin her biri, doğrudan alt öğesi olan <div> etiketi içeren bir HTML belgesini hedeflemek için yapılırsa, ilk öğe varsayılan yüksekliği ve ikinci öğenin yüksekliği ilkinden üç kat daha büyük olacaktır.

Üçüncü div öğesine ulaştığınızda sorun belirgin hale gelir; Etrafı sarmak ve ikinci bir sütun oluşturmak yerine, satırların kesintisiz olarak ekranda devam edeceğini göreceksiniz. Bu satırlara örtük satırlar denir çünkü bunlar yukarıdaki koddan etkilenmezler ve varsayılan yüksekliklerini korumaya devam ederler.

Bu örtük satırlar, grid-auto-rows özelliği kullanılarak hedeflenebilir.

Grid-auto-rows Özelliğini Kullanma​

Izgara otomatik satır özelliği genellikle aralığının dışına düşen bir tablo içinde satır atama yüksekliği için kullanılan ızgara şablon satır özelliğidir.

Grid-auto-rows Örneği​

.gridContainer{
display: grid;
grid-template-rows: 1fr 3fr;
grid-auto-rows: 3fr;
}

Yukarıdaki CSS kodu, beş ızgara öğesini doğrudan içeren bir kabı hedeflemek için kullanılırsa, yukarıdaki grid-template-rows özelliği ilk iki grid-öğesi için geçerli olurken, grid-auto-row özelliği diğer üçü için geçerli olacaktır.

Buna rağmen ızgara-şablon satır ve ızgara-şablon-sütunları gerektiğinde ayrı ayrı, iki boyutlu düzenler (satır ve sütun) gerekli olduğunda CSS Izgara kullanmanız önerilir. İhtiyaç yalnızca tek boyutlu bir yerleşim içinse (satırlar veya sütunlar), kayan yerleşim yapısı çok daha iyi bir seçenek olacaktır.

Web Sitenizin Düzenini Yapılandırmak Hiç Bu Kadar Kolay Olmamıştı​

CSS Grid ile ebeveyn-çocuk konseptine dayanan iki boyutlu bir Web sitesi oluşturabilirsiniz. Bunu mümkün kılmak için hatırlamanız gereken şeyler şunları içerir:

• Izgara değerini, kap öğesindeki display özelliğine atama.
• ızgara şablon satır ve ızgara şablon sütun muhafaza elemanı içinde kullanma.
• ızgara-otomatik satır özelliği muhafaza elemanı içinde elementlerin miktarını, ızgara-şablon-satırlar aşan zaman mülkiyetini hedefler.

Son paket, CSS Izgarasını iki boyutlu yerleşim yapılarında etkili bir şekilde kullanmanızı sağlamaktır.
Tek boyutlu bir yerleşim yapısı gerektiğinde, kayan yerleşim yapısı daha iyi bir seçenek olabilir.