Bölüm 3: Otomatik Akış, Sipariş ve Ürün Yerleştirme

Faydalı Alternatif Metin Yazma

Bir düzen oluşturmaya gelince, CSS Grid bize öğeleri yerleştirmek için bir dizi farklı seçenek sunar. Bu makalede, farklı yerleştirme yöntemlerine, her öğeyi açıkça yerleştirmek zorunda kalmamak için otomatik akışın nasıl kullanılacağına ve bazen ızgara öğelerinin neden olmasını beklediğiniz yere yerleştirilemeyebileceğine bir göz atacağız.

Grid’i iki ayrı parça olarak kullanmayı düşünüyorum:

  1. İskele – veya ızgaranın kendisinin yapısını inşa etmek. Bu, ızgara kapsayıcı üzerinde etkili olan özellikleri tanımlamayı içerir. display: gridve ızgaranın şeklini ve herhangi bir kombinasyonunu kullanarak nasıl davranması gerektiğini açıklamak grid-template-columns, grid-template-rows, grid-auto-columns ve grid-auto-rows (veya grid / grid-template stenografi kullanıyorsanız).
  2. Izgarayı donatmak – tarayıcıya ızgara kapsayıcımızın her bir alt öğesinin nereye yerleştirilmesi gerektiğini söyler.

Bu makalede, ikinci kısma ve özellikle otomatik yerleştirmeye daha derinlemesine bakacağız.

Izgara öğesi yerleştirmenin farklı yolları

açık yerleşim

Öğeleri bir ızgaraya açıkça yerleştirmemize izin veren özellikler şunlardır:

  • grid-column-start
  • grid-column-end
  • grid-row-start
  • grid-row-end
  • grid-column (kısa yol grid-column-start / grid-column-end)
  • grid-row (kısa yol grid-row-start / grid-row-end)
  • grid-area (kısa yol grid-row-start / grid-column-start / grid-row-end / grid-column-end)

Yukarıdaki özellikler, öğeler kendileri. Olası değerler satır numaralarını, satır adlarını, yayılma değerlerini veya alan adlarını içerir. Kullanmanız ve kullanmamanız gereken kurallar yoktur ve istediğiniz gibi karıştırıp eşleştirebilirsiniz. Örneğin:

.item--a {
grid-area: a;
}

.item--b {
grid-area: 2 / 2 / 4 / 4;
}

.item--c {
grid-row: span 2 / 5;
grid-column: 1 / 3;
}

ızgara-şablon-alanları

Ek olarak, sahip olduğumuz grid-template-areas. Bu özellik üzerinde tanımlanmıştır ızgara kabı. Izgara alanlarını adlarla tanımlamamıza ve ardından öğeleri yerleştirmek için bu alanlara başvurmamıza olanak tanır:

.grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
grid-template-rows: repeat(4, 120px);
grid-template-areas:
'a a a'
'. b b'
'. b b'
'. . .';
}

.a {
grid-area: a;
}

.b {
grid-area: b;
}

Bu oldukça havalı, çünkü yalnızca düzeni değiştirerek düzeni önemli ölçüde değiştirebileceğimiz anlamına geliyor. grid-template-areas değer. Öğelerin kendilerine herhangi bir özellik eklememize veya değiştirmemize gerek yok. Duyarlı tasarım için büyük bir kazanç!

kullanarak her öğeyi açıkça yerleştirmeye cazip gelebiliriz. grid-template-areas. Ancak bir dezavantajı var: Örtüşen alanları tanımlayamazsınız. Gibi bir düzen oluşturma Şekil 01 ile yapılamaz grid-template-areas yalnız.

Şekil 01Öğe 2 ve 3 örtüşür, bu nedenle yalnızca birinin alanı “ızgara-şablon-alanları” ile tanımlanabilir.

Ama biz abilir kullanmak grid-template-areas ek olarak öğeleri satır adına veya alana göre yerleştirmek için.

.a {
grid-area: a;
}

.b {
grid-area: b;
}

.c {
grid-area: 3 / 1 / 5 / 3;
}

Otomatik yerleştirme

