CSS Izgara Düzenleri ile Basit Bir Düzen Nasıl Oluşturulur

Daha önce baskı tasarımıyla uğraştıysanız, ızgara düzenleri fikrinin nereden geldiğini biliyorsunuzdur. Kılavuz, tasarım öğelerini bir sayfada konumlandırmak için kullanılan hassas bir ölçüm aracıdır. Bu fikir genellikle web'de içeriği düzenli ve tekdüze hale getirmek için kullanılır ve kullanıcılarınız için daha iyi bir görüntüleme deneyimi sağlar.

Web tasarımı uygulaması yeni olduğunda, düzenler oldukça basitti. Üstbilgi, kenar çubuğu, içerik alanı ve altbilgi. Şimdi, web geliştikçe, düzenlerimiz daha karmaşık hale geldi ve web tasarımcıları olarak uğraşmamız gereken daha çok şey var. Diğer pek çok şeyin yanı sıra genellikle çok sayıda içerik bölgesine, duyarlı tasarıma, birden çok sayfa düzeni şablonu tasarımına ihtiyacımız var. Tasarımın uygulanması ve doğru şekilde görüntülenmesi için yüzdürmeler ve konumlandırma gereklidir. Şamandıralar kulağa basit gelebilir, ancak bunlarla çalışmak bazen zor olabilir.

Neyse ki ızgara, web içeriğini tasarlamak ve görüntülemek için daha kolay bir yol sağlar. Tasarımcı olmak için harika bir zaman çünkü CSS Izgara Düzenleri hızla ilgi görüyor. Izgaralar son yıllarda web tasarımında yeni bir fikir gibi görünebilir, ancak ister inanın ister inanmayın, CSS Izgara Düzenleri uzun yıllardır üzerinde çalışılmaktadır. Onlar için tarayıcı desteği çok hızlı oldu, bu yüzden artık tasarımcıların uzun yıllardır uğraşmak zorunda kaldığı konumlandırma konusundaki hayal kırıklığının bir kısmını hafifletmeye yardımcı olabilirler.

Sonunda ızgaraya girme ve yeni tasarım olanaklarını keşfetme zamanı!

CSS Izgara Desteği

Her şey, desteklemeniz gereken tarayıcılara bağlıdır, ancak CSS Izgaralarını kullanırken "işaret modu" hakkında endişelenmenize gerek kalmaması oldukça iyi bir ihtimaldir. Tekrar kontrol etmek için Can I Use belgelerini her zaman ziyaret edebilirsiniz, ancak CSS Izgaraları için destek önemli ölçüde arttı ve birçok tasarımcı bunu üretimde kullanabiliyor, bu da kutlama sebebi!

CSS Izgara Düzeni Temelleri

Izgara düzenleri, CSS kullanarak web sayfanızdaki içerik alanlarını tanımlamanıza yardımcı olur. CSS Izgara Düzeni Spesifikasyonlarında tanımlanan nispeten yeni bir dizi özellik vardır. Bu, yerleşim tasarımının bu yeni yolu hakkında daha fazla şey öğrenirken başvurabileceğiniz harika bir kaynaktır. CSS Izgara Düzenleri, işleri basitleştirmeye ve düzen oluşturmayı kolaylaştırmaya yardımcı olur. Izgarayı, ölçümlerin tanımlanabileceği bir yapı olarak düşünün.

Izgaranın Parçaları

çizgiler

Bu durumda, beş dikey çizgi ve üç yatay çizgi vardır. Satırlar birden başlayarak numaralandırılır. Bu örnekte dikey çizgiler soldan sağa doğru gösterilmiştir, ancak bu yazma yönüne bağlıdır. Bu soldan sağa okumayı gösterdiği için sağdan sola ise işler tersine döner. Satırlara, CSS'de atıfta bulunulmasına yardımcı olan adlar verilebilir (isteğe bağlı).

Parçalar

İz, iki paralel çizgi arasındaki boşluktur. Diyagramda dört dikey yol ve iki yatay yol vardır. Çizgiler ve izler arasında büyük bir ikili çaba vardır. Çizgiler, içeriğin nerede başlayıp nerede bittiğine atıfta bulunmanın harika bir yoludur. Parçalar, içeriğin gerçekte gittiği yerdir.

