|
|||
Verzeihung, hie rhabe ich mich sehr ungut ausgedrückt:
Ich meinte nicht weniger CSS als bei grid, sondern man hat weniger Parameter insgesamt zur Verfügung. Auch meinte ich nicht den header mit flexbox und den Rest als grid, aber alles der Reihe nach: https://developer.mozilla.org/en-US/...Masonry_Layout für infos bezüglich masonry layout. (habe ich aber noch nie verwendet, keine große Unterstütung... obwohl chrome will das auch implementieren soweit ich weiß) Das mit 100 und 10 meinte ich eher so: In grid gibt es 100 verschiedene Parameter die man verwenden kann (nicht MUSS), in flexbox gibt es eine kleinere Anzahl. Die 100 und 10 hier sind einfach Hausnummern und nicht repräsentativ. Bei flexbox habe ich: die Richtung, die Reihenfolge und den Abstand der Elemente. Bei Grid habe ich: Die Reihen, die Spalten, die einzelnen Elemente in den Reihen + Spalten, die größe der Elemente, die Platzierung, etc. (also viel mehr, beide Listen haben keinen Anspruch auf Vollständigkeit) Also kurz gesagt: Wenn ich nur die Ausrichtung von zB zwei Elementen brauche, wieso dann grid verwenden wenn mir flexbox ausreicht. Code:
display: flex; justify-content: space-between; Vielleicht kein perfektes Beispiel, aber das meinte ich damit. Ich würde nicht für den header flexbox verwenden, ich würde für die gesamte Seite grid verwenden und für die Zelle im Header (der Teil des Grids ist) dann flexbox (wenn die Elemente so an je ein Ende aufgereiht werden sollen) Ich habe es nun zweimal versucht zu erklären wann man sich für grid und wann für flexbox entscheidet, woran mangelt es denn noch? |
Sponsored Links |
|
|||
Damit jeder selbst über den Unterschied zwischen Flexbox und CSS-Grid beurteilen kann habe ich ein Testseite erstellt. Der header-Inhalt wurde einmal mit Flexbox und einmal mit CSS-Grid erstellt.
Unter header stehen im CSS die Anweisungen, die für Flexbox und CSS-Grid benötigt werden. Unter .headerflex die nur für Flexbox benötigten Angaben: Code:
/*.headerflex*/ @media all { .headerflex { display: flex; } .headerflex p { width: 250px; } } Code:
/*.headergrid*/ @media all { .headergrid { display: grid; grid-template-columns: auto 250px; } } |
Sponsored Links |
|
||||
Zitat:
Danke! Ich werde versuchen daraus ein minimales Testcase zu bauen, ganz frei von padding und margin, wo es allein um die Anordnung geht. Dann wird vielleicht noch deutlicher, wo die Vor- und Nachteile von Flexbox vs. Grid im konkreten Fall liegen. Dabei werde ich dann auch kein section verwenden, sondern wie in #1 zwei navs.
__________________
|
|
|||
Du hast mich nicht verstanden.
Mir ging es um die Angaben die "nur für Flexbox" und die "nur für CSS-Grid" erforderlich sind. Die von dir genannten Angaben fallen unter Zitat:
|
|
||||
@MrMurphy
Mir fällt es leider schwer, Deine Beispiele nachzuvollziehen. Das ist natürlich weder eine Kritik, noch eine versteckte Aufforderung an Dich, noch weitere Beispiele zu posten. Ich fand's voll nett, dass Du sie gepostet hast : ) Ich benötige jedenfalls zum Verständnis von Grid ein Beispiel, wo der ganze Feinschliff mit padding und margin außen vor bleibt. Eine Lösung allein mit Grid. Mit Subgrid im Header. Meine bisherigen Spielereien waren nicht von Erfolg gekrönt. Grid ist wirklich sehr komplex.
__________________
|
|
||||
@MrMurphy Ich sehe, dass du sie für beide definiert hast, aber die Angabe ist für dein Grid nicht relevant. Ich habe es dir hier mal etwas eingekürzt.
Zitat:
A Complete Guide to Grid A Complete Guide to Flexbox Das ist zwar einiges an Text, aber es ist sehr anschaulich erklärt, welche Eigenschaften was genau bewirken. Geändert von inta (03.03.2021 um 16:49 Uhr) |
|
|||
Du kannst zB auf selfhtml schauen ob die da gute Infos haben. Nachdem ich auch alle Infos auf englisch beziehe kann ich dir da nicht weiter helfen. Nur so viel: Gerade beim flexbox artikel hast du viele Bilder die dir schon mal weiter helfen werden zusätzlich zum Text (Zumindest mir haben sie schon oft für das einfache Grundverständnis geholfen)
|
Sponsored Links |
|
|||
Zitat:
Also sind für das einfache header-Layout mit Flexbox 3 spezielle Zeilen und für das Layout mit CSS-Grid zwei spezielle Zeilen erforderlich. Vorteil CSS-Grid. Ich kann überhaupt nicht nachvollziehen was daran kompliziert sein soll. "display: grid;" sollte sich jeder Webseitenersteller merken können. Das Schlüsselwort "grid-template-columns" prägt sich nach mehrmaligem Benutzen wohl auch ein. Wobei das bei der Suche nach "CSS-Grid" auch schnell zu finden ist. Für zwei Spalten dahinter dann zwei Werte. Das kann natürlich verwirren. Das lässt sich zwar nicht auf alle Situationen übertragen, funktioniert aber in dieser Konstellation. |
Sponsored Links |
Themen-Optionen | |
Ansicht | |
|
|
Ähnliche Themen | ||||
Thema | Autor | Forum | Antworten | Letzter Beitrag |
Script nur für Inhalt eines bestimmten DIVs | Kipperdesign | Javascript & Ajax | 8 | 11.02.2013 14:03 |
DIVs wollen nicht in Container | Echnotron | CSS | 4 | 22.02.2012 09:46 |
n Div's in eine Zeile | Mustangore | CSS | 9 | 20.08.2009 16:19 |
Höhenanpassung von divs | localex | CSS | 1 | 21.11.2007 12:25 |
Divs nebeneinander, aber mittig | RomanM | CSS | 2 | 24.10.2007 07:32 |