Например вот так https://codepen.io/matvey-phoen1x/pen/jKXbpy

p.s. вызвать это при загрузке не получится, современные браузеры не позволяют автоматический полный экран по соображениям безопасности.

Никак :)

А js можно использовать? Есть такая штука - https://github.com/hgoebl/mobile-detect.js
Подключаешь:

<script src="https://cdnjs.cloudflare.com/ajax/libs/mobile-detect/1.4.1/mobile-detect.min.js"></script>

Пишешь скрипт, который будет навешивать css или убирать, если обнаружен мобильник.
Выстави в инструментах разработчика мобильную версию > какой-нибудь телефон, например iphone 6 и перезагрузи страницу. Блок пропадет, независимо от ориентации экрана.
Вот код: https://codepen.io/matvey-phoen1x/pen/eKQPag

Например так:

.header-nav a {
   margin: 0 10px;
}

Насколько мне известно - никак, и Mozilla такого же мнения, ни слова о сокращении.

Если не подходит в 12-колоночной сетке grid-template-areas - используй вместо него grid-column: 1 / 13;