Grid - Wie bewege die aside-Element

[Rolf B]

Hallo Joseba,

das Grid-Raster wird von den grid-Eigenschaften des body festgelegt. Da steht

grid-template-columns: 8% 74% 18%; -ms-grid-columns: 8% 74% 18%;

und das bestimmt, wie breit die Spalten sind. Wenn Du etwas ändern möchtest, dann an dieser Stelle. Wenn Du den Elementen, die Du ins Grid hängst, einen Margin gibst, verändert sich das Grid nicht. Es entsteht nur freier Platz. Das siehst Du, wenn Du den Elementen Ränder gibst.

Du musst das auch nicht alles mit Prozenten machen. Man kann auch sagen: Links 10em, Rechts 20em und in der Mitte den Rest:

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

Mit fr kannst Du Platz in Bruchteilen verteilen. Du könntest "1fr 8fr 2fr" sagen. Das wären dann 1+8+2 = 11 Teile, die erste Spalte bekommt $$\frac{1}{11}$$ des Platzes, die zweite Spalte bekommt $$\frac{8}{11}$$ und die dritte Spalte $$\frac{2}{11}$$. Wenn bei den Grid-Spalten nur eine Spalte in fr angegeben ist, bekommt sie $$\frac{1}{1}$$ des Platzes, also alles was nach dem Verteilen der 10em und 20em noch frei ist.

Rolf