Artık Izgara Öğelerini Sözde Seçicilerle Kontrol Etme

Faydalı Alternatif Metin Yazma

az önce hakkında yazdım flexbox yerine Grid kullanmak isteyebileceğiniz bazı durumlar, ve tersi. Bahsettiğim senaryolardan biri Might flexbox kullanmak için daha iyi bir durum, tüm satırı doldurmayan kalan ızgara öğelerinin davranışını kontrol etmek istediğiniz zamandır.

Bu ızgarada 12 yerine sadece 10 öğe olduğundan, bu son iki öğenin nasıl görüntüleneceğini kontrol etmek isteyebiliriz.

Tipografik dünyada, bir paragrafın sonundaki tam satırı geçmeyen kelimelere denir. dullar. Bu ızgara öğeleri benzer şekilde davranır, bu yüzden burada onlardan bu şekilde bahsediyorum. (Yan not: CSS özellikleri widows ve orphans bu tipografik davranışlarla sayfalanmış medyada ve çok sütunlu düzende ilgilenin.)

Neden burada Grid kullanmak isteyelim ki?

Aklıma göre, her biri kullanılabilir alanın bir kısmını kaplaması gereken sabit sayıda sütun tanımlamak söz konusu olduğunda ızgara kullanmak genellikle daha iyi bir seçimdir. kullanabiliriz fr burada bu amaç için tasarlanmış birim:

.grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
grid-gap: 20px;
}

Bu bize mevcut tüm alanı kullanan üç eşit genişlikte sütun verecektir. Bunu Grid ile yapmak, flexbox çözümünden çok daha temizdir. calc() ve aynı etkiyi elde etmek için negatif marjlar. Bu demoda, ilk örnek flexbox’ı ve ikinci örnekte aynı düzeni elde etmek için Grid’i kullanır:

Kalemi Gör Flexbox ve Izgara düzeni örnekleri Michelle Barker tarafından (@michellebarker) üzerinde kod kalemi.

Bu durumda, Grid öğelerimiz bunları açıkça yerleştirmemizi gerektirmez. Hepsi, Grid’deki öğelerin sayısını bilmiyorsak yararlı olan, Grid’in varsayılan otomatik yerleşimi kullanılarak bir sonraki uygun hücreye yerleştirilecektir.

Sorun, kalan öğelerin davranışını kontrol etmek istiyorsak ortaya çıkar. Eğer sadece bir dul varsa, belki tüm satırı doldurmasını isteriz ya da belki onu sol yerine sağa hizalamayı tercih ederiz. Veya iki öğe varsa, belki onları ortalamak isteriz:

İki esnek kutu düzeni örneği

Bunu yalnızca otomatik yerleştirmeye güvenerek başaramayız, ancak Yapabilmek yine de kullanmak istediğimiz davranışları sadece biraz fazladan kodla elde ederiz.

n’inci çocuk birleştirme

birleştirerek :nth-child() ve :last-child sözde seçiciler, bir öğenin dul olup olmadığını tespit edebilir ve stillerimizi buna göre ayarlayabiliriz. Heydon Pickering olarak adlandırdığı benzer bir teknik gösterdi. miktar sorgularıiçinde bu A List Apart makalesi. Burada biraz farklı kullanacağız çünkü sorgulama yapmıyoruz. kaç eşyalar var. Bir öğenin her ikisinin de son çocuk olup olmadığını tespit etmek istiyoruz. ve üçün katı olan bir çocuktan hemen sonra gelir (yani, arka arkaya ilk öğedir). (kullanamayız :last-child tek başına, çünkü bu, dul olup olmadığına bakılmaksızın son öğeyi seçecektir.)

Ardından bu öğeyi stillerimizle hedefleyebiliriz, örneğin onu üç ızgara izini kapsayacak şekilde ayarlayabiliriz:

li:last-child:nth-child(3n - 2) {
grid-column: span 3;
}

Bunu bu demoda çalışırken görebilirsiniz:

