css grid: how does it decide the width of the columns/height of rows ?

why dont the columns/rows fit the content? If you dont set the column/row sizing, i thoght it would be auto to max-content... ive watched a ton of videos on grid and most of them were demos where they set the columns to repeat (3, 1fr) or repeat (6, 1fr) and the content was all equal so they needed all equal space; vrey neat and tidy. But i keep running into challenges on icode this where i dont want it to be 1fr or any set value, i just want it to fit to the content exactly and then be able to set the gap as needed. In the example with the yellow bg, the last column is way wider than the content, and there is no width set on the parent with display grid. where is all that extra space coming from? How does it decide the width of that column?
In the example with the white bg, the columns are both much wider than the content but i only have grid-template-areas set. No explicit grid-template-column sizing. Im finally feeling very comfortable with flex-box and diving into grid and am so lost no matter how much i read/watch/consume about it.
Link to Yellow BG code https://codepen.io/Miss-Fox/pen/eYbajrY?editors=1100 Link to White BG code https://codepen.io/Miss-Fox/pen/qBLGyoq

Miss Fox

CodePen

icodethis Simple Cards

...

Miss Fox

CodePen

Grid Sandbox

...