Belirli ızgara konumlarında öğeleri hedefleyen seçiciler var mı?

Bir dizi otomatik akışlı ızgara öğesi içeren bir CSS ızgaram var. Bazen ızgara öğeleri 1 x 1 hatlıdır ve bazen 2 x 2 parçadır, bu yüzden , kaynak siparişinden hangi öğelerin kılavuzunda belirli konumlarda olacağını bilmem. Bu, :nth-child() ile şekillendirmenin güvenilir olmayacağı anlamına gelir.Belirli ızgara konumlarında öğeleri hedefleyen seçiciler var mı?

I belirli ızgara sütun öğelere stil eklemek (çoğunlukla son sütun) istiyoruz. Bu öğeleri şekillendirmeme izin verecek bir CSS seçici var mı?

Örneğin, bu demo, nasıl kutuları 3, 5 stil olur

ve 9, (codepen here)?

.grid-container { 
 
     display:grid; 
 
     grid-template-columns: 1fr 1fr 1fr; 
 
     grid-column-gap: 1em; 
 
     grid-row-gap: 1em; 
 
    } 
 

 
    .grid-item { 
 
     background-color: #aea; 
 
     text-align:center; 
 
     font-size:3em; 
 
     min-height:3em; 
 
     line-height: 3em; 
 
    } 
 

 
    .grid-item.double { 
 
     grid-column-start: span 2; 
 
     grid-row-start: span 2; 
 
    }

<body> 
 
<div class="grid-container"> 
 

 
    <div class="grid-item">1</div> 
 
    <div class="grid-item">2</div> 
 
    <div class="grid-item">3</div> 
 
    <div class="grid-item">4</div> 
 
    <div class="grid-item double">5</div> 
 
    <div class="grid-item">6</div> 
 
    <div class="grid-item">7</div> 
 
    <div class="grid-item">8</div> 
 
    <div class="grid-item">9</div> 
 
    <div class="grid-item">10</div> 
 
</div> 
 
</body>

Düzenleme: kod CMS sona erecek ve gelecekte değişebilir.

kaynak

2017-05-24 John B

Belki [bu soru] sizi bir şekilde yardımcı olabilecek (https://stackoverflow.com/questions/41577309/how-do-i-access-certain-column-in-bootstrap-grid-system)? –

@kevinb. Bu bootstraps "ızgara" çerçeve. OP 'CSS native' ekranını kullanıyor: grid; ' –

Neden sadece' 'n '' yi kullanmıyorsunuz? –

ızgara CSS ile işlenir, belirli bir ızgara pozisyonları elemanları eşleşen için bir seçiciler vardır. grid-structural selectors introduced in Selectors 4, yalnızca HTML'deki tablolarda olduğu gibi belge semantiğinde ifade edilen ızgara yapılarına dayalı öğeleri eşleştirir (bu, display: table-* kullanılarak oluşturulan tablo olmayan öğelerin oluşturulduğu zaman grid semantiklerine göre öğeleri eşleştirememeleri anlamına gelir).

Benzer bir sorun flexbox'a ile var: onlar nasıl yerleştirildiğini dayalı özel esnek öğeleri eşleşen hiçbir seçiciler vardır. Genel olarak, CSS tarafından yönetilen planlarına göre elementleri eşleşen hiçbir seçici yoktur. Seçiciler, yalnızca belge semantiğine (kaynak siparişi, vb.) Göre öğeleri eşleştirir.

İstenilen öğeleri biçimlendirmek için, bunları istemci tarafı komut dosyası veya ızgara konumlarına göre sınıfları etiketleyen bazı arka uç mantığı (ızgara düzeni yapılandırılmışsa) kullanarak tanımlamanız gerekir. arka uçta). Bunu nasıl yaptığınız bu sorunun kapsamı dışındadır.

kaynak

2017-05-24 15:23:31 BoltClock

Bundan korktum. Bunun için Seçiciler 5'i veya daha fazlasını beklemek zorundayız. –

Belirli ızgara konumlarında öğeleri hedefleyen seçiciler var mı?

cevap

İlgili konular