Grid works differently in a cell

Hi. Any reason why CSS grid works differently, for instance this,

vs this

with the same html. The jsbin being the way I understand grid css to work. Thanks!

nvm. Chrome considers this a valid value when the DIV is directly under a body tag, looks to be flagging it invalid value, when in a nested div. Changing my css to use, grid-template-columns etc… works ok.