Weiße Ziege: Grid: Verteilung von Freiraum ganz nach unten.

SELF-Forum

Grid: Verteilung von Freiraum ganz nach unten.

Weiße Ziege (Versionen)
– Informationen zu den Bewertungsregeln

Liebe Experten,

ich beginne mal mit dem Quelltext (kann ich den noch schöner einbinden?):

Die html-Datei:

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8"/>
    <link rel="stylesheet" href="test.css"/>
    <title>test</title>
</head>
<body>
<div id="b">
    <p>zweite
    <p>zweite
    <p>zweite
    <p>zweite
</div>
                    <div id="c">
                        <p>dritte
                        <p>dritte
                    </div>
                    <div id="d">
                        <p>vierte
                    </div>
</body>
</html>

und die CSS-Datei mit Namen test.css:

body{display:grid;
grid-template-columns:4em 4em;
grid-template-rows: min-content max-content;
//align-items:start;
//align-content:start;
gap:3px;}
div{border:thin solid black;background:red;}
#b{grid-column:1;grid-row:1/3;}
#c{grid-column:2;grid-row:1;}
#d{grid-column:2;grid-row:2;}
p{background-color:white;border:3px solid green;margin:0;}

Nun ist mein Anliegen folgendes: Ich wünsche mir, dass der Freiraum in der rechten Spalte (ich habe ihn rot färben lassen) ganz nach unten verteilt wird, dass also der rote Balken unter "dritte" entfällt und der unter "vierte" doppelt so breit wird. Irgendwie wäre das das, was ich mir von min-content versprochen habe. Mit align-items:start kann man die roten Balken wegzaubern, aber der Text rutscht davon auch nicht nach oben.

Vielen Dank für eure Ratschläge

Beitrag melden
–
Informationen zu den Bewertungsregeln

akzeptierte Antworten

  1. Grid: Verteilung von Freiraum ganz nach unten.

    Gunnar Bittersmann Homepage des Autors (Versionen)
    – Informationen zu den Bewertungsregeln

    @@Weiße Ziege

    ich beginne mal mit dem Quelltext (kann ich den noch schöner einbinden?):

    Noch schöner: gar nicht einbinden, sondern ein Online-Beispiel erstellen, wo man sich das gleich ansehen kann, ohne erst seinen Doktor in Strg. C. V. machen zu müssen. Auf eigenem Webspace oder auf Plattformen wie CodePen oder Dabblet.

    Ich hab das mal für dich gemacht.

    Nun ist mein Anliegen folgendes: Ich wünsche mir, dass der Freiraum in der rechten Spalte (ich habe ihn rot färben lassen) ganz nach unten verteilt wird, dass also der rote Balken unter "dritte" entfällt und der unter "vierte" doppelt so breit wird.

    #c (1. Zeile) soll nur soviel Platz beanspruchen wie nötig; #d (2. Zeile) den Rest:

    grid-template-rows: auto 1fr;

    Qapla’

    😷 LLAP

    --
    “When I was 5 years old, my mother always told me that happiness was the key to life. When I went to school, they asked me what I wanted to be when I grew up. I wrote down ‘happy.’ They told me I didn’t understand the assignment, and I told them they didn’t understand life.” —John Lennon
    Beitrag melden
    –
    Informationen zu den Bewertungsregeln

  2. Grid: Verteilung von Freiraum ganz nach unten.

    Rolf B
    +1 Informationen zu den Bewertungsregeln

    Hallo Weiße Ziege,

    leider hat Gunnar die Frage "wieso funktioniert min-content nicht" offen gelassen und nur "Mach's einfach anders" gesagt.

    Das Problem ist tatsächlich nicht min-content, sondern der Umstand, dass Du für die zweite Zeile max-content gesetzt hast. Dadurch entsteht eine "wasch mich, aber mach mich nicht nass" Situation, denn die maximale Inhaltshöhe für #d ist die Höhe eines einzeiligen p Elements.

    Die minimale Inhaltshöhe für #c sind zwei einzeilige p Elemente. In Summe reicht das nicht, um die Höhe von #b zu erreichen, d.h. eine von beiden Höhenanforderungen für Spalte 2 muss verletzt werden, wenn Spalte 1 ins Grid passen soll.

    Eine variable Höhe ist auch gar nicht so einfach zu erreichen. Mit normalem westlich gesetzten Text eigentlich gar nicht, denn dessen Höhe wird vom Inhalt und der Breite festgelegt. Ich habe mal mit writing-mode: vertical-lr; für den #c Bereich experimentiert, dann haben min-content/max-content einen Effekt.

    Welche der beiden Höhenforderungen zu ignorieren ist, definiert die Spec möglicherweise in einem Schwarm von drölf und mehr irrsinnig abstrakten Regularien; das tu ich mir jetzt nicht an. Möglicherweise überlässt sie es sogar dem User Agent (a.k.a. Browser), was er damit tun soll.

    Gunnars Angabe "auto 1fr" bewirkt jedenfalls, dass für Zeile 1 die maximale Inhaltshöhe gesetzt wird (ja, auto heißt maximal. Aber das ist für Dich egal, denn wegen der Textrichtung ist minimal=maximal) und Zeile 2 den kompletten Rest füllt (die Summe aller fr-Angaben beträgt 1, d.h. die Höhe ist $$\frac{1}{1}=1=100\%$$ des noch nicht verteilten Platzes).

    Du kannst auch "min-content 1fr" nehmen. Oder max-content 1fr. In allen 3 Fällen legt #c damit die Höhe der ersten Row fest und die zweite Row passt sich an.

    Rolf

    --
    sumpsi - posui - obstruxi
    Beitrag melden
    +1
    Informationen zu den Bewertungsregeln