CSS Izgara Düzeni kullanarak bir kart düzeni nasıl oluşturulur

CSS Izgara Düzenleri, web tasarımcılarının çalışma şeklini değiştirerek web sitesi içeriğini düzenlemenin daha verimli bir yolunu sağlıyor. Uzun zamandır bekleniyordu, ancak sonunda bu yaklaşım gerçekten başarılı oldu ve çoğu durumda üretimde. Web sitelerinin tasarlanma biçiminde devrim yarattı ve tasarımcılar bir kez buna alışınca, web düzenlerine daha fazla esneklik kazandıracak.

CSS Grid ile tasarlamayı denediyseniz ve web'deki öğreticilere göz attıysanız, genel bir yerleşim yaklaşımıyla ilgili bilgiler bulmuş olabilirsiniz. Şunlar gibi şeyler: üst bilgi, içerik, alt bilgi vb. Bununla birlikte, CSS Izgarası kartlar gibi diğer web sitesi ayrıntıları için de yararlı olabilir. Kart düzenleri, içeriği görüntülemenin yaygın bir yoludur ve CSS Izgarası ile verimli bir şekilde oluşturulabilir. Bu yöntem kullanılarak kart içerik alanları kolaylıkla tekrarlanabilmekte, birçok farklı cihaz tipinde görüntülenebilmekte ve boyutu kolaylıkla kontrol edilebilmektedir.

CSS Izgara Düzeni Araçları

Devam ederken, sayfadaki şeyleri incelemek isteyeceksiniz. Firefox, ızgara alanlarını görmek için harika geliştirici araçlarına sahiptir. Geliştirici araçlarında Firefox'un 52 sürümünde, ızgarayı ana hatlarıyla belirten bir kaplama görebilirsiniz. Firefox Developer Edition da bu yeteneğe sahiptir.

Görüntülemek istediğiniz Kaplama Izgarasını seçersiniz (tasarımınıza bağlı olarak birden fazla olabilir). Izgara Görüntüleme Ayarları, satır numarasını, alan adlarını ve satırların nasıl uzatılmasını istediğinizi görüntüleyerek daha yakından bakmanıza olanak tanır. Tasarım yaparken bu size yardımcı olacaktır.

CSS Izgara Düzeni ile basit kartlar

CSS Izgarasında yeniyseniz, temel bilgileri tazelemek ve basit bir CSS Izgara Düzeni oluşturmak isteyeceksiniz. Kartlar, içeriği görüntülemenin harika bir yoludur ve kullanımı sezgisel olan ilginç bir UI öğesidir. Bir kullanıcının içeriği hızlı bir şekilde taraması ve en çok ilgilendikleri şeyle etkileşime geçmesi için harika bir formattır. Kartlar, tasarımcıların içeriği harika görüntüler, giriş içeriği ve bağlantılarla görsel olarak çekici bir şekilde biçimlendirmesine de olanak tanır.

Kartlar ve genel sayfa düzeni

Bir yana, CSS Grid'in tüm sayfa düzeninde kullanılması gerekmediğini bilmek önemlidir. Gerekirse sayfanın belirli alanlarında ızgaralar kullanılabilir. Bu, kart düzenleriyle ilgili bir eğitim olduğundan, sayfanın geri kalanı CSS Izgarasını kullanmasa bile yalnızca burada bir ızgara yaklaşımı kullanılabilir. Izgara alanı tanımlandığı ve display: grid; sarmalayıcıda bildirilirse, bu yaklaşım kullanılabilir.

Belirli sayıda kartla çalışırken

Bazı durumlarda, belirli sayıda kart için planlama yapmak kolaydır. Belirli bir içerik miktarı ile kart sayısı aynı kalacaktır. Örneğin, iş tekliflerini açıklayan dört kart olabilir ve her teklif kendi kartındadır.

Bu örnekte (ve diğerleri), tüm .card öğeleri bir .cards kapsayıcı öğesinin içindedir. Bunu başarmak için oldukça basit.

.cards {

display: grid;

grid-template-columns: repeat(3, 1fr);

grid-auto-rows: auto;

grid-gap: 1rem;

}

 

.card {

border: 2px solid #e7e7e7;

border-radius: 4px;

padding: .5rem;

}

.cards değerini ızgarada görüntülemek önemlidir. Bu olmadan ızgara alanları oluşturulamaz. Bir sonraki adım, grid-template-columns tanımlamak ve stili seçmektir. Gerçek kart stili, bir .card sınıfı ile bildirilecektir.

Bu örnekte, .card sınıfına sahip birden çok makale etiketi göreceksiniz. Codepen'de görün.

Belirlenen kart sayısı için tekrarlayın

Kartların şekillenmeye başladığı yer burasıdır. Satır başına değişken miktarda sütun oluşturmak için, repeat() işleviyle tekrar kullanılır. Bu işlev iki argüman alır: tekrarlanacak sayı ve tekrarlanacak değer.

Örneğin, grid-template-columns: repeat(3, 200px); grid-template-columns: 200px 200px 200px; .

kesirli birim

Örnek kodun bir "fr" kullandığını göreceksiniz. Bu tam olarak nedir? Bu ölçü birimi, CSS Grid ile popüler hale geldi. Fr "kesirli birim" anlamına gelir ve 1fr kullanılabilir alanın 1 bölümünü kaplar. Uzay hesaplamalarını basitleştirmeye yardımcı olur.

Kesirli birimler tek başına kullanılabilir veya 1fr genişlik belirtmenize izin verir ve alt öğeler de ekleyebilirsiniz. Birden çok fr, tüm alt öğeler arasında eşit olarak paylaşılacaktır.

