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

Beitrag lesen

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