Frage zu grid

[Gast]

Moin, ich verfolge aufmerksam die Diskussionen um "grid". Wie ich sehe gehen die vertikalen Gridlinien immer von ganz oben bis ganz unten.
Eine Realisierung wie hier im footer

ist wohl nicht realisierbar?

[Henry]

Hallo Gast,

ich glaube dein Denkfehler liegt daran, dass du meinst die ganze Seite müsste ein einziges Grid sein. Nein, du kannst jedes Element/Bereich einzelne Grids zuweisen.

Oder eben die Bereiche so einstellen, dass es passt. Hier findest du eine tolle Spielwiese mit vielen Beispielen zum ausprobieren.

Gruss
Henry

[Matthias Scharwies]

Servus!

Moin, ich verfolge aufmerksam die Diskussionen um "grid". Wie ich sehe gehen die vertikalen Gridlinien immer von ganz oben bis ganz unten.
Eine Realisierung wie hier im footer

ist wohl nicht realisierbar?

Doch, dass sind dann aber 2 Grids:

body {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
}

footer {
/* Position im body-Raster */
  grid-column: 1 / -1;
  grid-row:    -2 / -1;	

/* neues Raster für den Inhalt des Footers */
  display: grid;
  grid-template-columns:  3fr 1fr  100px 20em;
}

Jedes Grid wirkt nur auf die Kindelemente. (Ja, ich weiß, dass es subgrid gibt).

Herzliche Grüße

Matthias Scharwies

[Rolf B]

Hallo Matthias,

Ja, ich weiß, dass es subgrid gibt

Und mich k*tzt die Chromium-Bande an, dass sie das Ding nicht auf die Kette bekommt, während Firefox das stolz auf der Fahne vor sich herträgt.

Mich würd ja mal die Roadmap für LayoutNG interessieren, die die Herrschaften haben. Denn im Chromium-Bug 618969 (von 2016) steht, dass sie erstmal Grid-Layout in die neue Layout-Engine portieren wollen und Subgrid dann "trivial" wäre...

Rolf

[Gast]

Moin,
besten Dank @alle.

Was sollen hier

grid-column: 1 / -1;
grid-row: -2 / -1;

bewirken ?
Ich habe keine Änderung bemerkt, nachdem ich sie weggelassen hatte.

[Rolf B]

Hallo Gast,

du hättest eine Veränderung der footer-Breite feststellen müssen. Ohne explizite column-Angabe sollte die Auto-Placement Strategie des Browsers den footer nur in eine Zelle des Grid setzen.

Self-Wiki - Grid-Items: Die Rasterelemente

Wenn bei Dir keine Änderung erkennbar ist, hast Du möglicherweise andere Eigenschaften verwendet, die den Footer platzieren. Ohne Link auf deinen Sourcecode kannst nur du das beurteilen. Der Zustand unserer Glaskugelsammlung ist unverändert…

Rolf

[Gast]

Moin,
Ihr habt natürlich Recht! Ich habe es hier getestet. Zu den Zeilenabständen habe ich jetzt noch eine Frage. Mit dem Inspector erhalte ich folgendes:

Woher kommen die Zeilen 1, 3 und 4, wobei ich die Zeile 3 nicht markieren kann wie die übrigen Zeilen?

[Rolf B]

Hallo Gast,

Woher kommen die Zeilen 1, 3 und 4, wobei ich die Zeile 3 nicht markieren kann wie die übrigen Zeilen?

Was Dir da im Inspektor als "Zeile 1" und "Zeile 4" hervorgehoben wird, sind die body und footer Elemente, die Du aus mir nicht verständlichen Gründen auf 1em Höhe festgenagelt hast. Kannst Du den Grund dafür benennen?

In den meisten Fällen ist es sinnvoll, den Browser die Höhe von Elementen bestimmen zu lassen. Durch height:1em sind dein body und dein footer viel zu klein und die Elemente ragen über sie hinaus. Nimm die height-Angabe bei beiden weg.

"Zeile 2" ist dein Grid im body, mit den 5 p Elementen.

Zeile 3 ist einfach Weißraum, da ist nichts, und darum hebt der Inspektor da nichts hervor.

Und warum ist der da? Dein Bild zeigt so merkwürdige grüne Flächen über und unter den p Elementen. Was mag das wohl sein? Klick im Inspektor mal in der Infobox auf das "Layout" Tab und mach einen Farbvergleich...

Oder klick auf das "Berechnet" Tab, schalte die Browser-Stile ein und schau, was zwischen list-style-type und marker-end steht...

Spoiler...

Rolf

[Gast]

Hallo Rolf,

Was Dir da im Inspektor als "Zeile 1" und "Zeile 4" hervorgehoben wird, sind die body und footer Elemente, die Du aus mir nicht verständlichen Gründen auf 1em Höhe festgenagelt hast. Kannst Du den Grund dafür benennen?

Nur deshalb, weil mich der hohe Bereich hier: irritiert hat, und ich wissen wollte, woher dieser kommt.

Zeile 3 ist einfach Weißraum, da ist nichts, und darum hebt der Inspektor da nichts hervor.

Und warum ist der da? Dein Bild zeigt so merkwürdige grüne Flächen über und unter den p Elementen. Was mag das wohl sein? Klick im Inspektor mal in der Infobox auf das "Layout" Tab und mach einen Farbvergleich...

Oder klick auf das "Berechnet" Tab, schalte die Browser-Stile ein und schau, was zwischen list-style-type und marker-end steht...

Sind dies Default-Werte?
Mit bestem Dank

[Rolf B]

Hallo Gast,

bei HTML ist es so, dass es wie russische Puppen aus ineinander geschachtelten Bausteinen besteht. Der Body ist die zweite Schicht von außen (ganz außen ist das HTML Element), und deswegen wird dann, wenn Du den Body ausgewählt hast, auch eine ganze Menge blau. Das soll so sein.

Wenn Du mit der Maus über ein kleineres Element fährst, wird nur das hervorgehoben.

Du zeigst jetzt einen Screenshot mit Margin-Werten von 8px. Das ist der Default - für den Body. Nicht für ein <p> Element. Die grünen Streifen über den p Elementen, die Du in deinen Screenshots hattest, waren höher, nämlich 16px. Das ist der Default-Margin für ein p Element. Auf dem Regeln-Tab findest Du

margin-block-start: 1em;
margin-block-end: 1em;

und dabei steht "(vom Browser)". Auf der "Berechnet" Seite steht aber nicht 1em, sondern 16px. Das liegt daran, dass 1em eine Angabe ist, die auf der font-size basiert. 1em ist genau der Wert der font-size, die an dieser Stelle gültig ist.

Wenn Du diese Abstände also loswerden willst, musst Du den p Elementen den Margin nehmen. Oder verändern, je nach Wunsch. Wie Du Abstände festlegst, kommt jetzt auch drauf an, wie Du den Rest der Seite gestaltest.

Rolf

[Gast]

Hallo Rolf,
danke für die Erläuterungen. Was man alles im Inspector finden kann! Und wenn doch diese Default-Werte Für Abstände alle 0 wären! Schönen Abend.

[Rolf B]

Hallo Gast,

Und wenn doch diese Default-Werte Für Abstände alle 0 wären

* { margin: 0; }

Aber das ist zumeist zu brutal.

Rolf