hücreler

Hücreler, yatay ve dikey bir yolun buluştuğu yerde bulunur. Diyagramda sekiz hücre vardır.

Alanlar

Alanları belirtirken hücreler devreye girer. Alan, birkaç hücreyi kapsayabilen dikdörtgen bir şekildir. Çizgiler gibi, alanlar da isteğe bağlı olarak adlandırılabilir. Şemada yer alan birkaç etiket vardır: "A", "B" ve "C".

Izgara Düzeni Oluşturma

Mizanpajınıza başlamadan önce bir şeyler çizmek faydalı olabilir. Eski güzel grafik kağıdının yerini hiçbir şey tutamaz.

Izgara için HTML

 [html] <div class="container"> <div class="grid header">Header</div> <div class="grid sidebar">Sidebar</div> <div class="grid content">Main Content</div> <div class="grid extra">Extra Content</div> <div class="grid footer">Footer</div> </div> [/html]

Konteyner çok önemlidir. Kapsayıcı içinde web sitesi için farklı içerik blokları bulunur. Konteyner içindeki ızgara öğelerinin sırası önemli değildir. Ardından, bunları düzenimize yerleştirmek için CSS kullanacağız.

CSS stilleri

HTML işaretlemesini tamamladıktan sonra, en önemli bildirim CSS'de yapılır. Kap içinde, display:grid veya display:inline-grid uygulamanız gerekir. Blok düzeyinde bir ızgara istiyorsanız display:grid kullanın. Satır içi düzey ızgaralar için display:inline-grid kullanın.

 [css] .container { display: grid; grid-template-columns: 1fr 3fr; grid-column-gap: 10px; grid-row-gap: 15px; } .grid { background-color: #444; color: #fff; padding: 25px; font-size: 3rem; } [/css]

grid-template-columns ve grid-template-rows özellikleri, satırların ve sütunların genişliğini belirtmek için kullanılır. grid-template-columns 1fr ve 3fr olarak ayarlanmıştır. Burası ızgaranın kesirli birimlerle şekillendiği yerdir. Bu değerlerden iki sütun olduğu ve eşit genişlikte olmadığı anlaşılır. 3fr olarak ayarlanan sütun diğerinden üç kat daha geniştir. Bu, kenar çubuğunun içerik alanından nasıl daha dar göründüğünü açıklar.

Yapılabilecek duyarlı özelleştirmeler vardır, ancak kesirli birimleri kullanmak harika bir ilk adımdır. Alanlar arasındaki boşluk, grid-column-gamp ve grid-row-gap ile kontrol edilebilir.

İşler oldukça sıkı görünüyor, ancak birkaç özellik daha ile işler şekillenecek.

Bu örnek, başlığı yerleştirmekle başlar, ancak öğeler sizin için en uygun olan sırayla yerleştirilebilir. Altbilgi ile başlamak isterseniz, bu da işe yarayacaktır.

1. sütun satırından 4. sütun satırına ve 1. satırdan 2. satıra giden başlıkla başlayalım. CSS şöyle görünecek:

 [css] .header { grid-column-start: 1; grid-column-end: 3; grid-row-start: 1; grid-row-end: 2; } [/css]

Kenar çubuğunun ezilmiş olduğunu ve çok fazla göremediğimizi fark edebilirsiniz. Biraz yeniden düzenleme yapmamız gerekecek. Bu düzende, yerleşimi elde etmek için çizgilere başvurmak düzenlemeye yardımcı olacaktır. Çizgiler kılavuz görevi görür. Başlık, birinci satırdaki satır ile ikinci satırdaki satır arasında bulunur. Kenar çubuğu için üçüncü satırda başlayacak ve altıncı satırda bitecektir. Başlık satırı ikide sona erdi, yani bu onun hemen altına yerleştirilecek. Örneği görüntülemek için Codepen'deki projeye bakın.

Bir öğe için başlangıç ​​dikey çizgisini belirtmek için grid-column-start kullanıyoruz. Bu durumda, üç olarak ayarlanacaktır. grid-column-end bir öğe için bitiş dikey çizgisini gösterir. Bu durumda, bu özellik dörde eşit olacaktır. Diğer satır değerleri de aynı şekilde ayarlanacaktır. Kenar çubuğunun yerleşimi orada, içerik alanı tarafından kapsanıyor.

 [css] .sidebar { grid-column-start: 1; grid-column-end: 2; grid-row-start: 2; grid-row-end: 4; background: #a0c263; } [/css]

Ana içerik üçüncü sütunda başlar ve dördüncü sütunda biter. Kenar çubuğunun üst kısmı ve içerik alanı eşittir, dolayısıyla her ikisi de üç grid-row-start sahiptir. İçeriğin ve kenar çubuğunun nasıl daha uzun olduğunu merak ediyor olabilirsiniz. Konteynere bir yükseklik koyarak, bu durumda 400px, bu artık diğer elemanlardan daha uzun.

 [css] .content { grid-column-start: 2; grid-column-end: 3; grid-row-start: 2; grid-row-end: 3; background: #f5c531; height: 400px; } [/css]

Son iki içerik alanı, ekstra içerik alanı ve altbilgidir.

 [css] .extra { grid-column-start: 2; grid-column-end: 3; grid-row-start: 3; grid-row-end: 4; background: #898989; } .footer { grid-column-start: 1; grid-column-end: 3; grid-row-start: 3; grid-row-end: 4; background: #FFA500; } [/css]

Bitiş ve başlangıç ​​bildirimleri daha verimli yazılabilir. grid-column-start: 1; ve grid-column-end: 3; kısaltmayla yazılmıştır. Bu grid-column: 1 / 3; . Aynı fikir, sütun satırı bilgilerini bildirmek için kullanılabilir.

Duyarlı Avantajlar

Artık bir düzen oluşturulduğundan, çok "masaüstü" görünüyor. Peki ya tabletler ve mobil cihazlar? CSS Izgara Düzenleri, medya sorgularıyla iyi çalışır, böylece tasarım farklı ekran boyutlarına uyarlanabilir. Gerçekten harika olan şey, içerik alanlarını bu farklı medya sorgu kesme noktalarında değiştirebilmenizdir. Bir tasarımcı olarak bu, farklı kesme noktalarında mizanpajınız için en iyi olanı seçeceğiniz anlamına gelir. Örneğin, “ekstra içerik”in “içerik” alanının üzerine yerleştirilmesini istiyorsanız, doğru sütun ve satırları belirtebilirsiniz.

 [css] /* For mobile phones: */ .header { grid-column-start: 1; grid-column-end: 4; grid-row-start: 1; grid-row-end: 2; } .extra { grid-column-start: 1; grid-column-end: 4; grid-row-start: 3; grid-row-end: 4; } .content { grid-column-start: 1; grid-column-end: 4; grid-row-start: 5; grid-row-end: 6; background: #f5c531; height: 400px; } [/css]

Sütunların birden başlayıp dörtte bitmesini sağlayarak içerik alanlarını tam genişlikte yaptık. Izgara satırları, "ekstra içerik" artık "içeriğin" üzerinde olacak şekilde yerleştirilir.

CSS Grid Layout için tarayıcı aracı

Mizanpajları tasarlarken veya diğer web sitelerini incelerken Firefox, CSS Grid Layouts ile çalışmak için harika bir araç sunar. Buna CSS Izgara Oyun Alanı denir ve ızgarayı incelemeyi çok sezgisel hale getirir. Denetçiye giderek, düzen sekmesinde ızgaranın nasıl oluşturulduğunu görsel olarak görmek için bir seçenek vardır. Farklı ızgara özelliklerinin genel ızgara düzenini ve tasarımını nasıl etkilediğini keşfetmek için bu araca sahip olmak tasarım sürecini kolaylaştıracaktır.

CSS Izgara Düzenleri, web düzenleri oluşturmanın yeni ve heyecan verici bir yoludur. Gördüğünüz gibi, basit bir sayfa düzeni oluştururken çalışır durumda olmak oldukça kolaydır. Bu basit örnek, daha karmaşık düzenlerin nasıl oluşturulacağı konusunda iyi bir temeldir. Popülerlik kazandıkça, yapılabilecek yerleşim özelleştirmeleri ile çeşitli cihazlar ve kesme noktaları için tasarım yaparken bu teknolojinin bir avantajı olacaktır.