CSS grid Spalten Problem

[derRenner]

Hallo,

ich steh da grad an einem CSS-Problem, das ich mir so nicht erklären kann:

<div class="teaserbox onetwo">
    <div class="textbox">...inhalt...</div>
    <div class="imagebox">...bild...</div>
</div>

<div class="teaserbox twoone">
    <div class="textbox">...inhalt...</div>
    <div class="imagebox">...bild...</div>
</div>

.teaserbox {
    display: grid;
    grid-template-rows: 300px;
    grid-template-areas: "colone coltwo";

    &.onetwo {
        grid-template-columns: 1fr 2fr;

        .textbox {
            grid-column: 1 / 2;
        }

        .imagebox {
            grid-column: 2 / 3;
        }
    }

    &.twoone {
        grid-template-columns: 2fr 1fr;  
             
        .textbox {
            grid-column: 2 / 3;
        }

        .imagebox {
            grid-column: 1 / 2;
        } 

    }

}

Mit der Klassenkombination .teaserbox.onetwo wird mir
links der Text in der schmalen Spalte und rechts das Bild in der breiten Spalte angezeigt

Die Klassenkombination .teaserbox.twoone funktioniert jedoch nicht - da rutscht die linke Spalte nun unter die eigentliche Höhe auf 0px



Gebe ich der .imagebox eine Höhe mit, dann macht das Bild nach unten auf

Wenn ich das HTML dann so anpasse, dass ich .textbox und .imagebox von der Platzierung her austausche, dann funktioniert .teaserbox.twoone aber .teaserbox.onetwo nicht mehr.

Ich denke, dass ich im CSS irgendwo eine Deklaration vergesse - aber nur welche

Danke für die Hilfestellung

[derRenner]

zack ... einfach übersehen: grid-auto-flow: column;
jetzt passt das

[carlmarx]

zack ... einfach übersehen: grid-auto-flow: column;
jetzt passt das

Hallo, konntest du dieses Problem lösen?

[derRenner]

Hallo,

ja, mit genau der genannten CSS Anweisung.
Da das Image aber als background-image eingefügt ist, musste ich der .imagebox noch eine Höhe mitgeben.