Farklı kesirli birimler belirtilebilir. Örneğin, ızgara sütunları 1fr 2fr 1fr , iki kesirli birim, bir kesirli birimin iki katı kadar yer kaplar.

Dinamik sayıda kart için tekrarlayın

Bazı durumlarda, gereken kart sayısını bilmeyebilirsiniz, bu nedenle belirli bir sayıyı planlamak işe yaramaz. Tekrarlamada olduğu gibi aynı yaklaşım kullanılacaktır, ancak otomatik doldurma ile gerektiği kadar sığdırma seçeneği vardır.

grid-template-columns: repeat(auto-fill, 250px);

auto-fill ek olarak genişlik bildirimleri gereklidir. Bir px değeriyle, kartın sığması için yeterli olmadığında sağda boşluk olabilir, ancak biraz sonra göreceğiniz gibi durum böyle olmak zorunda değildir.

Kart genişliği üzerinde daha fazla kontrol için Minmax

Minmax mükemmel bir çözümdür, çünkü kesirli bir birim tek başına kartları tam genişlikte yapar. Stil bildirimine hem tekrar hem de minmax eklemek olası boş alandan kurtulacak ve kartlar daha akıcı görünecektir.

grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));

Sütunlar her zaman ızgaraya sığacak ve kartlar en az 200 piksel olacaktır. Minimum alan, alana tam olarak uymadığında, maksimum genişliğin devreye girdiği yer burasıdır. 200 piksel genişliğinde başka bir kart sığmadığında, diğer kartlar 200 pikselden daha büyük olacaktır, bu nedenle satırı daha fazla alanla doldurmak için uzarlar ve eşit olarak dağıtılır.

WordPress sitenizi nasıl mobil uyumlu hale getirirsiniz?

Mobil uyumlu WordPress sitelerinin yeni norm olduğu bir sır değil, ancak ne kadar yaygın görünseler de güzel, duyarlı bir site oluşturmak için biraz çalışma gerektirebilir. Bu rehber...

mobil

En küçük ve en büyük kartlar planlandığından, mobil hakkında konuşmak için iyi bir zaman. İçerik sindirilebilir parçalar halinde olduğundan ve kartlar kolayca yukarı ve aşağı ölçeklenebildiğinden, kartlar giderek daha büyük cihazlarda iyi çalışır. CSS Izgarası harika bir mobil deneyim oluşturmaya yardımcı olur ve bazı durumlarda ayrı bir medya sorgusuna sahip olmaktan çok daha kolaydır.

Bu örnekte, kartların mobil ortama sığacak şekilde küçültülmeleri ve kullanılabilir alanın çok küçük bir bölümü olacak şekilde büyütülmeleri gerekir, böylece daha küçük bir cihazda tam genişlikte görünürler ve ayrı bir medya sorgusu gerekmez:

grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));

Kartın minimum genişliği 300 pikseldir. Sırada sığabilecek kadar çok 300 piksel kart görünecektir. Cihaz çok küçük olduğunda, arka arkaya iki kart için boş alan olmaması ihtimali yüksektir. İşte o zaman 1fr girer. Kesirli birim, duyarlı tasarımlar için mükemmeldir. 300 piksellik kartlardan ikisi sığmadığında, mobil görünümün çok belirgin olduğu yer burasıdır. 1fr maksimum genişlik olarak bildirildiğinde, tek bir kart tüm kullanılabilir alanı kaplayacak ve birbirlerinin üzerine yığılacaktır.

ızgara boşluğu

Artık kartların genişliği belirlendiğine göre, aralarında boşluk olmasına karar verilmelidir. Bu özellik ızgara kaplarda mevcuttur ve tasarımda oluklar oluşturmayı kolaylaştırır. Grid-column-gap , her kart arasında boşluk yaratır. grid-gap gördüğünüzde, bu grid-row-gap ve grid-column-gap için kısayol anlamına gelir. Grid-row-gap , kartın üstündeki ve altındaki boşluktur, grid-column-gap , kartın solundaki ve sağındaki boşluktur.

CSS Izgara Düzeni Kaynakları

CSS Izgara Düzenleri, web tasarımında nispeten yenidir. Öğrenecek çok şey var ve birçok olasılık var. CSS Izgara Düzeni hakkında bilgi edinmenin en iyi yolu, bazı ek okumalar ve denemeler yapmaktır. Dışarıda birçok harika kaynak var, ancak başlamanıza yardımcı olacak birkaç tane var:

• Örnek Tablo
• Wes Bos'tan CSS Grid Layout kursu
• Mozilla CSS Izgarasına Giriş

WordPress eklentileri geliştiricileri sever

Site geliştirmeyi hızlandıran mükemmel WordPress eklentisini bulmak, bir dizi koddaki tek bir yazım hatasını bulmaya çalışmak gibidir – biraz zaman alabilir. Ve bu günlerde, farklı görevler için o kadar çok eklenti var ki, bir sitenin tam olarak hangi işlevselliğe ihtiyaç duyduğunu (veya gerekmediğini) ve hangi eklentilerin bunu verimli bir şekilde sağladığını belirlemek zor olabilir.

Geliştiriciler için en çok önerilen eklentilerimizin listesi için bu e-kitabı indirin! Tüm bu eklentilerin kullanımının basit olduğunu, sitenizde çok fazla performans gerektirmediğini ve tamamen güvenilir olduğunu gördük.

Yeni favori eklentinizi yüklemeye hazır mısınız? Hadi dalalım!

Başka bir CSS eğitimine hazır mısınız? Bunları kontrol et!

• Verimli düzenler için Flexbox ve CSS ızgaraları nasıl birleştirilir
• Duyarlı tasarımlar oluşturmak için CSS kesme noktaları nasıl kullanılır?
• CSS ile SVG animasyonları nasıl oluşturulur