CSS Izgara düzeni: çarpma ve fethetme - ya da gerçekten Izgara'yı kullanarak nasıl tasarımlanacağı.

Öğreticiler, JavaScript ipuçları vb. İçin beni Twitter'da takip edebilirsiniz.

Bu eğitimde CSS Izgarasını kullanarak duyarlı bir düzen tasarlayacağız. Ve işte, bir kuşun süreçten ne bekleyeceğine dair bakış açısı:

Flex'in nasıl çalıştığı hakkında iyi bir fikir edinmek için bu sayfadaki flex layout editörünü deneyin.

Bütün enchilada. Kaydırma işleminden zaman kazanmak için kuşbakışı göz görüntü resim içeriğini önceden göndermeyi seviyorum.

Çözünürlükten bağımsız el cihazları ile işler biraz karıştı. IMO, klasik duyarlı tasarım kurallarının bile değişmesine neden oluyorlar.

Bu yüzden, duyarlı bir tasarımı IQ testi gibi bir CSS şebekesi olasılıkları üzerinden geçirerek standartlaştırma arayışına girdim… ya da bir şey ... Ve bu, serideki CSS ızgarasıyla gerçek düzenler çizme konusundaki ilk eğitimim.

Keşfedilenleri takip ediyor.

Sütun Bölünmesinin Arkasındaki Temel Fikirler

Her sütun bölümünden gerçekte ne kazandığımızı bulmaya çalıştım.

Tek sütunlu tasarımlar, tüm içeriğimizi uzun dikey listeye koymamıza yardımcı olur.

İki sütunlu tasarımlar mini (tablet?) Resim galerileri / portföyler için uygundur.

Ağaç sütun tasarımları, sınırlar (kenar boşlukları) sunan ilk türdür.

Dört sütunlu tasarımlar tam ekran görüntü galerileri kadar iyi çalışır.

Tek sıra sütun düzenlerinin (≥ 1) sınır temelli düzenler için çalıştığını fark ettim.

Hmm. 5 sütunlu tasarım ne olacak? Tek sayılı sütunların kenarlık oluşturmak için sık sık kullanıldığını unutmayın. Çünkü her zaman 2 ekstra taraf olurlar.

Beş sütunlu tasarımlar, @ Orta gibi makale formatını oldukça iyi hale getirebilir.

Ve bu eğitimin geri kalanında bir tane yapmayı keşfedeceğiz!

Marj yaptığınız gibi genişlemelerini sağlamak için fr birimlerini kullanın: normal elemanlarda otomatik. Birincil içerik pikseller veya büyük (r) fr değeri (10fr, 20fr, vb.) Kullanılarak belirtildiği sürece, sınırlar için 1fr veya 2fr veya n-fr olması farketmez.

Buradaki tek fark, Medium'un geniş içerik için 1000px ve ana makale sütunu için 700px kullanmasıdır. Fakat fikir aynı.

Duyarlı Izgara + Mobil Yapma

Şimdiye kadar ana iskeleyi yarattık. Peki ya duyarlı tasarım?

CSS Izgarası düşündüğünüzden daha kolay şeyler yapar!

Hatırlamak:

duyarlı içerik! = duyarlı sınırlar.

İki teknik ayrı ayrı ele alınmalıdır. Fakat…

Genellikle - bu durumda olduğu gibi - duyarlı sınır sorununu çözerek, duyarlı içerik problemini çözmek mümkündür.

Yaratıcılığınızı birden fazla sorunu tek bir teknik kullanarak çözmek için kullanabilirsiniz.

Bunu söyledikten sonra, bu durumda, şablonunuzun dış şeritlerini 0,5fr'ye (mor ve mavi olanlar) değiştirerek çözebiliriz. Ve… ayrıca geniş bir alan yaratan yayılma alanını veya şablon alanlarını birden çok sütuna genişletmek . (Yukarıdaki pembe alan.)

Bunu medya sorguları veya JavaScript ile yapabilirsiniz.

Son olarak… ana şeridi (yeşil) 10fr olarak değiştirin. (Benzer bir değer kullanabilirsiniz, ancak ≥10 genellikle iyi çalışır.) Bu, ana (yeşil) şeridinizi otomatik olarak geçerli ekran çözünürlüğüne ölçeklendirir. Her iki sınır şimdi 0,5fr olduğundan, sınırlar ve içerik dahil her şey düzgün şekilde ölçeklenir.

0.5fr sınırlarını tamamen kaldırmanız gerekirse, bunları 0fr olarak ayarlayabilirsiniz. Ancak şahsen mobil görüşlerde küçük bir sınırın olmasını seviyorum. Sadece içerik şeridinin bence daha iyi görünmesini sağlıyor.

Mobil gitmek

