grid areas

[Rolf B]

Hallo Matthias,

grid-template-columns: 8em calc(30% - 8em) 1fr;

In die Falle bin ich neulich schonmal getappt. Das ist mit calc unnötig kompliziert. Es ist eleganter, nicht die zweite Spalte vorzugeben und die dritte auffüllen zu lassen, sondern andersrum:

grid-template-columns: 8em 1fr 70%;

Alternativ zu Spaltenzuordnungen über Nummern kann man eventuell - je nach Problemstellung - das Grid auch namentlich aufbauen. Siehe Wiki.

body {
  display:  grid;
  grid-template: "rot   rot   grün" auto
                 "blau  gelb  gelb" auto
                 "grau  grau  grau" auto 
                / 8em   1fr   70%;
}

.oben-links   { grid-area: rot; }
.oben-rechts  { grid-area: grün; }
.mitte-links  { grid-area: blau; }
.mitte-rechts { grid-area: gelb; }
.unten        { grid-area: grau; }

Rolf