Frage zu frickl-Beispiel

[Rolf B]

Hallo Eric,

du musst beachten, welche HTML Elemente am Grid-Layout teilnehmen. Das body-Element ist als display:grid festgelegt, und das bedeutet, dass seine direkten Kind-Elemente die Grid-Items sind^[1].

Das sind:

• header
• aside id="news"
• main
• footer

Dadurch, dass Du grid-template-columns von 1fr 3fr auf 1fr 1fr änderst, verändest Du lediglich das Verhältnis der Spaltenbreiten. Zuerst war es 1:3 (also 25% und 75% der Gesamtbreite), danach war es 1:1 (also jeweils 50% der Gesamtbreite).

WÜRDE der footer nur in einer Grid-Spalte stehen (was er nicht tut, siehe Gunnar), wäre er dadurch breiter oder schmaler geworden. Das hätte aber nichts daran geändert, dass die Copyright-Notiz in einem p Element steht, das als Block-Element auf eine neue Zeile kommt^[2].

Wenn Du "Kontakt" und "© 2021 SELFHTML" nebeneinander haben willst, dann musst Du den Inhalt des footer beeinflussen. Derzeit sind alle Kind-Elemente des Footers float:right und clear:right, d.h. sie landen am rechten Rand, stapeln sich aber nicht nebeneinander auf. Entfernen von clear:right würde sie schon nebeneinander setzen - aber ich würde das nicht tun. Besser wäre ein display:flex auf den footer mit justify-content: end;

footer {
	background: #e4ebf2;
	border-color: #8a9da8;
	display: flex;
	justify-content: end;    /* Flex-Inhalt rechtsbündig */
	column-gap: 1em;         /* Abstand zwischen den Flex-Items */
}

footer * {
    margin: 0;     /* Die Default-Margins von p entfernen */
}

Rolf

---

1. Abgesehen von Manipulationen mit display:contents, die hier zu weit führen würden ↩︎

2. Was man wiederum auf diverse Arten beeinflussen kann, aber das ist hier nicht der Fall ↩︎