.container {
    display: grid;
    grid-template-areas: 
            "b b . a ."
            "b b d d ."
            "b b . c c";
    gap: 8px;
    reading-flow: grid-rows;
    height: 200px;
  }

  #item1 {
    grid-area: a;
    background-color: lightcoral;
    border-color: lightcoral;
    :focus {
      background-color: red;
      border-color: red;
    }
  }

  #item2 {
    grid-area: b;
    background-color: lightblue;
    border-color: lightblue;
    :focus {
      background-color: blue;
      border-color: blue;
    }
  }

  #item3 {
    grid-area: c;
    background-color: lightgreen;
    border-color: lightgreen;
    :focus {
      background-color: green;
      border-color: green;
    }
  }

  #item4 {
    grid-area: d;
    background-color: rebeccapurple;
    border-color: rebeccapurple;
    :focus {
      background-color: purple;
      border-color: purple;
    }
  }