10 Kullanışlı CSS Izgara Kodu Parçacığı

CSS ızgara özelliği tam olarak "yeni" değil, ancak ana akım geliştirme dünyasında kesinlikle daha yeni. Pek çok ön uç kodlayıcı, bir arayüze nasıl uygulanacağını bir yana, CSS ızgara özelliklerini henüz bilmiyor bile.

Etrafta arama yaparak çok sayıda öğretici bulabilirsiniz, ancak kod parçacıklarını incelemenizi de tavsiye ederim. Bu şekilde gerçek dünya projelerine dalmış olursunuz, böylece canlı bir web sayfasında CSS ızgaralarının nasıl çalıştığını görebilirsiniz.

Bu koleksiyon, web'de yaptığınız her şey için CSS ızgaralarını öğrenmenize, özelleştirmenize ve yeniden biçimlendirmenize yardımcı olacak birçok kaynak sunmalıdır.

1. Çoklu Görüntü Kahraman Bloğu

Izgara özellikleriyle tasarlanmış bu gerçekten harika kahraman bloğu ile bir şeyler başlatalım. Bu tasarım, birçok dergi tarzı web sitesinde bulacağınız ana sayfa kahraman resmi bölümünü taklit eder.

Geliştirici Rachel Andrew, bunu kendi projelerinden biraz özel CSS kullanarak yarattı. İnanılmaz derecede iyi çalışıyor ve tasarım, önyüklemeye tamamen duyarlı.

Mobil ekranlarda harika göründüğünden bahsetmiyorum bile; her zaman büyük görüntü bloklarıyla bulduğunuz bir şey değil.

Bu, CSS ızgaralarını incelemek için mükemmel bir kaynak ve dergi tarzı bir blog teması kodlayan herkes için kullanışlı bir pasaj.

2. CSS Izgara Düzeni

Izgara-otomatik akış özelliği, "yoğun" ayar kullanılarak bu demo ile tam ekranda. Bu, ızgara yeniden boyutlandırılırken öğeleri sayfada daha aşağı sıkıştırmaya zorlar.

Bu ayarla, hangi sayfa öğelerinin konum değiştirdiği, bu değişikliklerin nerede olduğu ve kılavuzun nasıl yanıt vermesi gerektiği konusunda çok fazla kontrolünüz var. Bu, öncelikli olarak duyarlı tasarımda kullanılan medya sorgularının önüne geçer.

Bu kodun ne yaptığından emin değilseniz, unutmayın: Google arkadaşınızdır! Bu kurulumun tamamını kapsayan çok sayıda harika gönderi ve Yığın Taşması dizisi.

3. Pek Ürkütücü Olmayan Kabak Gerçekleri

İşte bazı temel balkabağı gerçekleriyle oluşturulmuş oldukça havalı bir pasaj. Pekala, bir CSS ızgara düzeni tarafından düzenlenen balkabağı gerçekleri.

Kod aslında SCSS/Sass üzerinde çalışır, bu da, kazmak için dile biraz aşina olmanız gerektiği anlamına gelir. Ancak, temel özellikleri görmek istiyorsanız, Sass kodunu CodePen'in içinde ham CSS'de de derleyebilirsiniz.

Bu tasarımla ilgili en sevdiğim şeylerden biri renk ve tipografi. Balkabağı simgesi ve sarı/turuncu tonlarının tümü ile gerçekten Cadılar Bayramı'nı haykırıyor.

4. Otomatik Altıgen Düzen

Bu belki de bu galeri için bulduğum en pratik projelerden biri. Bu ızgara stiline bir göz atın ve tarayıcınızı yeniden boyutlandırmayı deneyin.

Altıgen şekilli öğelerin, sayfaya uygun şekilde sığacak şekilde yeniden biçimlendirildiğini fark edeceksiniz. Bu muhtemelen çok sayıda fotoğraf içeren karmaşık sayfaları işlemenin en iyi yoludur. Bu tür yerleşim düzenini konferans web sitelerinde ve çok sayıda çalışanı olan şirketler için “hakkımızda” sayfalarında sık sık görüyorum.

Artık CSS ızgara yapısıyla, manuel yanıt veren stiller hakkında endişelenmenize gerek yok. Ve bu kod parçacığı, benzer bir düzeni planlamak için en iyi başlangıç ​​noktasıdır.

5. CSS Izgarasında Pokedex

