Zentrieren mit Mindestabstand beim Floaten

[marctrix]

Hej Rolf,

Und diese CSS Eigenschaften:

.mainPart { display: flex; }

nav { flex: 0 0 10em; }
main { flex: 1 0 auto; }

Gegenvorschlag:

.mainPart {
 display: grid;
 grid-template-columns: 10em 1fr;
}

display:flex […]

Klingt kompliziert.

Wenn du in Grid eine Spalte mehr möchtest, kannst du die in der Zeile

grid-template-columns: 10em 1fr;

eine weitere Spalte leicht hinzufügen.

So (wenn die 20em breit sein soll):

grid-template-columns: 10em 1fr 20em;

Finde ich ich einfacher.

Zur Erklärung: 1fr verteilt den verfügbaren Platz gleichmäßig an alle Spalten, die 1fr zugeordnet bekommen.

Verhältnisse stellt man so dar

1:2

grid-template-columns: 1fr 2fr;

2:3

grid-template-columns: 2fr 3fr;

2:3:1:100

grid-template-columns: 2fr 3fr 1fr 100fr;

Ich glaube nicht, dass es noch einfacher geht 😉

Marc