grid in header, in main, in footer

[Joe]

Moin, moin,
ich meine mich zu erinnern, dass es eine Anweisung gibt, um die bisherige grid-Einstellung zu deaktivieren bevor eine neue grid-Definition folgt.
Z.B. andere grids im footer als in main.
Wie lautet diese Anweisung?

[Rolf B]

Hallo Joe,

ein Grid wird für bestimmte Containerelemente festgelegt. Für welche, das entscheidet sich über den Selektor der CSS Regel, die das Grid erzeugt.

header {
   display: grid;
   ...
}

macht aus jedem header-Element ein Grid. Wenn Du mehrere Header auf der Seite hast (was nicht verboten ist), würde jeder dieser Header ein Grid werden und Du müsstest überlegen, ob Du Klassen ergänzen musst oder mit spezifischeren CSS Selektoren arbeiten musst, um zu vermeiden, dass ein Grid nicht dort entsteht wo Du es nicht haben willst.

Genauso macht

main {
   display: grid;
   ...
}

aus dem main-Element (wovon es typischerweise nur eins gibt - jedenfalls immer nur ein sichtbares geben darf) ein Grid.

Ein footer-Element würde aber weder durch die eine noch durch die andere Regel zu einem Grid werden. Du musst ein Grid nicht am Punkt X „einschalten“ und am Punkt Y wieder „ausschalten“. Es gilt nur für die im CSS Selektor getroffenen Elemente. Wenn deren Ende-Tag kommt, ist das Grid zu Ende.

Vielleicht verwechselst Du das mit float. Da muss man gelegentlich mal einem Element ein clear:both; geben, um für die bisherigen Floats einen Abschlus zu finden.

Rolf

[Der Martin]

Hallo Rolf,

[...], um zu vermeiden, dass ein Grid nicht dort entsteht wo Du es nicht haben willst.

die doppelte Verneinung ist manchmal nicht ganz unkompliziert. 😉

Live long and pros healthy,
 Martin

[Rolf B]

Hallo Martin,

doppelte Verneinung ist unproblematisch. Aber bei Dreifacher gerate ich ins Schleudern.

Nun ist's hoffentlich nicht unrichtig...

Rolf