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.

*is about how 1fr and auto work* --> if you have this information then you can do your symetrical layout and make column to be equal using `1fr` — Temani Afif, Nov 27 '19 at 11:17
@TemaniAfif true but it didn't come up on my search (as it is a differently framed question!) — Lee, Nov 27 '19 at 11:18
*true but didn't come up on my search* --> this isn't an issue, you didn't find it but I did so I close it as duplicate. Closing a question as a duplicate isn't a *bad* thing. Your question can know bring more search to those duplicate target. — Temani Afif, Nov 27 '19 at 11:21
@TemaniAfif Thanks - It's a different question in my view, but let's agree to differ. — Lee, Nov 27 '19 at 12:34

Lee · Accepted Answer · 2019-11-27T11:01:59.623

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>

edited Nov 27 '19 at 11:01

answered Nov 27 '19 at 10:55

Lee

29,398
28
117
170

2

more exactly it should be `minmax(0,1fr)` – Temani Afif Nov 27 '19 at 11:06
@TemaniAfif, thanks - why not post as an answer, with an explanation... – Lee Nov 27 '19 at 11:08

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

1 Answers1