8 Son teknoloji CSS özellikleri (ve bunların nasıl kullanılacağı)

CSS sürekli gelişmekte ve bir web tasarımcının araç setinde özellikleri daha güçlü bir silah yapmak için, bir dizi heyecan verici yeni özellik eklenmiştir.

CSS ızgarası, daha önce görülmeyen yeni seviyelere düzenler, özel özellikler değişken kavramını tanıtırken, tarayıcı desteğini kontrol eder. Medya sorguları, yeni erişilebilirlik özellikleriyle bir seviye yükselir, değişken yazı tipleri minimum kod şişesiyle maksimum yaratıcılık sunarken, kaydırma işlemi, JavaScript'e olan ihtiyacı ortadan kaldırır. Serinimize göz atın CSS animasyonu ne oluşturabileceğinizi görmek için örnekler. Veya, kodsuz bir site oluşturmak için bunları deneyin Web Sitesi İnşaatçıları .

Yaratıcı olmak için arayanlar için, benzersiz düzenler için CSS şekilleri ve Photoshop tarzı tasarım efektleri tanıtmak için bir Mons Mouse ve Filtres. Bunları en son işlemlerinizde nasıl kullanabileceğinizi öğrenmek için okuyun. Ancak unutmayın, karmaşık bir web sitesi, ihtiyacınız olduğunuz anlamına gelir. ağ sağlayıcısı İhtiyaçlarınızı destekleyebilecek hizmet.

01. Özel Özellikler

SASS gibi bir ön işlem kullanıyorsanız veya gerçekten de JavaScript gibi bir programlama dili kullanıyorsanız, hiçbir şüpheniz yoktur - kodunuz boyunca yeniden kullanım için tanımlanan değerler - değerler. Özel Özellikler, ön işlemcilere ihtiyaç duymadan bunu CSS'de yapmamızı sağlar. Değişkenler ayarlanabilir: kök seviyesi (küresel değişkenler oluşturma) veya bir seçici içinde kapsamıştır. Daha sonra sözdizimi kullanılarak denilebilirler var (-> - myvariablename). Örneğin, denilen bir değişken ayarlayabiliriz. --ana renk böyle:

 / * kök elemanın üzerinde (bir küresel
değişken) * /
:kök {
- -primarycolor: # f45942;
}
/ * Bir seçiciye kapsamıştır * /
.my-component {
- -primarycolor: # 4171F4;
} 

Şimdi bu değişkeni özellik değeri olarak kullanabiliriz:

 H1 {
Renk: var (- -primarycolor);
} 

