CSS kullanarak karmaşık düzenler nasıl oluşturulur

Web için düzen her zaman sınırlı kalmıştır, gerçekten hiçbir zaman, anlamlı bir şekilde görüntülenmesi kolay bir şey olmamıştır.

'90'lı yıllarda geri döndüğünde, bir ızgarada içerik atmak için kullanılan tasarımcılar, tarayıcıda aynı sonucu elde etmenin tek yolu tabloyu kullanmaktı. Birleştirme hücreleri karmaşıklığa neden oldu Web sitesi düzeni , ama bu erişilebilirlik ve SEO ile HAVOC oynadı. Hızlı ileri ve bugün içeriği yüzer, esnek kutular ve benzeri bir şekilde yerleştirmek için her türlü yol vardır.

CSS3, web'in yeteneklerini gerçekten ileri sürdü ve 2014'ten beri orada olmuştur. CSS Grid Düzeni . Bu şu anda yüzde 75'i tarayıcı desteğine sahip, bu yüzden ciddi bir düşünce verme zamanı geldiğinde noktaya geliyor. Zurb'un Vakfı 6 Çerçeve gemide var ve şebekesini güçlendirmek için kullanıyor.

Bu eğitim, size nasıl mükemmel olduğunu gösterecek bir dergi tarzı özelliği oluşturmaya odaklanacak Duyarlı Web Tasarımı Orta ve küçük ekran boyutları için.

Buradaki öğretici dosyaları indirin

01. Başlayın

'GRID1.HTML' dosyasını başlatma klasöründen açın. Proje dosyaları . Bunun için HTML düzeni, sadece CSS sınıfları olarak Item1-5 adlı beş div etiketine sahiptir. Bunlar, şebekeye yerleştirilmiş içerik olacaktır. Konteyner sarma, dört sütun olacak olan ızgarayı tanımlayacaktır.

 & lt; div class = "konteyner" & gt;
  & lt; div class = "item1" & gt; item 1 & lt; / div;
  & lt; div class = "item2" & gt; madde 2 & gt;
  & lt; div class = "item3" & gt; madde 3; / div & gt;
  & lt; div class = "item4" & gt; madde 4 & gt;
  & lt; div class = "item5" & gt; Madde 5 & GT;
& lt; / div & gt; 

02. GRID için CSS'yi kontrol edin

Kafa bölümüne bakıldığında, 'konteynerin' bir ızgara olarak ortaya koyulması söylendiğini, satırlar için otomatik yükseklikte, sütunların her biri tarayıcının yüzde 25'e kadar ayarlanacağı yapıldığını görebilirsiniz. . Bunları tarayıcıda kontrol edin ve her öğenin bir sonraki mevcut kılavuz pozisyonunu otomatik olarak atandığını göreceksiniz.

 .container {
  Ekran: Izgara;
  ızgara şablonu satırları: Otomatik;
  ızgara şablonu sütunları: tekrarlayın (4,% 25); } 

03. Izgara pozisyonlarını tanımlayın

Şimdi 'Grid2.html' dosyasına bir göz atın. İlk dosyayla aynıdır, 'item1' ve 'item2' verilir. İlk olarak satır 1'e yerleştirilir ve satır 2'den önce sona erer. Sütun 1'de başlar ve 3'te biter, böylece iki sütunu kapsar. İkinci sütun 3'te başlar ve sonraki iki sütunu alır. Kalan öğeler bir sonraki mevcut ızgara yuvalarını doldurur.

 .item1 {
  ızgara satır başlangıcı: 1;
  ızgara satır sonu: 2;
  Izgara kolonu başlangıcı: 1;
  ızgara sütun sonu: 3;
}
.item2 {
  ızgara satır başlangıcı: 1;
  ızgara satır sonu: 2;
  Izgara sütun başlangıcı: 3;
  ızgara sütun sonu: 5;
} 

04. Kılavuz şablonu kullanın

