多个应用程序的 HTML 网格布局不起作用

Question

我是 html 新手，在网格布局方面遇到了麻烦。我想以第一行中的 app1、app2 和 app3 以及第二行中的 app4 的方式显示 4 个应用程序。代码附在下面。但是，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";