2 child-Elemente *übereinander* in einer grid-row?

[UliHF]

Hallo liebe Foristi,
beim Aufbau meines kleinen Blogs bin ich (als Halb-Laie) auf ein scheinbar sehr hartes und unüberwindliches Problem gestossen.
Habe bisher (fast) alles versucht und bin deshalb letztlich hier gelandet... (Die liebe Terminologie lässt leider auch sehr zu wünschen übrig

Die Voraussetzungen:
- Externer container: grid area, class grid-nav
- Interner container: div, class menu-button

Der minimalisierte CSS-code:
(die Maße entsprechen hier nicht den Maßen im Original - dies dürfte aber keine Rolle spielen, genug Platz hat's)

.grid-nav {
    grid-area    : nav1;
    display        : flex;
    align-items  : flex-start;
    overflow-x   : auto;
}

.menu-button {
    box-sizing   : border-box;
    min-width    : 10rem;
    max-width   : 10rem;
    min-height  : 0px;
    max-height : 20rem;
}

Bild:


So weit, so gut, bis auf diese bisher unlösbare Sache:
Die beiden container oben rechts sind in der Höhe klein genug, so dass sie übereinander passen würden. Dies habe ich absolut nicht geschaft...

Kann hier viellleicht jemand helfen? Bin momentan völlig blockiert durch diese Sache...

Liebe Grüße
Uli

 

[Sempervivum]

Poste besser das vollständige HTML und CSS, den äußeren Container und alles was darin ist. Oder die URL der fraglichen Seite.

 

[UliHF]

Vielen Dank für deine schnelle Reaktion!

Hatte ein Hochladen oder Ähnliches nicht erwogen.
Das Ganze ist in einem absolut temporären 'Rumprobier'-Stadium - aber mit dem Inspektor könnte es schon gehen, im relevanten Teil des CSS nachzuschauen...

Hab's jetzt mal hochgeladen nach => hier

Danke nochmals

P.S.: Auch ein adhoc Versuch mit column-width: xxx; hatte nicht geholfen.

 

[Sempervivum]

Das CSS ist ein wenig widersprüchlich: Auf der einen Seite benutzt Du relative Maßeinheiten, rem, aber auf der anderen Seite legst Du die Größe deiner Container starr fest. Damit hebelst Du die Möglichkeiten von Grid und Flex aus, das Layout responsiv zu machen und an die Abmessungen des Browserfensters anzupassen. Also diese festen Abmessungen zunächst weg lassen und mit flex: 1; die Elemente gleich breit machen:

        .menu-button,
        .menu-button-last {
            box-sizing: border-box;
            margin: 0.3rem;
            padding: 0.35rem;
            /* min-width: 6rem; */
            /* max-width: 6rem; */
            /* min-height: 0px; */
            /* max-height: 9.708rem; */
            border-radius: 6%;
            background: rgb(8, 145, 122);
            background: linear-gradient(-25deg, rgb(8, 145, 122) 0%, rgb(85, 246, 219) 50%, rgb(158, 250, 235) 100%);
            box-shadow: 0.35rem 0.22rem 0.1875rem #808080;
            flex: 1;
        }

Dann brauchst Du nur noch die beiden kleinen Elemente in den selben Container zu legen:

    <div class="grid-nav">
        <div class="menu-button">
            <a class="link-nav" href="/p/neue_deckel-brotbackform_aus_stahl.html">
                <img src="/assets/img/Brotbackform-Prototyp-01(600mal600mal72).png" alt="alt: Brotbackform-Prototyp-1"
                    width="100%">
                <div class="button-text">Brotbackform-Modell nach Maß</div>
            </a>
        </div>
        <div class="menu-button">
            <a class="link-nav" href="/p/dinkel_weizen_vollkornbrot_ohne_kneten.html">
                <img src="" alt="alt: Leckeres Vollkorn-Dinkelbrot" width="100%" style="">
                <div class="button-text">Leckeres Vollkorn-Dinkelbrot</div>
            </a>
        </div>
        <div>
            <div class="menu-button">
                <a class="link-nav" href="/p/ist_ulisblog_gewerblich.html">
                    <img src="" style=""> <!-- alt="alt: Sparschwein" width="100%"> -->
                    <div class="button-text">?</div>
                </a>
            </div>
            <div class="menu-button">
                <a class="link-nav" href="/p/dummy.html">
                    <img src="" alt="alt: Dummy" width="100%" style="">
                    <div class="button-text">Dummy</div>
                </a>
            </div>
        </div>
    </div>

Möglicher Weise suchst Du aber eine Möglichkeit, dass Grid diese Anordnung automatisch macht, also die Elemente untereinander wenn die Höhe gering ist und nebeneinander wenn sie größer ist? Das läuft dann unter dem Begriff "Masonry", siehe hier:
https://www.smashingmagazine.com/native-css-masonry-layout-css-grid/
In CSS-Grid angedacht aber die Browserunterstützung lässt noch zu wünschen übrig, bei mir im Opera hat es nicht funktioniert.
Es gibt jedoch auch Implementierungen mit Javascript.

 

[UliHF]

Hallo Sempervivum,
dank deinem Beitrag komme ich der Sache nun weiter auf die Spur (nur so kann man das nennen bei meiner Expertise).

Die Anordnung, dich ich in der nav-grid Zeile möchte, war / ist wohl bisher in HTML / CSS so nicht vorgesehen. Auch ein zutreffender Begriff ist jetzt dafür da: 'Fake Masonry' (z. B. sehr anschaulich auch hier bei kulturbanause.de).



Zu deinem Beitrag:

Das CSS ist ein wenig widersprüchlich: Auf der einen Seite benutzt Du relative Maßeinheiten, rem, aber auf der anderen Seite legst Du die Größe deiner Container starr fest. ...

Dies hängt sicherlich mit der 'Rumprobiererei' zusammen, in deren Zusammenhang manche Maße temporär eingefügt wurden - vom Grundaufbau her ist jedenfalls das wesentliche Layout abhängig von *sehr* wenigen Maßen in 'rem' (mit Jekyll, Lquid und YAML).

... Dann brauchst Du nur noch die beiden kleinen Elemente in den selben Container zu legen: ...

Auf diese Idee kam ich nicht - müsste allerdings versuchen, in der for-Schleife zur Erzeugung der Buttons zu berechnen, ob das wohl vertikal übereinander passt. Das wäre auch einiger Zusatz-Aufwand, denke ich.

...
Möglicher Weise suchst Du aber eine Möglichkeit, dass Grid diese Anordnung automatisch macht, also die Elemente untereinander wenn die Höhe gering ist und nebeneinander wenn sie größer ist? Das läuft dann unter dem Begriff "Masonry",...

genau das ist gewünscht - inwieweit 'grid' da seine 'Finger' drin hat ist mir allerdings nicht klar...

So bleibt die Priorität das 'Fake Masonry' und ich werde versuchen, dies mit statischem HTML-CSS umuzusetzen (ganz puristisch: kein Skript).

'Old school' ohne Schule halt...

Melde mich nochmals (hoffentlich) mit der Lösung, dann könnten viell. andere auch etwas davon haben.

Viele Grüße
Uli

 

[UliHF]

Hab mir das jetzt angeschaut und bin zu dem Ergebnis gekommen, dass es mangels Überblick zu viel Versuche und Arbeit sind, den gewünschten Einbau der Menu-Buttons automatisiert umzusetzen.

Ich mache dies gerne für den Anfang auch weitgehend manuell. Es gibt ja auch nicht so viele Seiten!

smashingmagazine.com schlägt für eine 'konventionelle' Lösung im Beispiel folgendes CSS vor:

body {
  background-color: #000;
  font: 1.1em Arial, Helvetica, sans-serif;
}

img {
  max-width: 100%;
  display: block;
}

figure {
  margin: 0;
  display: grid;
  grid-template-rows: 1fr auto;
  margin-bottom: 10px;
  break-inside: avoid;
}

figure > img {
  grid-row: 1 / -1;
  grid-column: 1;

Meinst du das Obige kann (ähnlich) problemlos in das bereits bestehende grid-layout eingebaut werden? Die einzelnen Buttons arbeite ich dann gerne bis auf Weiteres manuell passend ein. Ich komm ja sonst nie mehr zu den Inhalten des Blog...

FYI: Der Overflow soll auf jeden Fall für mobile nach rechts stattfinden (overflow-x: auto; denke ich)

Dein Rat würde sehr weiterhelfen - das Ergebnis würde ich auf jeden Fall berichten.

Vielen Dank im Voraus,
Grüße Uli