Kalemi Gör Son satır davranışını kontrol etmek için CSS Izgarası + nth-child Michelle Barker tarafından (@michellebarker) üzerinde kod kalemi.

Gösterilen iki örnekten ilkinde, aynı zamanda son alt öğeyi hedefliyorum. ikinci bir satırdaki öğeyi ve bunu iki sütuna yaymayı sağlarken, ikinci örnek ise son çocuğu hedefler. ilk satırdaki öğe:

/* Target the second item on the last row, as long as it is the last item in the grid */

li:last-child:nth-child(3n - 1) {
grid-column: span 2;
}

/* Target the first item on the last row, if it is the last item */

li:last-child:nth-child(3n - 2) {
grid-column: span 3;
}

Öğeleri merkezleme

Bu düzen için flexbox kullanmak, öğelerimizi kullanarak kolayca ortalamamızı sağlar. justify-content: center kapta, kalan bir veya iki ızgara öğesinin birden çok sütuna yayılmak yerine ortalanmasına izin verir:

Ortalanmış iki arta kalan öğeye sahip bir ızgara

Bu, bazı durumlarda daha iyi bir seçenek olabilir, çünkü bir ızgara öğesini daha geniş yapmak, belki de amaç bu olmadığında, ona daha fazla dikkat çekebilir ve daha önemli görünmesini sağlayabilir.

Bunu grid ile de başarabiliriz – sadece sürecimizde birkaç küçük adıma daha ihtiyacımız var. İlk önce ızgaramıza üç yerine altı sütun vereceğiz:

.grid {
display: grid;
grid-template-columns: repeat(6, 1fr);
grid-gap: 20px;
}

Ardından, her öğeyi bir yerine iki sütuna yaymamız gerekir:

li {
grid-column: span 2;
}

kullanma açıklık başlangıç ​​veya bitiş satır numarası yerine değer, Grid’in otomatik yerleşiminden yararlanmamıza izin verir – öğeleri açıkça yerleştirmemize gerek yoktur. Izgaramıza, her birinin iki yola yayılması gerektiğini, aksi takdirde mevcut ızgara hücrelerine doğal olarak akması gerektiğini söylüyoruz.

Ardından, önceki gibi son ve sonuncu ızgara öğelerini hedefleyebiliriz, ancak bunun yerine grid-column-end açıklıkları yerine satır:

/* Dealing with 2 orphan items */

li:last-child:nth-child(3n - 1) {
grid-column-end: -2;
}

li:nth-last-child(2):nth-child(3n + 1) {
grid-column-end: 4;
}

/* Dealing with single orphan */

li:last-child:nth-child(3n - 2) {
grid-column-end: 5;
}

Bu onlara merkezde olma etkisini verir.

Kalemi Gör CSS Izgarası + nth-child Michelle Barker tarafından (@michellebarker) üzerinde kod kalemi.

Çözüm

Buna benzer bir düzen için Flexbox’ı kullanmanın daha uygun olabileceği, duyarlı bir şekilde uygulandığında daha belirgin hale gelen bazı durumlar hala var. CSS Grid kullanıyorsanız yukarıdaki örnekler çalışmayacaktır. auto-fill ve auto-fit sabit sayıda sütun izi yerine anahtar kelimeler, çünkü (oldukça karmaşık hesaplamalar olmadan), herhangi bir zamanda bir ızgara satırında kaç öğe olacağından emin olamazsınız. auto-fill ve auto-fit medya sorgularına ihtiyaç duymadan duyarlı bir düzen sunabilmeleri açısından oldukça kullanışlıdır – ızgaranız içeren bloğa yanıt verir. Flexbox kullanmak, olukları yerleştirmek için bazı hilelerle de olsa benzer bir şey elde etmemizi sağlar.

Bu gönderide ayrıntıları verilen teknikler yine de yararlı olabilir ve araç kutunuzda yerleşim planları oluştururken bilinçli bir karar vermenize yardımcı olabilecek bir araç daha sunar.

Bir cevap yazın

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