Auf Thema antworten

Beitrag

[QUOTE="Sempervivum, post: 14146, member: 3917"]
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 [ICODE]flex: 1;[/ICODE] die Elemente gleich breit machen:
[CODE]        .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;
        }[/CODE]
Dann brauchst Du nur noch die beiden kleinen Elemente in den selben Container zu legen:
[CODE]    <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=""> 
                    <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>
[/CODE]
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:
[URL]https://www.smashingmagazine.com/native-css-masonry-layout-css-grid/[/URL]
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.
[/QUOTE]

Authentifizierung