Помогите разобраться в grid-template-areas

Есть такой css

display: grid;
grid-template-areas: "logo site-nav user-nav";
grid-template-columns: repeat(3, auto);
align-items: center;
justify-content: space-between;
gap: 65px;

как сделать что бы на адаптивке(телефоне) сетка перестроилась. Т.е. site-nav встал на следующую строку. Пробовал вот так, но не валидно.

grid-template-areas:
"logo user-nav"
"site-nav";