Sveigjanleg vefhönnun

  @media screen and (min-width: 37.5em) {
    main {
      /* skipti yfir í 2 dálka */
      grid-template-areas:
        "aside article";
      grid-template-columns: 1fr 2fr;
    }
  }

Síðan bætum við og breytum skipulagi vefsíðunar eftir því hvað skjáir eru stórir. Til að breyta hlutföllum í vafra sem er með 48em (760px +) skjá, getum við notað stílskipunina grid-template-columns til að ákveða hlutallið á milli dálkana í <main>.

  @media screen and (min-width: 48em) {
      main {
      /* aside 25% article 75% */
      grid-template-columns: 1fr 3fr;
      }
  }