Henüz bir CSS ızgarasında bu Pokedex kadar yaratıcı bir şey görmedim. Hücre boyutlarını otomatik doldurma için biraz JavaScript ile HTML ve CSS'ye dayanır.

Sayfayı yeniden boyutlandırdıkça, grafiklerin kendilerinin de boyut olarak arttığını fark edeceksiniz. Bu, CSS ile halletmek oldukça kolaydır ve bazı ızgara özelliklerini öğrendikten sonra daha da kolaydır.

Bunun etkileşimli olmadığını unutmayın, bu nedenle hiçbir şeyi tıklayamaz veya yeni sayfalar açamazsınız. Ancak taştan yapılmış yerleşim düzeniyle, bu özellikleri eklemek oldukça basit olurdu.

6. Basit Izgara

İşte baskı tasarım stillerini web'e getiren gerçekten ilginç bir fikir. Başlıkları ve büyük boyutlu tipografisi olan birçok sütun içeren CodePen'deki bu örneğe bir göz atın.

Izgara düzeninin kendisi, önceden tanımlanmış boşluklara sahip ayarlanmış sütunlara dayanır. Bu, tarayıcıyı yeniden boyutlandırdığınızda, belirli sütunların bu kurallara göre bozulduğu anlamına gelir.

Belirli sütunların her zaman yan yana veya en azından görünümde görünmesini sağlamak için mükemmel bir yoldur, böylece okunması kolaydır.

7. Flexbox Geri Dönüşlü CSS Izgarası

Tüm tarayıcılar CSS ızgara yapısını yakalamamıştır. Bu nedenle, bu pasaj size flexbox'ı (ve kayan noktaları) geri dönüş olarak kullanarak özel bir CSS ızgarası tasarlamayı öğretir.

Izgara özelliklerini destekleniyorlarsa kullanmak istediğinizden, ancak desteklenmiyorsa tarayıcının bunları yoksaymasını istediğinizden, bu aslında zordur. Neyse ki kod iyi yorumlanmıştır, böylece inceleyebilir ve hatta bazı özellikleri kendiniz ayarlamayı deneyebilirsiniz.

Buna mükemmel bir geri dönüş çözümü demezdim ama kesinlikle hiç yoktan iyidir.

8. Izgara Terminolojisi Demosu

Tüm bu kafa karıştırıcı CSS ızgara terminolojisinden emin değil misiniz? O zaman bu pasaj, işleri netleştirmeye yardımcı olabilir.

Bu örneği incelerseniz, yol boyunca ızgaraları açıklayan yazılar içeren birkaç vurgulanmış özellik bulacaksınız. Ayrıca kılavuz çizgilerine nasıl düzgün bakacağınızı ve sayfada CSS ızgaralarını nasıl doğru göreceğinizi öğreneceksiniz.

Her şeyi kapsamadığı için bu demodan her şeyi toplamayacağınızı unutmayın. Bu, yardımcı olacak görsel yardımcılarla en kolay mülklere yalnızca küçük bir giriştir.

9. Izgara şablonu sütunlarını kullanma: tekrarlama()

Grid-template-columns özelliğinin çok özel bir örneği için bu canlı demoya bir göz atın. CSS'nizde aynı sütun değerini birden çok kez bildirmek yerine tekrar özelliğini nasıl kullanacağınızı gösterir.

Yine, tarayıcı desteği hala buna yetişiyor ancak çoğu modern web tarayıcısı bu teknikle çalışıyor.

Bunun ne işe yaradığını anlamanıza yardımcı olmak için CSS içinde bolca yorum bulacağınızdan bahsetmiyorum bile.

10. Saf CSS Izgarası Bulmaca

Eğlenceli bir notla bitirmek için Adrian Roworth'un saf CSS bulmacasına bir göz atın. Bu düzenin tamamı HTML ve CSS kodu, özellikle düzen yapısı için CSS ızgara özellikleri üzerine inşa edilmiştir.

Daha da çılgın olan şey, bulmacaları gerçekten çözmek için bulmaca kutularına içerik girebilmenizdir. Ne kadar serin!

Bu şeyin oldukça karmaşık olduğunu ve burada listelenen mobil uyumlu olmayan birkaç projeden biri olduğunu unutmayın. Ancak bu, web'deki ızgara düzenleri konusunda ne kadar ilerlediğimizin kanıtı, bu yüzden yakın gelecekte bu tür şeyleri daha çok göreceğimizi umuyorum.