grid-template-columns работает не так, как ожидалось

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>