¿Hay selectores que apuntan a elementos en ciertas posiciones de la cuadrícula?
Tengo una cuadrícula CSS con un montón de elementos de cuadrícula de flujo automático. A veces los elementos de la cuadrícula son una pista de 1 x 1, y a veces son pistas de 2 x 2, así queno sabe por el orden de origen qué elementos estarán en ciertas posiciones en la cuadrícula. Esto significa que el estilo con:nth-child() No será confiable.
Me gustaría agregar estilo a los elementos en ciertas columnas de la cuadrícula (principalmente la última columna). ¿Hay un selector CSS que me permita diseñar estos elementos?
Por ejemplo, en esta demostración, ¿cómo diseñaría los cuadros 3, 5 y 9?codepen aquí)?
.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>Editar: El código terminará en un CMS y puede cambiar en el futuro.