header.html

<header class="header">
  <div class="header__logo-wrapper">[..]</div>
  <div class="header__search">[..]</div>
  <div class="header__links">[..]</div>
  <div class="header__cart">[..]</div>
  <div class="header__categories-wrapper">[..]</div>
</header>

header.scss

.header {
  display: grid; // isto facilitará a construção
  grid-gap: 15px; // definindo um espaço entre os elementos
  grid-template-areas: 'logo search links cart' 'logo categories categories categories'; // criando um mapa da coisa
  grid-template-columns: auto 1fr auto auto; // fazendo com os elementos tenham a largura necessária para suportar o conteúdo, e a barra de pesquisa ocupe o que sobrar

  // mapeando cada parte à sua respectiva área
  &__logo-wrapper {grid-area: logo}
  &__search {grid-area: search}
  &__links {grid-area: links}
  &__cart {grid-area: cart}
  &__categories-wrapper {grid-area: categories}
}