CSS Izgara Düzenleri ile basit bir düzen nasıl oluşturulur

Baskı tasarımıyla daha önce uğraştıysanız, ızgara düzeni fikrinin nereden geldiğini bilirsiniz. Izgara, 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 tek tip hale getirmek için kullanılır, bu da kullanıcılarınız için daha iyi bir görüntüleme deneyimi sağlar.

Web tasarımı pratiği yeniyken mizanpajlar 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. Çoğu zaman diğer birçok şeyin yanı sıra çok sayıda içerik bölgesine, duyarlı tasarıma, birden çok sayfa düzeni şablonu tasarımına ihtiyacımız var. Ve tasarımı uygulamak ve doğru bir şekilde görüntülenmesini sağlamak için yüzer 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 çekiş kazanı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 çalışmalarda. Onlar için tarayıcı desteği çok hızlı bir şekilde gerçekleşti, bu yüzden artık tasarımcıların uzun yıllardır uğraşmak zorunda kaldıkları konumlandırma konusundaki hayal kırıklıklarının bir kısmını hafifletmeye yardımcı olabilirler.

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

CSS Izgarası desteği

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

CSS Izgara Düzeni temelleri

CSS kullanarak ızgara düzenleri, web sayfanızdaki içerik alanlarını tanımlamaya yardımcı olacaktır. 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 bilgi edinirken başvurulacak 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.

Izgara parçaları

çizgiler

Bu durumda, beş dikey çizgi ve üç yatay çizgi vardır. Çizgilere birden başlayarak numara verilir. Bu örnekte dikey çizgiler soldan sağa gösterilmiştir, ancak bu, yazma yönüne bağlıdır. Bu soldan sağa okumayı gösterdiğinden, eğer sağdan sola ise işler tersine dönecektir. Satırlara, CSS'de referans verilmesine yardımcı olan adlar verilebilir (isteğe bağlı).

Parçalar

Bir iz, iki paralel çizgi arasındaki boşluktur. Diyagramda dört dikey iz ve iki yatay iz 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ğini belirtmenin 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. Şemada sekiz hücre var.

Alanlar

Alanları belirlerken hücreler devreye girer. Alan, birkaç hücreye yayılabilen dikdörtgen bir şekildir. Çizgiler gibi alanlar da isteğe bağlı olarak adlandırılabilir. Diyagramda yer alan birkaç etiket vardır: “A”, “B” ve “C”.

Bir ızgara düzeni oluşturma

Mizanpajınızı başlatmadan önce bir şeyler çizmek yardımcı olabilir. Eski güzel grafik kağıdının yerini hiçbir şey tutamaz.

ızgara için 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>

Konteyner çok önemli. 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ı mizanpajımıza yerleştirmek için CSS kullanacağız.

CSS stilleri

HTML işaretlemesini bitirdikten 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. Daha fazlasını öğrenmek için bu harika başvuru kılavuzuna göz atın.

.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;
}

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. Bu, ızgaranın kesirli birimlerle şekillendiği yerdir. Bu değerlerle, iki sütun olduğu ve bunların eşit genişlikte olmadığı açıktı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 var, ancak kesirli birimleri kullanmak harika bir ilk adım. 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 istiyorsanız, 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ünecektir:

.header {
  grid-column-start: 1;
  grid-column-end: 3;
  grid-row-start: 1;
  grid-row-end: 2;
}

Kenar çubuğunun ezildiğini ve çok fazla göremediğimizi fark edebilirsiniz. Biraz yeniden düzenleme yapmamız gerekecek. Bu düzende, yerleşimi elde etmek için satırlara atıfta bulunmak, 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, bu nedenle bu, hemen altına yerleştirilecektir. Örneği görmek için Codepen'deki projeye bakın.

Bir öğenin dikey başlangıç ​​çizgisini belirtmek için grid-column-start kullanırız. Bu durumda, üç olarak ayarlanacaktır. grid-column-end , bir elemanın 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, sadece içerik alanı tarafından kapsanıyor.

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

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, bu nedenle her ikisi de üç grid-row-start sahiptir. İçeriğin ve kenar çubuğunun nasıl daha uzun olduğunu merak ediyor olabilirsiniz. Kapsayıcıya bir yükseklik koyarak, bu durumda 400 piksel, bu artık diğer öğelerden daha uzundur.

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

Son iki içerik alanı, ekstra içerik alanı ve alt bilgidir.

.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;
}  

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

Duyarlı avantajlar

Artık bir düzen oluşturulduğuna göre, çok "masaüstü" görünüyor. Tabletler ve mobil cihazlar ne olacak? CSS Izgara Düzenleri, tasarımın farklı ekran boyutlarına uyum sağlayabilmesi için medya sorgularıyla iyi çalışır. Gerçekten harika olan şey, bu farklı medya sorgusu kesme noktalarında içerik alanlarını 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çeriğin” “içerik” alanının üstüne yerleştirilmesini istiyorsanız, doğru sütun ve satırları belirtebilirsiniz.

/* 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;
  }

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 Izgara Düzeni için tarayıcı aracı

Düzenleri tasarlarken veya diğer web sitelerini incelerken Firefox, CSS Izgara Düzenleri 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 hazır ve çalışır durumda olmak oldukça kolaydır. Bu basit örnek, daha karmaşık düzenlerin nasıl oluşturulacağı konusunda iyi bir temeldir. Bu 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.

Bu makale ilk olarak 3 Ağustos 2016'da yayınlandı. En son 6 Aralık 2017'de güncellendi.