Öğeleri ızgaramıza açıkça yerleştirmezsek, bunlar otomatik olarak yerleştirilecektir. Varsayılan olarak, her ızgara öğesinin hem satır hem de sütun ekseninde 1 aralığı vardır, bu nedenle her biri bir sonraki kullanılabilir ızgara hücresine yerleştirilecektir. Bunu kendi avantajımıza kullanabiliriz: Haber akışı gibi bir şeye sahipsek, özellikle kaç öğe olacağını bilmiyorsak, her öğeyi açıkça yerleştirmek zorunda kalmayız.

Otomatik yerleştirme
Şekil 02Hiçbir öğe açıkça yerleştirilmez, bu nedenle hepsi otomatik olarak yerleştirilir.

Otomatik yerleşimi tahmin etme

Yukarıdaki örnekte, otomatik yerleştirme kuralları oldukça sezgiseldir: Öğeler, satırı doldurana kadar satır (veya satır içi) ekseni boyunca yerleştirilir ve ardından bir sonraki satıra sarılır (varsa yeni bir satır oluşturur). t bir tanımlı).

Ancak, açıkça yerleştirilmiş bazı öğelerimiz varsa ve diğerleri de yerleştirilmemişse, otomatik olarak yerleştirilen hücreleri nasıl tanımlayabiliriz?

kullanarak ızgarama bir öğe yerleştirirsem grid-column: 2 / span 2 Bundan sonra otomatik olarak yerleştirilen herhangi bir öğenin yerleştirileceğini bekleyebilirim sonrasında yerleştirdiğim (Şekil 03):

Açık ve otomatik yerleştirme karışımına sahip üç ızgara öğesi
Şekil 03Mavi öğe açıkça satır ve sütun eksenine yerleştirilir (“ızgara şablonu sütunları” ve ızgara şablonu sütunları kullanılarak).

Ne aslında yukarıdaki kodla olur, sonraki öğeler yerleştirilir önceki yerleştirilen öğe. Şebekemizdeki ilk ikisi olan ilk uygun hücrelere yerleştirilirler.