'Grid3.html' açın ve HTML'nin gövdesine bakın. Bir başlık, kenar çubuğu, ana içerik bölümü ve bir altbilgi ile bir düzen olduğunu göreceksiniz. Bu, bu yerleştirildiğinde ne olacağını görmek için içeriğe daha fazla metin ekleyebilirsiniz. Kılavuz, bu bölümleri bir düzende yapmak için bir şablon özelliği kullanır.

 & lt; div class = "konteyner" & gt;
  & lt; div sınıf = "başlık" & gt; başlık & lt; / div & gt;
  & lt; div sınıf = "kenar çubuğu" & gt; kenar çubuğu & lt; / div & gt;
  & lt; div class = "içerik" ve GT; içeriği & lt; / div & gt;
  & lt; div sınıf = "altbilgi" ve GT; altbilgisi; / div & gt;
& lt; / div & gt; 

05. Şablonu tanımlayın

Konteyner için CSS'ye bakın. Yine bir ızgara olarak tanımlanır. Üst satır 200 piksel yüksek olacaktır, orta otomatik boyutta olacak ve son satır 100 piksel yüksek olacaktır. Sütunlar yüzde 33'lük genişliğindedir ve gerisini otomatikleştirir. Şablon, başlığın her iki sütunu da dolduracağı durumlarda. Bir sonraki satır, ilk sütundaki kenar çubuğu ve bir sonraki içeriği olacaktır. Altbilgi her ikisi de gider.

 .container {
  Ekran: Izgara;
  ızgara şablonu satırları: 200px otomatik 100px;
  ızgara şablonu sütunları:% 33 otomatik;
  Izgara şablonları:
  "Header Header"
  "Kenar Çubuğu İçeriği"
  "altbilgi altbilgisi"; } 

06. Şablonu sınıfa bağlayın

Sınıfı şablona bağlamak için, burada gösterilen kod bunu tanımlar. Her ızgara alanı adlandırılır ve bağlantı oluşturulur. İçerik burada gösterilmemiştir, ancak 'Grid3.html' belgesinde. Şebekenin düzenini görmek için buna tarayıcıda bakın. İki sütun tanımlandığı için şablon, ters virgülün her birinde iki alana ihtiyaç duyar.

 .Header {
  ızgara alanı: başlık;
}
.sbar {
  ızgara alanı: kenar çubuğu;
}
.footer {
  Izgara alanı: altbilgi; } 

07. Duyarlı hale getirin

'GRID3.HTML' duyarlı hale getirmek için, bir medya sorgusu eklenir ve üst satır yüzde 200'de tutulurken, kalan satırlar otomatik olarak boyutlandırılır. Sadece bir sütun, tam genişlikte var, bu nedenle şablonun düzenini tanımlamak için her ters virgül içindeki bir kelimeye sahip. Bunlar, HTML'nin herhangi birini değiştirmeden kolayca yeniden düzenlenebilir.

 @Media ekranı ve (maksimum genişlik: 699px) {
  .container {
  Ekran: Izgara;
  ızgara şablonu-satırlar: 200px otomatik;
  ızgara şablonu sütunları:% 100;
  ızgara şablonu alanları: "başlık" "kenar çubuğu" "içerik" "altbilgisi";
  }
} 

08. Gerçek bir düzen üzerinde çalışın

Şimdi 'index.html' açın - içerik için HTML'nin tümü, tasarım öğeleri için bazı CSS'ye sahip olduğu gibi oluşturulmuştur. Bu ızgarayı kafa bölümündeki stil etiketlerine ekleyin. Bunu yapmak, her bölüm için şablonla üç sütunlu bir ızgara oluşturur. Boş ızgara bölümlerinin tam durağını not edin.

 .container1 {
  Genişlik:% 80;
  Marj: 0 Otomatik;
  Ekran: Izgara;
  ızgara şablonu satırları: Otomatik;
  Izgara şablonu-sütunlar:% 33.3% 33.3 otomatik;
  Izgara şablonu alanları: "Başlık başlığı başlığı" ". Standfirst standfirst" ".. Madde1" "Odak Pullquote Pullquote" "Madde2 Madde2.";
} 

09. Şablonu bağlayın

