dynamisch letzten Zeilen in CSS Grid

Question

So Targeting, habe ich die folgende CSS dynamisch die letzten Zeilen eines unausgeglichenen Gitter zu handhaben:

.agenda-event, .agenda-magazine { 
    &:nth-of-type(4n+1):nth-last-of-type(-n+4), 
    &:nth-of-type(4n+1):nth-last-of-type(-n+4) ~ & { 
    .agenda-button { 
     border-bottom: 0; 
    } 
    } 
} 

Quelle: http://keithclark.co.uk/articles/targeting-first-and-last-rows-in-css-grid-layouts/

ist auf einem 4 Raster Dieser Code basiert Säule. Aber aus irgendeinem Grund, wenn nur noch 4 Gegenstände im Gitter sind (also nur 1 Reihe). Es verwirft den unteren Rand des ERSTEN Gegenstandes, aber lässt den unteren Rand der anderen drei übrig (da es im Grunde die letzte Reihe ist, muss der Rand-Boden auf 0 bleiben). Was mache ich falsch? Gibt es etwas, das ich übersehe?

HTML des obigen Bildes:

<div class="agenda-group-content"> 
    <div class="agenda-magazine"></div> 
    <div class="agenda-event"></div> 
    <div class="agenda-event"></div> 
    <div class="agenda-event"></div> 
</div> 

Answer 1

Grund:

Es gibt möglicherweise ein Compiler-Version Problem, das die Probleme hier verursacht. Der in der Frage angegebene Code, wenn er unter Verwendung der neuesten Version des Compilers unter Sassmeister.com oder CodePen kompiliert wird, ergibt das folgende CSS. Dieses CSS würde perfekt funktionieren, selbst wenn Sie nur 4 Elemente haben.

.agenda-event:nth-of-type(4n+1):nth-last-of-type(-n+4) .agenda-button, 
.agenda-event:nth-of-type(4n+1):nth-last-of-type(-n+4) ~ .agenda-event .agenda-button, 
.agenda-magazine:nth-of-type(4n+1):nth-last-of-type(-n+4) .agenda-button, 
.agenda-magazine:nth-of-type(4n+1):nth-last-of-type(-n+4) ~ .agenda-event .agenda-button, 
.agenda-event:nth-of-type(4n+1):nth-last-of-type(-n+4) ~ .agenda-magazine .agenda-button, 
.agenda-magazine:nth-of-type(4n+1):nth-last-of-type(-n+4) ~ .agenda-magazine .agenda-button { 
    border-bottom: 0; 
} 

Aber wenn ich den gleichen Code in Fiddle kompilieren, erhalte ich die folgenden Ausgabe (aus Dev Console):

.agenda-event:nth-of-type(4n+1):nth-last-of-type(-n+4) .agenda-button, 
.agenda-event:nth-of-type(4n+1):nth-last-of-type(-n+4) ~ .agenda-event .agenda-button, 
.agenda-magazine:nth-of-type(4n+1):nth-last-of-type(-n+4) .agenda-button, 
.agenda-magazine:nth-of-type(4n+1):nth-last-of-type(-n+4) ~ .agenda-magazine .agenda-button { 
    border-bottom: 0; 
} 

Wie würden Sie sehen, es gibt zwei Selektoren, die aus der Gruppe fehlen . Sie sind wie folgt:

.agenda-magazine:nth-of-type(4n+1):nth-last-of-type(-n+4) ~ .agenda-event .agenda-button, 
.agenda-event:nth-of-type(4n+1):nth-last-of-type(-n+4) ~ .agenda-magazine .agenda-button, 

Hier die erste ist sehr kritisch für die unten gezeigte Struktur, weil die .agenda-magazine Artikel sind die erste (und der 4. letzte Punkt) und alle Gegenstände, die es als .agenda-event Artikel folgen. Daher wird der untere Rand der gleichgeordneten Elemente, die .agenda-event sind, nicht ungültig gemacht.

<div class="agenda-group-content"> 
    <div class="agenda-magazine"></div> 
    <div class="agenda-event"></div> 
    <div class="agenda-event"></div> 
    <div class="agenda-event"></div> 
</div> 

---

Die folgende Selektor werden die Geschwister in unserem Fall nicht ansprechen, weil das erste Element nicht .agenda-event

.agenda-event:nth-of-type(4n+1):nth-last-of-type(-n+4) ~ .agenda-event .agenda-button 

und weder die unten ein, weil die Geschwisterelemente würde, ist nicht .agenda-magazine.

.agenda-magazine:nth-of-type(4n+1):nth-last-of-type(-n+4) ~ .agenda-magazine .agenda-button 

---

Lösung:

Die idealste Lösung wäre, den Compiler auf die neueste Version zu aktualisieren, aber wenn das nicht möglich welchen Grund auch immer ist, dann macht es mehr Sinn, nur Plug- in der kompilierten Version von Sassmeister oder CodePen in die CSS-Datei.

Oder alternativ könnten Sie manuelle Gruppierung von Selektoren vermeiden und @extend Richtlinie verwenden.Diese Methode scheint auch in Fiddle gut zu funktionieren und so nehme ich an, dass es keine Probleme erzeugen würde, selbst wenn es eine Versionskonflikt gibt.

.agenda-event { 
    &:nth-of-type(4n+1):nth-last-of-type(-n+4), 
    &:nth-of-type(4n+1):nth-last-of-type(-n+4) ~ & { 
    .agenda-button { 
     border-bottom: 0; 
     color: red; 
    } 
    } 
} 
.agenda-magazine { 
    @extend .agenda-event; 
}