CSS grid - How do you evenly distribute column width across "auto" columns?

Question

Say I have this layout:

.grid {
  display: grid;
  grid-template: auto / auto 64px 80px 64px auto;
  height: 100%;
  width: 100%;
}

<div class='grid'>
  <div style="background-color: red">This is a test. How do I make it symmetrical?</div>
  <div style="background-color: green"></div>
  <div style="background-color: yellow"></div>
  <div style="background-color: blue"></div>
  <div style="background-color: pink"></div>
</div>

I'd like to force the layout to be symmetrical, regardless of content, how do I do this?

EDIT

This isn't a duplicate (though it looks it at first glance):

How is "grid-template-rows: auto auto 1fr auto" interpreted?

is about how 1fr and auto work

CSS Grid - can you constrain auto column?

is about image overflow of an auto column.

This question is about how to make a simple layout symmetrical.

Answer 1

An answer is to use 1fr instead of auto!

.grid {
        display:grid;
        grid-template: auto / 1fr 64px 80px 64px 1fr;
        height: 100%;
        width: 100%;
        }

<div class='grid'>
  <div style="background-color: red">This is a test. How do I make it symmetrical?</div>
  <div style="background-color: green"></div>
  <div style="background-color: yellow"></div>
  <div style="background-color: blue"></div>
  <div style="background-color: pink"></div>
</div>