Önceki adımda olduğu gibi, bu başlığı şablonla bağlar. Başlığın, şebekenin üç sütunu da tam olarak yayması söylenir, daha sonra standfirst iki sütun alacak şekilde ayarlanır ve solda boş bir sütun var. Tarayıcıyı kontrol ederseniz, bu sütun doldurulur, çünkü kalan içerik bir sonraki boşluğu otomatikleştirir - ancak her şey kurulduğunda bunu yapmaz.

 .Header {
  ızgara alanı: başlık;
}
.standfirst {
  Izgara alanı: standfirst;
} 

10. Bir sonraki alanları ekleyin

Şimdi ilk makale, çekme teklifi ve odak görüntüsü tasarıma yerleştirilir. Çekme teklifi ve görüntü aynı satırda yan yanadır. Bu aşamada, Madde2, Standfirst'in yanında olan ızgarada ilk uygun alanı almıştır.

 .article1 {
  ızgara alanı: Madde1;
}
.Alıntı yap {
  ızgara alanı: Pullquote;
}
.focus {
  ızgara alanı: odaklanma;
  Metin Hizası: Merkez; } 

11. İlk ızgarayı bitirin

İkinci makalenin CSS'nin eklenmesi, ilk ızgaranın tümünün doğru yerleştirilmesini sağlar. Buna bakarak tarayıcıya bakıldığında, düzeninin arka plan görüntüsü ile çalıştığını ve tasarımcının büyük bir arka plan görüntüsü etrafında çalıştığı dergilerde görülen düzen türünü yarattığını gösterecektir.

 .article2 {
    ızgara alanı: Madde2;
    Sütun boşluğu: 65px;
    Sütun Sayısı: 2;
} 

12. Beyaz bir arka plan ekleyin

İkinci ızgaraya başlamadan önce, neden iki ızgara için bir ihtiyaç olduğunu merak edebilirsiniz. Bunun nedeni, bu ızgara beyaz tam genişliğinde bir arka plana sahip olacak, böylece bu CSS ikinci ızgarayı saracak. Bu, bu bölümü tasarımda ikinci bir sayfanın hissi vermektir.

 .whitebg {
    Dolgu: 100px 0;
    Arka plan rengi: #ddd;
} 

13. İkinci bir ızgara yapın

İkinci ızgara ilkten daha basittir. Satırlarda otomatik yüksekliğe sahip üç sütun var. İçerik, her biri bir sütunu dolduracak, böylece şablon alanlarını tanımlamanıza gerek yoktur. Bununla birlikte, tablet tasarımı eklendiğinde, bu iki sütuna geçmesi gerekir, bu nedenle bir yeniden bir tekrarlama gereklidir ve adlar önemli olacaktır.

 .container2 {
    Genişlik:% 80;
    Marj: 0 Otomatik;
    Ekran: Izgara;
    ızgara şablonu satırları: Otomatik;
    Izgara şablonu-sütunlar:% 33.3% 33.3 otomatik;
    ızgara şablonu alanları: "IMG1 IMG2 Madde3";
} 

14. Sütunları ekleyin

İkinci ızgaradaki CSS sınıflarının her biri, şablon şablonunda tanımlandığı gibi ilgili sütunla bağlantı kurması söylenir. Makale metin rengi sadece bu bölümün çakmak arka planına karşı çıkmasını sağlamak için değiştirildi. Sadece altbilgi ile tamamlamak için, dergi tarzı düzeninin tasarımı neredeyse yerindedir.

 .img1 {
  Izgara Alanı: IMG1;
}
.img2 {
    Izgara alanı: img2;
}
.article3 {
  Izgara alanı: Madde3;
  Renk: # 333;
} 

15. Sayfanın ayağını mükemmelleştirin

Bitirme Sayfası, siyah bir renkle doldurulacak ve metnin sadece merkezleneceği ekran boyunca tam genişlik bir div yerleştirir. Bu, tasarımın masaüstü sürümünü tamamlar, ancak ekranı 1200 piksel genişliğin altına doğru hareket ettirin ve site kırılmaya başlar.

 .footer {
    arka plan rengi: # 000;
    Renk: # 999;
    Metin Hizası: Merkez;
    Dolgu: 50px 20px 100px;
} 

