Ignorieren divs umgebenden Rasterzellen in der Anzeige: Raster

Question

Ich habe ein Raster-Layout mit 3 Kinder, die jeweils 4 von 12 Spalten überspannt, um eine horizontale 3-Spalten-Layout zu erstellen. Ein vereinfachtes Beispiel ist hier zu sehen: https://jsfiddle.net/bnyy6fde/1/.

Mein CMS umschließt jedes untergeordnete Element in einem div, wodurch das Rasterlayout falsch gerendert wird. Dies kann man hier sehen, demonstriert durch das div mit Klasse 'nicht arbeiten': https://jsfiddle.net/e6b2yf37/2/.

<div class="grid"> 
    <div class="not-working"> 
    <div class="grid-cell"> 
     <h3>Grid element 1</h3> 
    </div> 
    </div> 
    <div class="not-working"> 
    <div class="grid-cell"> 
     <h3>Grid element 1</h3> 
    </div> 
    </div> 
    <div class="not-working"> 
    <div class="grid-cell"> 
     <h3>Grid element 1</h3> 
    </div> 
    </div> 
</div> 

Je nach Konfiguration des Editors kann die Anzahl der Spalten zwischen 1 und 4 Elementen pro Zeile liegen. Daher ist es nicht möglich, dies einfach zu lösen, indem Sie div, 'not-working', grid-column-end angeben: 4.

Es ist nicht möglich, die divs zu entfernen, die jedes Kind im CMS umhüllen.

Gibt es eine reine CSS-Lösung, die ignoriert das div 'nicht arbeiten' unabhängig von der Anzahl der Spalten die Kinder überspannen?

Answer 1

.grid {display: flex;} 
.not-working {flex-grow: 1; width: 10%;} 

Ihre divs sollten jetzt das Raster gleichmäßig füllen.

Answer 2

Wie wäre es gerade die Styline Ändern heißt

.not-working { 
    width: auto; 
    grid-column-end: span 4; 
}