CSS Izgara Düzenini Kullanarak Kart Düzeni Nasıl Oluşturulur

Editörün notu: Bu konuk gönderisi, kod üretme sanatını seven bir UX yazılım mühendisi ve web tasarımcısı olan Abbey Fitzgerald tarafından yazılmıştır.

CSS Izgara Düzenleri, web tasarımcılarının çalışma şeklini değiştiriyor ve web sitesi içeriğini düzenlemenin daha verimli bir yolunu sağlıyor.

Uzun zamandır bekleniyordu ama sonunda bu yaklaşım gerçekten yükseldi ve birçok durumda üretim aşamasında. Web sitelerinin tasarlanma biçiminde devrim yarattı ve tasarımcılar bir kez 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 düzen yaklaşımıyla ilgili bilgiler bulmuş olabilirsiniz. Şunlar gibi: üstbilgi, içerik, altbilgi vb.

Ancak 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 Grid ile verimli bir şekilde oluşturulabilirler. Bu yöntem kullanılarak, kart içerik alanları kolayca tekrarlanabilir, birçok farklı cihaz türünde görüntülenebilir ve boyut kolayca kontrol edilebilir.

CSS Izgara Düzeni Araçları

İlerlerken, sayfadaki şeyleri incelemek isteyeceksiniz. Firefox, ızgara alanlarını görmek için harika geliştirici araçlarına sahiptir. Firefox geliştirici araçlarını kullanarak ızgarayı özetleyen bir yer paylaşımı görebilirsiniz. Firefox Developer Edition da bu yeteneğe sahiptir.

Görüntülemek istediğiniz Kaplama Izgarasını seçin (tasarımınıza bağlı olarak birden fazla olabilir). Izgara Görüntüleme Ayarları, hat numarasını, alan adlarını ve hatların nasıl uzamasını istediğinizi görüntüleyerek daha yakından bakmanızı sağlar. Tasarım yaparken bu 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, kullanımı sezgisel olan ilginç bir UI öğesinin yanı sıra içeriği görüntülemenin harika bir yoludur. Ayrıca, kullanıcıların içeriği hızlı bir şekilde taramaları ve en çok ilgilendikleri şeylerle ilgilenmeleri için harika bir format sağlarlar. Kartlar ayrıca tasarımcıların içeriği harika görüntüler, giriş içeriği, bağlantılar ve daha fazlasıyla görsel olarak çekici bir şekilde biçimlendirmesine olanak tanır!

Kartlar ve Genel Sayfa Düzeni

Bir yandan, CSS Izgarasının 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ında CSS Izgarası kullanılmasa bile ızgara yaklaşımı özellikle burada kullanılabilir. Izgara alanı tanımlandığı ve display: grid; paketleyicide bildirildiyse, bu yaklaşım kullanılabilir.

Belirli Sayıda Kartla Çalışma

Bazı durumlarda, belirli sayıda kart için planlama yapmak kolaydır. Belirli miktarda içerikle, kart sayısı aynı kalacaktır. Örneğin, her biri kendi kartında olmak üzere, iş tekliflerini açıklayan dört kart olabilir.

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

 [css] .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; } [/css]

.cards değerini ızgaraya 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ıyla bildirilecektir.

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

Kart Sayısı Ayarlamak için Tekrarla

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 birlikte repeat kullanılır. Bu işlev iki bağımsız değişken 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. Alan hesaplamalarını basitleştirmeye yardımcı olur.

Kesirli birimler tek başına kullanılabilir veya 1fr bir 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 olduğunda, iki kesirli birim bir kesirli birim olarak iki kat yer kaplar.

Dinamik Kart Sayısı için tekrarlayın

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

 [css] grid-template-columns: repeat(auto-fill, 250px); [/css]

auto-fill ek olarak genişlik bildirimleri gereklidir. Dikkatli olun, bir px değeriyle, kartı sığdırmak 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 Minmaks

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

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

Sütunlar her zaman ızgaraya sığacak ve kartlar en az 200 piksel olacaktır. Minimum alan, alana tam olarak uymadığında, maksimum genişlik burada devreye girer. 200px genişliğindeki başka bir kart sığmadığı zaman, diğer kartlar 200px'den büyük olacağından, sırayı daha fazla boşlukla doldurmak için esnerler ve eşit olarak dağıtılırlar. [article id=”21612″ hizala=”sağ”]

mobil

En küçük ve en büyük kartlar planlandığına göre, mobil hakkında konuşmak için iyi bir zaman. Kartlar, daha büyük ve daha küçük cihazlarda iyi çalışır çünkü içerik sindirilebilir parçalar halindedir ve kartlar kolayca yukarı ve aşağı ölçeklenebilir. CSS Grid 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 cep telefonuna sığacak şekilde küçültülmesi ve kullanılabilir alanın bir kısmı olacak şekilde büyütülmesi gerekir, böylece daha küçük bir cihazda tam genişlikte görünürler, ayrı bir medya sorgusu gerekmez:

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

Kartın minimum genişliği 300 pikseldir. Sırada sığabilecek kadar çok 300px kart görünecektir. Cihaz çok küçük olduğunda, arka arkaya iki kart için yeterli alan bulunmama ihtimali yüksektir. İşte o zaman 1fr devreye giriyor. Kesirli birim, duyarlı tasarımlar için harikadır. 300px kartlarından 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 mevcut tüm alanı kaplayacak ve üst üste istiflenecektir.

Izgara 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 kaplarında mevcuttur ve tasarımda oluklar oluşturmayı kolaylaştırır. Grid-column-gap her kart arasındaki boşluğu oluşturur. grid-gap ifadesini gördüğünüzde bu, grid-row-gap ve grid-column-gap için kısa 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 söz konusu olduğunda, öğrenilecek çok şey ve birçok olasılık vardır. CSS Izgara Düzeni hakkında bilgi edinmenin en iyi yolu, bazı ek okumalar yapmak ve deneyler yapmaktır. Dışarıda pek çok harika kaynak var, ancak işte başlamanız için birkaç tanesi:

• Örneğe Göre Izgara
• Wes Bos'tan CSS Izgara Düzeni kursu
• Mozilla CSS Izgarasına Giriş