grid-template-columns is not working as expected

Question

In the following code I have two columns and I first column to be 5 time bigger than second. To achieve that i have done following:

grid-template-columns: 5fr 1fr;

But all both the columns are having same width. Can someone explain why?

.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

You are using the grid-template shorthand that is overwriting the grid-template-columns. Either change grid-template to grid-template-areas or you can combine the definition like below:

.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>