Design Umsetzung @supports (display: grid)

[beatovich]

hallo

Ok, ich habe es jetzt mal angepasst:
https://codepen.io/anon/pen/yRPMjW

Muss ich das ganze @media screen jetzt auch noch außerhalb von @supports (display: grid) anpassen? Ich finde das ganze ist doch sehr viel Schreibarbeit für so ein Footer.

Es gibt verschiedene Strategien.

Angenommen, deine Default @media ist

@media screen {
  /* hier kein grid */
}

@media screen and (min-width:40em){
  /* hier gelten immer noch die oberen Regeln */

  @supports(display:grid){
    /* grid 2 spaltig */
  }
}

@media screen and (min-width:60em){
  /* hier gelten immer noch die bisher notierten Regeln */
  /* eventuell Alternativen zu grid hier */
  @supports(display:grid){
    /* grid 4 spaltig */
  }
}

Du kannst dieses Schema übrigens für dein gesamtes CSS anwenden.

Ferner solltest du em statt px in @media Regeln verwenden.