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>
More about “grid-template-columns is not working as expected” related questions