<style>

</style>
<div class="wrap"><header>Логотип</header><main class="menu"><article>Ручка</article><article>Пенал</article><article>Ластик</article></main></div>

<style>
.wrap { max-width: 1100px; margin-inline: auto; }
</style>
<div class="wrap"><main class="menu"><article>Ручка</article><article>Пенал</article><article>Ластик</article></main></div>

<style>
.menu { display: grid; gap: 16px; }
@media (min-width: 768px) {
  .menu { grid-template-columns: repeat(3, 1fr); }
}
</style>
<main class="menu"><article>Ручка</article></main>