HTML сетка из нескольких приложений не работает

Question

Я новичок в html, и у меня проблемы с компоновкой сетки. Я хотел бы отобразить 4 приложения так, как app1, app2 и app3 в первом ряду и app4 во втором ряду. Код прилагается, как показано ниже. Тем не менее, app1 / 2/3 толпятся в макете. Я что-то там пропустил?

Все приложения похожи на

<div class="container">
    here are some code
</div>

Вот код для сетки:

<style>
  .queryInner {
    display: grid;
    grid-template-areas: "query patientImage cohortImage",  "result result result";
    grid-template-rows: auto auto;
    grid-row-gap: 10px;
    grid-column-gap: 10px;
    align-items: start;
  }
</style>

<div class ="queryInner">
  <div [style.grid-area] = "'query'">
    <app-genotype-query></app-genotype-query>
  </div>

  <div [style.grid-area] = "'patientImage'">
    <app-individual-image></app-individual-image>
  </div>

  <div [style.grid-area] = "'cohortImage'">
    <app-cohort-image></app-cohort-image>
  </div>

  <div [style.grid-area] = "'result'">
    <app-genotype-query-list></app-genotype-query-list>
  </div>
</div> 

Answer 1

без запятой

grid-template-areas: "query patientImage cohortImage"
                         "result result result";