Yukarıdaki adımların tümü takip edildikten sonra… Daha küçük bir alana sıkıldığında, bunun gibi bir şeye varmalısınız (yukarıda).

Burada ders öğrendin mi?

Daima en zarif çözümü bulmaya çalışın. Yani, temiz, karmaşık ve mümkünse tek bir değişiklik (veya iki tane) uygulayarak birden fazla sorunu çözüyor. Bu, göründüğü kadar zor değil.

  • Tek çözüm bu mu? Hayır.
  • Bu mükemmel bir çözüm mü? Hayır.
  • Fakat sorunu çözer ve işe yarıyor - yeterince.

Ve bu amaç için iyi bir şey. Bu eğitimde gösterilen yaklaşım:

1. Daha ödüllendirici ve eğlenceli
 2. Saygın.
 3. Bir şeyin nasıl ve neden işe yaradığını gerçekten anlamaya davet ediyor.
 4. Çok basit. Dolayısıyla bakımı kolay kod yaratır.
 5. Temiz kod üretir.
 6. Vicdanınızı temiz tutar.

Bundan bahsetmişken… aksi halde… “hack” kodunu başlatabilirsiniz. (Sık sık gerçekte nasıl çalıştığını anlamadan, problemleri deneme yanılma yoluyla çözmeye çalışmak.) Yine de işlerin bu şekilde yapılmasını sağlayabilirsiniz. Ve muhtemelen bazı türlerin başarısını bile hissedebilirsiniz. Ama… hiç eğlenceli olmayacak.

Gibi Dinamik Makale Düzenleyicisi?

Elbette, dinamik olarak oluşturulmuş bir makale editöründe, algoritmik olarak çalışmak için geniş içerikli sütunları kodlamanız gerekir. Yazarın hangi metin ve geniş içerik kombinasyonunu kullanmak istediğini asla bilemezsiniz.

Herhangi bir şekilde düzenlenebilirler. Ancak JavaScript'i ve zamanınızın birkaç saatini kullanarak, yukarıda açıklandığı gibi ızgara şablonu alanlarını değiştirerek dinamik olarak oluşturulmuş bir makale editörü (tıpkı Orta’lar gibi) yapmanın mümkün olduğunu düşünüyorum.

Bu mizanpajı (tabii ki), elinizle kendiniz tasarlıyorsanız ve daha sonra hangi tür içeriğin kullanılacağını biliyorsanız, basit statik makaleler için kullanabilirsiniz.

CSS dışı Grid benzeri alternatiflerin tasarımı için Grid alternatifi?

CSS şebekesi olmayan alternatif? Şey… çok fazla fark yok. Belki daha karmaşık. Hala algoritmik, ama normal DIV elemanlarını kullanıyorsun.

O ile iyi şanslar.

CSS kılavuzunun temiz koddan ödün vermeden işlemi basitleştirdiğini düşünüyorum.

Orta öğretici sayfam için bölümüne baktım. Bu bir karmaşa.

Son sözler

Öncelikle bir JavaScript programcısı olarak, web sitesi veya uygulama düzenlerinde hiç iyi olmamıştım. Özellikle duyarlı dönemden sonra geldi. Fakat CSS şebekesi bu zorlu görevi tekrar gözden geçirmem için bana ilham veriyor.

Benim adım adım talimatlar ve CSS şebekesiyle yapılan gerçek dünya düzeninin örnekleri gösterilmeye ihtiyacım vardı, böylece kendiminkini yapmaya başlayabilecektim.

Ancak… Bunu gösteren tek bir çevrimiçi eğitim bulamadım. Ben de kendiminkini yazmaya ve sizinle paylaşmaya karar verdim!

Her şey amaçlarına göre bir şeyler anlamaya çalışmakla ilgili.

CSS ızgarasını iyi tanımak için zaman harcıyorsanız, hile yapmak gibi bir şey.

Neredeyse yerleşim tasarımında kendimden daha iyi olduğumu hissettiriyor.

Bu noktada CSS şebekesine bağımlı olduğumu ve bundan sonraki tüm düzenlerimi oluşturmak için bundan sonra kullanacağımı söylemeliyim.

Umarım bu basit fikirler CSS Izgarasını daha iyi tanımanıza yardımcı olur.

Daha Fazla Haftalık Freemium için ...

Haftasonu PDF hediye için beni Twitter'da takip edebilirsiniz.

JavaScript’e hızlıca ulaşmak için Instagram'da beni takip et.

Ücretsiz kodlama için beni Facebook'ta takip edebilirsiniz.

Sınırlı zaman teklif

Bu eğitimdeki şemalar doğrudan yazıdan etkilenmiştir!

CSS Visual Dictionary Orta okuyucular için% 28 indirim.

% 28 indirim

Sadece Orta Okuyucular:

CSS Görsel Sözlük

== bir kopyasını al ==

Tüm CSS özelliklerini içerir.