16. Orta ekran tasarımı için ayarlayın

Tarayıcının genişliği 1200px'ten az olduğunda tasarıma bakmak için buraya bir medya sorgusu yerleştirilir. 17 ve 18 adımlarındaki kod, yorumun olduğu parantez içine yerleştirilecektir. Bu, her iki ızgara 'düzen yapısını değiştirme vakası olacaktır.

 @Media ekranı ve (maksimum genişlik: 1200px) {
  / * Burada kod * /
} 

17. İlk ızgarayı tekrarlamak

İlk ızgara şimdi tarayıcının tam genişliğini üç yerine sadece iki sütunla doldurun. Bölümlerin sırası şablona yerleştirilir, bu ekran boyutundaki arka plan görüntüsüyle daha iyi uyuyor.

 .container1 {
  Genişlik:% 100;
  ızgara şablonu satırları: Otomatik;
  ızgara şablonu sütunları:% 50% 50;
  Izgara şablonu alanları: "Başlık başlığı" "Standfirst standfirst" "Madde1." "Pullquote Pullquote" "Madde2 Focus";
  }
.makale 2 {
  Sütun Sayımı: 1;
  } 

18. Düzeninizi test edin

İkinci ızgara, tarayıcının tam genişliğini alacak şekilde yeniden boyutlandırılır ve iki sütun eklenir. Görüntüler, metnin üstünde yan yana yerleştirilir, böylece ekrana özenle uyuyor. Tarayıcınızı 1200 piksel genişliğin altındaki yeniden boyutlandırarak tarayıcıda bu düzeni test edebilirsiniz.

 .container2 {
  Genişlik:% 100;
  Marj: 0 Otomatik;
  ızgara şablonu satırları: Otomatik;
  ızgara şablonu sütunları:% 50% 50;
  ızgara şablonu alanları: "IMG1 IMG2" "Madde3 Madde3";
} 

19. Mobil için Tweak Tasarımı

769px'tan daha az genişliğe sahip olan herhangi bir tarayıcı, son adımlara eklenen kodu alacaktır. Tek yapmamız gereken, her bir ızgaranın her birinin, içeriğin daha küçük alanda doğru şekilde görüntülenebilmesi için tek bir sütun düzenine sahip olduğundan emin olun.

 @Media ekranı ve (maksimum genişlik: 768px) {
  / * Final adımları burada * /
} 

20. Tek sütun ızgarasını kontrol edin

Şimdi ilk ızgara, tarayıcının genişliğinin yüzde 100'ünde tek bir sütuna ayarlanır ve bölümlerin sırası şablon alanlarına eklenir. Sayfanın ilk bölümünün mobil ekranlarda nasıl çalıştığını kontrol edin.

 .container1 {
  Genişlik:% 100;
  ızgara şablonu satırları: Otomatik;
  ızgara şablonu sütunları:% 100;
  ızgara şablonu alanları: "başlık" "standfirst" "Madde1" "Pullquote" "Odak" "Madde2";
} 

21. Düzeni bitirin

Burada, ikinci ızgara ayrıca tek bir sütunu doldurmak için de yapılır ve bölümlerin düzeni tanımlanır. Şimdi bitmiş tasarımı kaydedin ve CSS ızgarasının tam düzenini görmek için farklı boyutlarda ekranlar ve farklı genişlikler için içeriği yeniden sıradayız.

 .container2 {
  Genişlik:% 100;
  Marj: 0 Otomatik;
  ızgara şablonu satırları: Otomatik;
  ızgara şablonu sütunları:% 100;
  ızgara şablonu alanları: "IMG1" "IMG2" "Madde3";
} 

Bu makale başlangıçta Creative Web Design Magazine Web Tasarımcısı'nda yayınlandı. Satın almak Sayı 271 veya abone ol .

İlgili Makaleler:

• Süper hızlı CSS için 5 ipucu
• CSS ekran özelliğini anlama
• CSS şekilleri ile bir piramit düzeni nasıl oluşturulur