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:
- İ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çıklamakgrid-template-columns,grid-template-rows,grid-auto-columnsvegrid-auto-rows(veyagrid/grid-templatestenografi kullanıyorsanız). - 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-startgrid-column-endgrid-row-startgrid-row-endgrid-column(kısa yolgrid-column-start/grid-column-end)grid-row(kısa yolgrid-row-start/grid-row-end)grid-area(kısa yolgrid-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.
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ş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):
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.
Ancak mavi öğeyi yalnızca sütun eksenine yerleştirirsek, öğeler vardır ilkinden sonra 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).
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).
İç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).
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.