Bazı çok yararlı etkileri olan özel özellikler devralınır. Bunlardan biri tema. Yukarıdaki örneği alın: Biz bir küresel değişken (# f45942 - parlak bir orangey kırmızı) tanımlayabiliriz. --ana renk Kök düzeyinde, bu değişkeni kullandığımız her örnek değer kırmızı olacaktır. Ancak aynı değişkeni, bir seçici içindeki aynı değişkeni, farklı bir değere sahip (# 4171F4 - orta mavi) ile yeniden tanımlıyoruz. Yani kullandığımız her örnek için --ana renk Bu seçici içindeki değişken, hesaplanan değer mavi olacaktır.

Varsayılan ayarları ayarlama

Değişkenlerin çoğalması harika bir özelliktir, ancak zamanında sizi yakalayabilecek biri! Henüz tanımlanmamış bir değişken kullanmaya çalışırsanız, ortaya çıkan değer, tarayıcı varsayılanına geri döner, ya da cascade daha fazla tanımlanan bir değişken yerine kalıtsal bir değere geri döner. Bazı durumlarda, varsayılan bir değer belirlemesi uygun olabilir:

 H1 {
Renk: var (- -primaryolor, mavi);
} 

Özel özellikler ön işlemci değişkenlerinden nasıl farklıdır?

Özel özellikler ön işlemci değişkenlerinden birkaç dakika içinde farklılık gösterir. Önişli değişkenler, kodunuzun tarayıcıya gönderilmeden önce derlenir. Tarayıcı asla bir değerin değişken olduğunu görmez, yalnızca son sonucu görür. Özel Özellikler Tarayıcıda hesaplanır. Onları modern geliştirici araçlarında inceleyebilir, değişkeni değiştirebilir ve çözülen değeri görebilirsiniz. Onlar dinamik değişkenlerdir, yani değerleri CSS içerisinde veya JavaScript ile çalışma zamanında değiştirilebilir.

Ön işlemci değişkenlerinin aksine, özel özellikler seçici isimleri, özellik tuşları veya medya sorgu beyannameleri içinde kullanılamaz - yalnızca CSS özellik değerleri. CSS ön işlemciler hala bol miktarda avantajlara sahiptir, bu yüzden onları bir süre daha yapışmasını görebiliyoruz, ancak muhtemelen özel özelliklerle birlikte daha sık kullanılacaklar.

02. Özellik sorguları

Özellik sorguları, bir tarayıcının CSS dosyanızda belirli bir CSS özellik değeri kombinasyonunu destekleyip desteklemediğini test etmenin bir yoludur. Modernizr gibi özellik-algılama kütüphaneleri ihtiyacını neredeyse kaldırırlar. Sözdizimi bir medya sorgusuna benzer: Kural kullanıyorsunuz @supports , ardından mülk değeri çiftiniz izledi, tarayıcı belirtilen koşulları karşılıyorsa, kodu yürütülür.

Özellik sorguları, modern tarayıcılarda iyi desteklenir, ancak nispeten yenidir ve bir "Gotcha", destek için test etmek isteyebileceğiniz bazı tarayıcıların, özellik sorgularını kendileri desteklemeyebilir. Bununla birlikte, bunu idare etmenin en iyi yolu, önce (özellik sorgusunun dışında), daha sonra içindeki tarayıcıları desteklemek için geliştirmelerinizi sarın. @supports kural.

Farkında olun, özellik sorguları sadece az miktarda kullanılmalıdır. CSS'nin en büyük özelliklerinden biri, tarayıcıların anlamadıkları herhangi bir özellik veya değerleri yok saymasıdır. Yalnızca yapmadığınızda sadece özellik sorgularını kullanmak en iyisidir, böylece bir görsel hataya neden olur, aksi takdirde kendinizi çok fazla iş için ayarlayabilirsiniz.

Özellik Sorguları Nasıl Kullanılır

Tek bir özellik değerinin desteğini test etmek için önce gerileme sağlayabiliriz. Bu örnekte, ızgara düzenini desteklemeyen tarayıcılar için bir FlexBox Fallback veriyoruz.

 .MY-Component {
Ekran: Izgara;
}
@supports (ekran: ızgara) {
.my-component {
Ekran: Flex;
}
} 

03. Medya sorguları

Viewport'un genişliğini ve yüksekliğini ve medyanın türünü (en yaygın olarak ekran veya baskı) tespit etmek için medya sorgularını kullanmaya alışacaksınız. Seviye 5 medya sorguları spesifikasyonu bize bazı yeni medya özelliklerini (isteğe bağlı olarak) için bazı tarayıcılarda daha fazla desteklenir. Bunlar erişilebilirlik için bazı büyük avantajlar sunar.

Vestibüler bozukluğu olan kullanıcılar ve hareket hastalığından muzdarip olanlar, animasyonlar ve paralaks kaydırma efektleri gibi birçok hareketli web sayfalarını takdir etmeyebilir. Prefer indirimli-hareketli ortam sorgusunu kullanarak, indirgenmiş bir alternatifi olan kullanıcılara sağlayabiliriz.

 .my-element {
Animasyon: 500MS'yi kolaylıkla sallayın 5;
}
@Media (prefers-indirgenir-hareket: azalt) {
.my-element {
Animasyon: Yok;
}
} 

Web sitelerinin alternatif bir karanlık tema sağlaması giderek daha popüler hale geliyor. Özellikler-renk şeması, kullanıcının sistem çapında bir tercihi belirlemesini (Koyu, Işık veya NO-Tercihler'i kullanarak) sorgulamamızı sağlar ve uygun renk şemasını buna göre göstermenizi sağlar.

 / * Medya sorguları 02 * /
vücut {
Arka plan: Doğrusal gradyan (için
alt, # b5faff, # ffe2b4);
}
@Media (tercih-renk şeması: karanlık) {
vücut {
Beyaz renk;
Arka plan: Doğrusal gradyan (için
alt, # 0c1338, # 3E3599);
}
} 

04. Değişken Yazı Tipleri

Genel olarak, web sayfamızda aynı ailenin farklı yazı tipi yüzlerini eklemek istiyorsak, aynı sayıda yazı tipi dosyasını yüklememiz gerekir. Yüklediğiniz daha fazla yazı tipi dosyaları, sayfanıza daha fazla kilo verirseniz, performans üzerinde bir etkiye sahiptir - bu nedenle, genellikle maksimum üç veya dört font dosyasını yüklemek genellikle akıllıdır (performans bütçenize bağlı olarak).

Değişken yazı tipleri tüm bunları değiştirir. Bütün bir font ailesi için tek bir yazı tipi dosyası yüklememizi sağlar. Her ne kadar bu dosya genellikle tek bir yazı tipinden daha büyük olsa da, farklı ağırlık ve stillerden yararlanmak istiyorsanız, daha sonra bir değişken yazı tipidir. Bütün bir font ailesini satın aldıysanız, güvenli bir şekilde saklamayı unutmayın. Bulut depolama Yani dosyalarınızı kaybetmezsiniz!

Varyasyon ekseni

Sadece bunu değil, aynı zamanda değişken yazı tipleriyle, küçük bir font ağırlığının küçük bir alt kümesiyle sınırlı değiliz. Düzenli yazı tipleriyle çalışırken, mevcut yazı tipi ağırlıkları 100 katlar halinde verilir. Değişken yazı tipleri, bize font ağırlığı gibi özellikler için bir dizi değer sunan bir varyasyon eksenine sahiptir. Bir font 1-900 ekseni olabilir, bu da bize 900 farklı ağırlığa erişim sağlayacak!

Varyasyon ekseni sadece ağırlıkla sınırlı değildir. Değişken yazı tipleri, x yükseklik, eğimli, serig uzunluğu ve kontrast için farklı eksenlere sahip olabilir (sadece birkaç örneği seçmek için) - tek bir font dosyasının bize yüzlerce veya hatta binlerce varyasyona erişimini sağlayabileceği anlamına gelir! Bu özellikleri bile canlandırabiliriz, bazı gerçekten harika efektler elde etmemizi sağlayabiliriz. Mandy Michael ( https://codepen.io/mandymichael ) Sınırları gerçekten test eden bir sürü yaratıcı demo yüküne sahiptir.

Değişken yazı tipleri için tarayıcı desteği oldukça iyidir ve birçok font dökümhanesi aktif olarak şimdi kullanmaya başlayabileceğiniz yeni değişken fontlar geliştiriyor - ancak bunlar, özellikle daha tam özellikli yazı tipi aileleri için genellikle primde gelir. Sadece ne yapabileceklerini görmek için değişken fontlarla oynamaya başlamak istiyorsanız, bir dizi değişken yazı tipi oyun alanı vardır:

Farkında olun, şu anda değişken yazı tiplerini kullanmak istiyorsanız, güncel bir işletim sistemi kullandığınızdan emin olmanız gerekir - daha yaşlı OSS üzerinde çalışmazlar.

Yazı Tipi-Değiştirme Ayarları

Yazı tipi ağırlığını kolayca değiştirebilirken font ağırlığı CSS özelliği, Yazı Tipi-Değiştirme Ayarları Bize bir yazı tipinin farklı varyasyon eksenlerine tam erişim sağlayan yeni bir özelliktir. Bunlar hem kayıtlı eksenleri hem de özel eksenleri içerir.

Kayıtlı eksenler

Çeşitli CSS özelliklerine karşılık gelen beş farklı kayıtlı eksen vardır. Bunların her birinin "eksen etiketi" olarak bilinen şeye sahiptir. Kayıtlı eksenler şunlardır: fahişe (Yazı Tipi Ağırlığı), wdth (Yazı Tipi Streç), slnt (Yazı tipi tarzı: eğik / açı), ital (Yazı tipi tarzı: italik), opsz (Yazı tipi optik boyutlandırma). Bu eksenlere CSS özelliği veya ile erişebiliriz. Yazı Tipi-Değiştirme Ayarları .

Bu eksenler mutlaka her değişken yazı tipine dahil değildir (bazılarının yalnızca bir veya iki eksene sahip olabilir), ancak en yaygın olanı olabilir.

Özel eksenler

Özel eksenler, font tasarımcısı tarafından dahil edilen ısmarlama eksenlerdir ve hiç bir şey olabilir. (Örneğin) serif uzunluğu, X-yüksekliği, hatta dönüş gibi daha yaratıcı (ve daha az tipik olarak tipik) içerebilirler.

Her iki eksen türü dört karakterlik bir etiket olarak ifade edilmelidir. Kayıtlı eksenler küçük harf olmalıdır, özel eksenler büyük harfdir. Her ikisi de font-varyasyon ayarları özelliğinde birleştirilebilir. Yazı tipi değişim ayarları, bazı çok havalı UI efektlerine izin verebilecek animatlanabilir! Bazı çok ilginç deneyler de simge fontları kullanılarak üretilmiştir.

05. Grafiksel Etkiler

Photoshop ve Illustrator gibi tasarım araçlarına aşina olursanız, karışım modlarının farkında olabilirsiniz ve görüntüler üzerinde farklı efektler üretmek için nasıl kullanılabileceklerinin farkında olabilirsiniz. Kar harmanlama modları çalışması, her piksel için ortaya çıkan bir değeri hesaplamak için matematiksel formülleri kullanarak iki veya daha fazla katmanı bir araya getirmektir. Katmanlar herhangi bir şey olabilir - görüntüler, degradeler veya düz renkler. Bazı karışım modları, karartılmış bir sonuç verir (örneğin, katmanların piksel değerlerini çarpar), bazıları daha hafif olanı (örneğin, ekranı ve kaplama). Bununla birlikte, bunları kullanmak için matematiği anlamamıza gerek yok. Farklı karışım modları ile oynamak bize farklı katmanlar ile birleştirildiğinde istenen sonuçları ürettikleri için bize iyi bir his verebilir.

CSS özellikleriyle Karışım modu ve Arka Plan-Karışım Modu , tarayıcıda Photoshop benzeri görüntü efektleri elde edebiliriz. Her iki özellik de aynı değerleri alır, ancak biraz farklı çalışır.

Arka Plan-Karışım Modu

Arka Plan-Karışım Modu Hedeflenen elemanın arka plan katmanlarını bir araya getirir. Öğemiz arka plan görüntüleri, renkleri ve gradyanları olabilir ve hepsi ön plan içeriğini etkilemeden birbirleriyle harmanlanırlar. İçin birden fazla değer belirleyebiliriz Arka Plan-Karışım Modu , biri her arka plan katmanı için.

 .my-element {
Arka plan: URL (#myurl),
Doğrusal gradyan (45deg, RGBA (65, 68,
244, 1), RGBA (203, 66, 244, 0.5)),
RGBA (244, 65, 106, 1);
Arka plan boyutu: Kapak;
Arka plan karışımı modu: Ekran,
çarpmak;
} 

Karışım modu

Karışım modu Elemanın, herhangi bir ön plan ve arka plan içeriği ve psödo elemanları dahil olmak üzere ebeveyni ve kardeşleriyle nasıl karıştığını etkiler. Bazı ilginç yaratıcı efektler, kaplanılan psödo elemanları (:: önce ve :: sonra) karıştırılarak elde edilebilir.

 .my-element {
Arka plan: RGB (244, 65, 106);
Karışım Karışımı Modu: Çarpma;
} 

CSS Filtreleri

CSS filtreleri, kullanan çarpıcı görsel efektler oluşturmak için de kullanılabilir. filtrelemek özellik ve filtre işlevi değerleri. Karışım modlarının aksine, doğrudan hedefledikleri elemana grafiksel bir etki uygularlar ve bir eleman uygulanan birden fazla filtreye sahip olabilir.

Gri tonlamaya dönüştür

Bir elemanın renklerini, karışım modlarına güvenmekten daha yüksek bir kontrol derecesi ile manipüle edebiliriz. Filtreler bir resmi gri tonlamaya dönüştürebilir, parlaklığı, kontrastı ve doygunluğu ayarlayabilir, bir elemanı bulanıklaştırabilir veya bir damla gölge ekleyin. Onlar da canlandırılabilir ve vurgulu etkileri ile harika görünebilirler.

Svg filtreleri

CSS filtreleri aslında SVG filtrelerinin basitleştirilmiş sürümleridir. CSS filtrelemek mülk de alır URL () İşlev, bir URL'de bir SVG filtresine geçmemize izin verir. SVG filtreleri son derece güçlüdür ve bazı inanılmaz görüntü efektlerine izin verir - ancak ayrıca CSS filtre fonksiyonlarından çok daha karmaşıktır! Sara Soueidan, kendi özel SVG filtrelerinizi kodlamaya dalmakla ilgileniyorsanız, Codrops'ta harika bir makale serisine sahiptir. Makaleyi inceleyin https://tympanus.net/codrops/2019/01/15/svg-filters-101/

Kırpma ve Maskeleme: Dikdörtgenlerin Ötesinde

Web'deki kutulara başa çıkmaya alışkınız, ancak her şeyin dikdörtgen olması gerekmiyor! Kırpma ve maskeleme aynı madalyonun iki yüzüdür ve bir elemanın farklı parçalarını gizlemek ve göstermek için farklı yollardır, böylece arka plan yoluyla gösterilir. Bu bize tasarımlarımıza ilginç ve yaratıcı şekiller getirme gücü verir.

Klip-yol

klip-yol () Mülkiyet, bir yolu tanımlayarak bir öğeyi "kesmemizi" sağlar. Bir dizi temel şekil işlevi alır, inset (), daire (), elips () veya çokgen () , bu da yolu tanımlamak için XY koordinat çiftlerini kullanarak daha karmaşık kesikli şekilleri oluşturmamızı sağlar. Alternatif olarak, bir SVG yolunu kullanarak da geçebiliriz. yol () işlevi veya kullanma URL () Bir SVG yolu kimliği sağlamak için.

Yolun içinde değil

Bir öğeyi kırpma, tanımladığınız yolun dışındaki her şeyi klipsleyin, ancak elemanın kendisi hala bir dikdörtgendir. Klip yolunun sınırını uzatan içeriğiniz varsa, bu da kırpılacaktır - şeklin içine sarılmaz.

Maske görüntüsü

maske görüntüsü Bir görüntü (SVG veya Şeffaf PNG) veya maske olarak gradyan kullanarak görüntünün parçalarını göstermemizi ve gizlememizi sağlar. Aksine klip-yol Maske kaynağının bir yol olması gerekmediğinden, maskeleme ile görüntülerimize doku ekleyebiliriz - saydamlık derecelerine izin verir.

06. CSS şekilleri

CSS şekilleri spesifikasyonu, yüzlü geometrik şekiller etrafına metni sarmamıza, ilginç, dergi benzeri düzenleri oluşturmamızı sağlar. Bu kullanarak mümkündür biçimsiz Emlak. Benzer klip-yol , bu özelliği temel bir şekil işlevini verebiliriz daire (), elips (), inset (), poligon () ya da bir SVG yoluna bir URL ve aslında iki iş uyum içinde çok iyi! biçimsiz Metnimizi etkili bir şekilde saracak, ancak yüzlü elemanı etkilemez. Metnin görüntüyü ya da yüzlü nesnenin etrafına sarılsa gibi görünmesini istiyorsak, için aynı değeri kullanabiliriz. klip-yol . Kullanmak şekil marjı Şekil yolu ile sarma içeriği arasında boşluk eklemek için. Bir göz atmak Stuff & amp; Saçmalık Site CSS şekillerinin, merkezi bir görüntünün etrafına metni sarmak için nasıl kullanıldığını görmek için.

Firefox'un bir şekillendirme editörü Kompleks şekillerle çalışmak için özellikle yararlı olan dev araçları panelinde. Ancak, dikkatli kullanın. Metin paragrafının ön kenarını sarmak sanatsal etki için mükemmeldir, ancak kullanıcı deneyimi için her zaman harikadır. Karmaşık pürüzlü şekiller, metin bloklarını okumayı zorlaştırabilir. Önemli içerik için, temizlemek isteyebilirsiniz.

07. Kaydırma yapışma

Pek çok web sitesi, kullanıcının kaydırıldığı gibi, "Snaps" içerecek şekilde, bir kaygan, yerel bir uygulama-benzeri kaydırma deneyimi sağlamak için JavaScript kütüphanelerinden yararlanır. Şimdi, Scroll Snap Spesifikasyonu ile bunu CSS dosyamızın içinde yapabiliriz - sayfanızı şişirmek için ağır JS modüllerinde içe aktarmanız gereken çok az var!

Kaydırma yapışmasını uygulamak için kaydırma kabı olarak hareket etmek için bir öğeye ihtiyacımız var. Kabın doğrudan çocukları, koparılacak noktaları belirler ve anlık alanda çeşitli şekillerde hizalanabilir.

Kaydırma Snaping, başka bir yeni CSS özellik değeri ile birleştirildiğinde daha da etkili olabilir - Pozisyon: Yapışkan . Bu pozisyon, bir öğeyi "yapışır", konteyner içinde kaydırırken, daha önce sadece JavaScript ile mümkün olan başka bir davranış. Bu kaydırma yapışmasını konumuyla kontrol edin: Yapışkan ve InterSectionObserver Örnek .

08. CSS ızgarası ve düzenleri

Ön uç geliştiriciler, o sırada kullanılmak üzere kullanabilecekleriniz varsa, en son modern ızgara sisteminin kullandığı, en son FlexBox'u kullanabilecekleri düzeni hacklediler. Ancak FlexBox, katı ızgaralar oluşturmak için asla tasarlanmadı - amacı esneklik!

CSS ızgarası, iki boyutlu düzen için tasarlanmış ilk özelliktir, bir düzen oluşturma ve hem satırda hem de sütun eksenine öğeleri yerleştirmemize izin verdi. Izgaralı duyarlı bir düzen oluşturmak, Calc () veya negatif kenar boşlukları ile hacklemeye gerek yoktur. Gizli silah, FR birimdir - ızgaraya özel yeni bir birim. FR birim boyutları ızgara parçaları (satırlar ve sütunlar) mevcut alanın bir oranı olarak. Herhangi bir sabit parçayı, oluk ve içeriği dikkate alır, ardından kalan alanı buna göre dağıtır. Jen Simmons, "içsel web tasarımı" terimini oluşturan yeni Web Düzeni dönemini tanımlamak için kullanır.

CSS Grid nasıl kullanılır?

Izgara, Izgara Konteyneri olarak hareket etmek için Izgara olarak ayarlanan GRID olarak ayarlanan bir öğe gerektirir. Izgara kabının doğrudan çocukları, ızgaraya yerleştirilebilecek maddelerdir. Özellikleri kullanıyoruz ızgara şablon satırları ve ızgara şablonu sütunları ızgaranın parçalarını (satır ve sütunlar) tanımlamak için ve sütun boşluğu ve satır boşluğu Olukları (parçalar arasındaki boşluklar) tanımlamak için.

 .grid {
Ekran: Izgara;
ızgara şablonu sütunları: tekrar (4, 1fr);
ızgara şablonu satırları: tekrarlayın (4, 200px);
Boşluk: 20px;
} 

Biz kullanıyoruz tekrar et() Kodu, Longhand'a bir alternatif olarak daha özlü tutma işlevi (örn. Izgara şablonu sütunları: 1FR 1FR 1FR 1FR ). Bu örnek aynı zamanda Shorthand'ı kullanır boşluk için satır boşluğu ve sütun boşluğu .

Yukarıdaki kod, her bir 100px yüksekliğinde, her bir 100px yüksekliğinde ve her birinin, FR birimini kullanarak mevcut alanın eşit bir kısmını doldurduğu dört sütun izini verir.

Bunun, ızgara izleri oluşturmanın tek yolu olmadığını söylemeye değer. Örtük parçalar, ızgara öğeleri yerleştirilerek de oluşturulabilir. Kılavuzun farklı koşullarda nasıl davrandığını ve bir düzen kodlamasını çok daha kolay hale getirebileceği için, ızgarayı kullanırsanız, ızgarayı kullanıyorsanız, bu konuda biraz okumak için faydalıdır.

Her parça arasında oturan sayısal çizgiler olan ızgara satır numaralarını referansla ızgaraya eşyaları yerleştirebiliriz. Burada, Shorthand'ı kullanıyoruz. ızgara kolonu ve ızgara satır için ızgara sütun başlangıcı , ızgara sütun sonu , ızgara satır başlangıcı ve ızgara satır sonu . Bunlar, tarayıcıya öğemizin hangi bir eksende başlamaları ve bitmesi gerektiği söyler.

 .item {
Izgara sütunu: 1/4;
ızgara satır: 2;
} 

Izgara bize eşyaları yerleştirmek için birçok farklı yol sunar: Bunun yerine ızgara hatlarımızı adlandırabiliriz:

 .grid {
Ekran: Izgara;
Izgara şablonu-sütunlar: [Görüntü başlatma] 1FR
 1FR 1FR [image-start] 1FR;
Izgara Şablonu-Rows: 200px [Görüntü-Başlat]
 200px 200px [image-end] 200px;
Boşluk: 20px;
} 

Alternatif olarak, ızgara şablon alanı Özellik bize bir ızgara düzenini "çizmeyi" sağlar.

 .grid {
Ekran: Izgara;
ızgara şablonu sütunları: tekrar (4, 1fr);
ızgara şablonu satırları: tekrarlayın (4, 200px);
Boşluk: 20px;
Izgara şablonları:
'. . . . '
'Görüntü resim görüntüsü.'
'Görüntü resim görüntüsü.'
'. . . . ';
} 

Bu yöntemlerden birini kullanarak, bir ızgara öğesini yerleştirirken ilgili ızgara alanına başvurabiliriz:

 .Image {
Izgara alanı: görüntü;
} 

Bu makale başlangıçta yaratıcı web tasarım dergisinde yayınlandı Web tasarımcısı . Sayı 290 şimdi satın al.

• 2019'daki En İyi 10 CSS Çerçevesi
• CSS ile SVG'ye animasyon nasıl eklenir
• 2019'da daha akıllıca çalışmanıza yardımcı olacak 52 Web Tasarım Araçları