@@Gunnar Bittersmann > > Ich könnte natürlich auch für die Ultrabreit-Darstellung (ab 2×30em+gap) eine @media-Query machen. > > So würde ich’s wohl machen. Oder auch nicht. > > Dann hätte ich eine magic number drin, gefällt mir nicht. So magisch ist die Zahl gar nicht. Mit CSS-Präprozessor kann man die Berechnung im Code haben ([Beispiel 1](https://codepen.io/gunnarbittersmann/pen/xbbyqdp?editors=0100)): ```scss .container { $max-right-column-width: 30em; $gap: 1em; display: grid; grid-template-columns: 1fr 1fr; gap: $gap; @media (width >= 2 * $max-right-column-width + $gap) { grid-template-columns: 1fr $max-right-column-width; } } ``` `margin-block` für `body` hast du genullt? Ansonsten würde der auch noch in die Berechnung einfließen. Wenn man keinen CSS-Präprozessor verwendet, rechnet man den Wert selbst aus und schreibt die Rechenformel dafür an Ort und Stelle in einen Kommentar – dann ist Zahl auch nicht mehr magisch. --- **Es geht aber auch ganz ohne Rechnerei**. Man wählt als Breakpoint einen Wert, der *ungefähr* beim Doppelten der Maximalbreite der rechten Spalte liegt ([Beispiel 2](https://codepen.io/gunnarbittersmann/pen/XJJxpyd?editors=0100)): ```css .container { display: grid; grid-template-columns: 1fr 1fr; gap: 1em; @media (width >= 62em) { grid-template-columns: 1fr 30em; } } ``` Damit ist sichergestellt, dass das Layout bei allen (größeren[^1]) Vieportbreiten vernünftig aussieht. Das ist, was Nutzer erwarten. [^1]: Die Einspaltigkeit bei schmalen Viewports haben wir ja schon abgefrühstückt. Beim Auf- und Zuziehen des Fensters können die Spaltenbreiten geringfügig springen, aber das ist *völlig egal!* Der einzige, der das Fenster auf- und zuzieht, ist der Webentwickler. Jolan tru {:@art-x-romulan} -- Wenn der Faschismus wiederkehrt, wird er nicht sagen „Hallo, ich bin der Faschismus.“ Er wird sagen: „Ich suche in diesem Deutschen Bundestag keine anderen Mehrheiten als die in der demokratischen Mitte. Wenn es heute eine solche Mehrheit gegeben hat, bedauere ich das.“ (Friedrich Merz)

@@Gunnar Bittersmann > > Ich könnte natürlich auch für die Ultrabreit-Darstellung (ab 2×30em+gap) eine @media-Query machen. > > So würde ich’s wohl machen. Oder auch nicht. > > Dann hätte ich eine magic number drin, gefällt mir nicht. So magisch ist die Zahl gar nicht. Mit CSS-Präprozessor kann man die Berechnung im Code haben ([Beispiel 1](https://codepen.io/gunnarbittersmann/pen/xbbyqdp?editors=0100)): ```scss .container { $max-right-column-width: 30em; $gap: 1em; display: grid; grid-template-columns: 1fr 1fr; gap: $gap; @media (width >= 2 * $max-right-column-width + $gap) { grid-template-columns: 1fr $max-right-column-width; } } ``` `margin-block` für `body` hast du genullt? Ansonsten würde der auch noch in die Berechnung einfließen. Wenn man keinen CSS-Präprozessor verwendet, rechnet man den Wert selbst aus und schreibt die Rechenformel dafür an Ort und Stelle in einen Kommentar – dann ist Zahl auch nicht mehr magisch. --- **Es geht aber auch ganz ohne Rechnerei**. Man wählt als Breakpoint einen Wert, der *ungefähr* beim Doppelten der Maximalbreite der rechten Spalte liegt ([Beispiel 2](https://codepen.io/gunnarbittersmann/pen/XJJxpyd?editors=0100)): ```css .container { gap: 1em; display: grid; grid-template-columns: 1fr 1fr; gap: 1em; @media (width >= 62em) { grid-template-columns: 1fr 30em; } } ``` Damit ist sichergestellt, dass das Layout bei allen (größeren[^1]) Vieportbreiten vernünftig aussieht. Das ist, was Nutzer erwarten. [^1]: Die Einspaltigkeit bei schmalen Viewports haben wir ja schon abgefrühstückt. Beim Auf- und Zuziehen des Fensters können die Spaltenbreiten geringfügig springen, aber das ist *völlig egal!* Der einzige, der das Fenster auf- und zuzieht, ist der Webentwickler. Jolan tru {:@art-x-romulan} -- Wenn der Faschismus wiederkehrt, wird er nicht sagen „Hallo, ich bin der Faschismus.“ Er wird sagen: „Ich suche in diesem Deutschen Bundestag keine anderen Mehrheiten als die in der demokratischen Mitte. Wenn es heute eine solche Mehrheit gegeben hat, bedauere ich das.“ (Friedrich Merz)

@@Gunnar Bittersmann > > Ich könnte natürlich auch für die Ultrabreit-Darstellung (ab 2×30em+gap) eine @media-Query machen. > > So würde ich’s wohl machen. Oder auch nicht. > > Dann hätte ich eine magic number drin, gefällt mir nicht. So magisch ist die Zahl gar nicht. Mit CSS-Präprozessor kann man die Berechnung im Code haben ([Beispiel 1](https://codepen.io/gunnarbittersmann/pen/xbbyqdp?editors=0100)): ```scss .container { $max-right-column-width: 30em; $gap: 1em; display: grid; grid-template-columns: 1fr 1fr; gap: $gap; @media (width >= 2 * $max-right-column-width + $gap) { grid-template-columns: 1fr $max-right-column-width; } } ``` `margin-block` für `body` hast du genullt? Ansonsten würde der auch noch in die Berechnung einfließen. Wenn man keinen CSS-Präprozessor verwendet, rechnet man den Wert selbst aus und schreibt die Rechenformel dafür an Ort und Stelle in einen Kommentar – dann ist Zahl auch nicht mehr magisch. --- **Es geht aber auch ganz ohne Rechnerei**. Man wählt als Breakpoint einen Wert, der *ungefähr* beim Doppelten der Maximalbreite der rechten Spalte liegt ([Beispiel 2](https://codepen.io/gunnarbittersmann/pen/XJJxpyd?editors=0100)): ```css .container { gap: 1em; display: grid; grid-template-columns: 1fr 1fr; gap: 1em; @media (width >= 62em) { grid-template-columns: 1fr 30em; } } ``` Damit ist sichergestellt, dass das Layout bei allen (größeren[^1]) Vieportbreiten vernünftig aussieht. Das ist, was Nutzer erwarten. [^1]: Die Einspaltigkeit bei schmalen Viewports haben wir ja schon abgefrühstückt. Beim Auf- und Zuziehen des Fensters können die Spaltenbreiten geringfügig springen, aber das ist *völlig egal!* Der einzige, der das Fenster auf- und zuzieht, ist der Webentwickler. Jolan tru {:@art-x-romulan} -- Wenn der Faschismus wiederkehrt, wird er nicht sagen „Hallo, ich bin der Faschismus.“ Er wird sagen: „Ich suche in diesem Deutschen Bundestag keine anderen Mehrheiten als die in der demokratischen Mitte. Wenn es heute eine solche Mehrheit gegeben hat, bedauere ich das.“ (Friedrich Merz)