Açık ve otomatik yerleştirme karışımına sahip üç ızgara öğesi
Şekil 04Mavi öğe açıkça yalnızca sütun eksenine yerleştirilir (grid-template-columns` kullanılarak).

Ancak mavi öğeyi yalnızca sütun eksenine yerleştirirsek, öğeler vardır ilkinden sonra yerleştirilir:

Açık ve otomatik yerleştirme karışımına sahip üç ızgara öğesi
Şekil 05Mavi öğe, sütun ekseninde `grid-column: 2/4` olacak şekilde yerleştirilir.

Peki yerleştirme davranışı neden farklı? Otomatik yerleştirme kurallarını anlarsak, işler daha netleşir.

Akışı anlama

Bunu düşünmenin iyi bir yolu, şebekemizi akan bir nehir olarak düşünmektir. Açıkça yerleştirilmiş herhangi bir öğe, nehre demirlemiş teknelerdir. Otomatik olarak yerleştirilen öğeler, bunların etrafında soldan sağa doğru akar (Şekil 06).

Açık ve otomatik yerleştirme karışımıyla ızgara öğeleri
Şekil 06

Yalnızca bir eksene açıkça yerleştirilen ızgara öğeleri daha gevşek bir şekilde sabitlenir. Kalan eksende ızgara akışına katılırlar.

Yalnızca bir yayılma değeri kullanılarak yerleştirilen öğeler, diğerleri gibi akmaya devam edecek, ancak kendi açık boyutlarıyla sınırlandırılacaklar. 2’den az ızgara sütunu varsa, aralığı 2 olan bir öğe sonraki satıra akar. Bunları yarı otomatik yerleştirme olarak düşünebiliriz (Şekil 07).

Açık ve otomatik yerleştirme karışımıyla ızgara öğeleri
Şekil 07 Öğe 2’nin sütun aralığı 3’tür, bu nedenle bir sonraki satıra sarılır.

İçinde Şekil 07 öğeyi yalnızca sütun eksenine yeniden yerleştiriyoruz (kullanarak span), bu nedenle ardışık öğeler ondan sonra yerleştirilir. Izgarayı tam olarak doldurmak için yeterli öğemiz var – ancak önceki ızgara hücresini doldurmak yerine altıncı ve yedinci öğeler örtülü bir iz oluşturur. Bu yapmaz sadece açıkça satır eksenine yerleştirirsek olur (Şekil 08).

Açık ızgarayı dolduran otomatik yerleştirilmiş öğeler
Şekil 082. öğenin satır aralığı 3’tür

Bu, öğe yerleştirmenin aşağıdaki sırayla çözüldüğü sıra ile ilgilidir. ızgara yerleştirme algoritması.

Şebekenizin akışını değiştirme

Izgaradaki öğelerin sırasını değiştirmek için kullanabileceğimiz iki farklı özellik vardır. İlk olarak grid-auto-flow. Bu, akışın yönünü ve dolayısıyla öğelerin otomatik olarak nasıl yerleştirileceğini değiştirir. Olası değerler row (varsayılan), column, row dense ve column dense.

grid-auto-flow: sütun

değerini değiştirerek row ile column, bu demonun ikinci bölümünde davranışın artık tersine döndüğünü görebiliriz: Sütun eksenine yerleştirilen öğeler artık satır eksenindekilerin önünde çözümlenir. Öğeler her hücreye paketlendiğinden, sütun eksenine bir öğe yerleştirmek artık örtülü bir ızgara izi oluşturmaz, ancak satır eksenine bir öğe yerleştirir yapmak.

Kalemi Gör Otomatik akış ve dağıtım Michelle Barker tarafından (@michellebarker) üzerinde kod kalemi.

ızgara otomatik akış: yoğun

Kullanmak dense anahtar kelimeye ek olarak row veya column (row varsayılandır), otomatik olarak yerleştirilen öğelerin kendilerini mevcut herhangi bir ızgara hücresine (açıkça yerleştirilmiş öğelerden önce gelenler dahil) paketlemeleri gerektiğini belirtebiliriz. Bu, bir öğe yalnızca bir eksene yerleştirilse bile boşluk olmamasını sağlayacaktır. Yukarıdaki demoda, değerlerin her birinin nasıl olduğunu görebilirsiniz. grid-auto-flow ızgaranın davranışını değiştirir.

Emir

bu order özellik Grid’e özel değildir – flexbox ile de kullanılabilir. Akış içindeki tek tek öğelerin sırasını değiştirmemizi sağlar. Öğelerin varsayılan sırası 0’dır. Otomatik olarak yerleştirilen bir öğenin sırasını -1 olarak değiştirmek, onu ızgara otomatik olarak yerleştirilen ızgara öğelerinin başlangıcına yerleştirir – ızgaranın başında yerleştirilmişse, açıkça yerleştirilmiş öğelerden sonra.

bu order özellik yalnızca otomatik ve yarı otomatik yerleştirilmiş öğeleri etkiler (tek bir aralık değeri kullananlar). Aşağıdaki demoda mor öğenin konumu, order ancak açıkça yerleştirilen mavi öğe etkilenmez.

Kalemi Gör Emir Michelle Barker tarafından (@michellebarker) üzerinde kod kalemi.

Yön

fark etmiş olabilirsin, grid-auto-flow akışın yönünü değiştirmemizi sağlar. row ile column, ancak öğelerin sağdan sola akmasına izin vermiyor. Bunun yerine, kullanabiliriz direction Emlak. Bu CSS Yazma Modları, metnin soldan sağa farklı bir yönde aktığı uluslararası yazma modlarını desteklemek için tasarlanmıştır. Şebekemizin sağdan sola akışını sağlamak için şunu kullanabiliriz:

.grid {
direction: rtl;
}

⚠️ Dikkatli kullanın ⚠️

Izgara öğelerinin görsel sırasını etkileyen özellikler, kaynak sırasını değiştirmediğinden ve dolayısıyla erişilebilirliği olumsuz etkileyebileceğinden çok dikkatli kullanılmalıdır. Rachel Andrew makalesinde bu konuda kapsamlı bir şekilde yazmıştır, Izgara, içerik yeniden sıralama ve erişilebilirlik.

var olduğuna inanıyorum bazı görsel yeniden sıralamanın mantıklı olduğu durumlar, ancak benim deneyimime göre bunlar çoğunlukla açık öğe yerleştirmeyi içeriyor.

Çözüm

Umarım bu makale, otomatik akış ızgara öğelerinin yerleştirilmesiyle ilgili bazı sorunları aydınlatmaya yardımcı olmuştur. Bu serinin 1. bölümünü de okumak ilginizi çekebilir, Örtülü İzleri Anlamaızgara öğelerinin yerleştirilmesiyle de ilgilenir.

Bir cevap yazın

E-posta hesabınız yayımlanmayacak.