网格模板列无法正常工作

Question

在下面的代码中，我有两列，第一列比第二列大5倍。为此，我已经完成以下工作：

grid-template-columns: 5fr 1fr;

但是所有两列都具有相同的宽度。有人可以解释为什么吗？

.flow-details-grid {
  display: grid;
  background-color: blue;
  grid-template-columns: 5fr 1fr;
  grid-template: 'editor editor-meta'
                  'editor editor-new';
  
  height: 100vh;
  width: 100%;
}

  .editor {
    grid-area: editor;
  }
  .editor-meta {
    grid-area: editor-meta;
  }
  .editor-new {
    grid-area: editor-new;
  }

<section class="flow-details-grid">
  <div class="clr-row editor">
    editor
  </div>
  <div class="clr-row editor-meta">
    editor-meta
  </div>
  <div class="clr-row editor-new">
    editor-new
  </div>
</section>

Answer 1

您正在使用grid-template的速记来覆盖grid-template-columns。可以将grid-template更改为grid-template-areas，也可以组合以下定义：

.flow-details-grid {
  display: grid;
  background-color: blue;
  /*grid-template-columns: 5fr 1fr;*/
  grid-template: 'editor editor-meta' 'editor editor-new' / 5fr 1fr; /* changed */
  height: 100vh;
  width: 100%;
}

.editor {
  grid-area: editor;
}

.editor-meta {
  grid-area: editor-meta;
}

.editor-new {
  grid-area: editor-new;
}

<section class="flow-details-grid">
  <div class="clr-row editor">
    editor
  </div>
  <div class="clr-row editor-meta">
    editor-meta
  </div>
  <div class="clr-row editor-new">
    editor-new
  </div>
</section>