Как сверстать шапку наиболее грамотно в данном примере?

Question

[Muranx]

Здравствуйте!



стили , которые важно знать примерно следующие

.content{ max-width: 1440px; }
.section-content{ max-width: 1140px; }

Подскажите пожалуйста как грамотно сверстать .header т.к. не понятно как позиционировать исключительно по центру логотип (.logo). Очень не хотелось бы использовать position: absolute. Но ничего другого придумать не могу пока. И где должен располагаться .burger-menu-desctop триггером на его открытие разумеется будет кнопочка .burger но вот сам .burger-menu-desctop занимает 100% ширины контента, т.е. есть предположение что саму менюшку .burger-menu-desctop нужно располагать в блоке .content

Comments

[alexalexes]

В песочнице codepen сверстайте свой вариант, тогда другим будет проще вам что-то посоветовать.

Answer 1

[Сергей delphinpro]

.header {
  display:grid;
  grid-template-columns: 1fr min-content 1fr;
}

<header>
  <left/>
  <logo/>
  <right/>
</header>

Comments

[Muranx]

Сергей delphinpro, а не гридом это можно сделать? Просто грид это все же вопрос поддержки до сих пор для многих браузеров

[Сергей delphinpro]

Muranx, откуда дровишки?

https://caniuse.com/css-grid абсолютно все браузеры поддерживают гриды

[Сергей delphinpro]

Muranx, на флексах можно так же. только для логотипа фиксированный размер, а для боковушек ширину через calc(50% - var(--logo-width) / 2)