Как сделать адаптивный адаптивный гибкий заголовок с помощью CSS Grid и / или / без Flexbox?

Question

Хорошо, у моего модуля заголовка есть логотип, компонент телефона и компонент корзины. Вот этот заголовок:

И вот что я пытаюсь сделать:

1. Адаптивный адаптивный заголовок, поэтому он хорошо смотрится при ширине области просмотра 400-1920 пикселей.
2. Чтобы можно было переупорядочить все компоненты заголовка в любом порядке.
3. Когда ширина области просмотра превышает 640 пикселей, я хочу, чтобы логотип был слева, а модули телефона и корзины - справа, как на рисунке выше.
4. Когда ширина области просмотра составляет 480-640 пикселей, я хочу, чтобы компоненты телефона и корзины находились во втором ряду, и я хочу, чтобы расстояния от их краев до внешних границ были одинаковыми, например:

4. Когда ширина области просмотра меньше 480px по умолчанию, я хочу, чтобы логотип был в первом ряду, телефон во втором ряду и корзина в третьем ряду, вот так:

5. Но я хочу иметь возможность поменять логотип и компонент телефона без редактирования HTML, чтобы он выглядел так:

Я не могу сделать это, чтобы он соответствовал всем требованиям. Вот лучшее, что я придумал до сих пор: https://next.plnkr.co/edit/9nHCyGk2KC8ZO9JA?preview

Я могу поменять телефон и корзину, но не телефон и логотип, а не корзину и логотип. Если я удаляю элемент <div class="pg-Header_phoneBasketContainer"> из html и применяю grid-area: phone и grid-area: basket непосредственно к телефону и корзине соответственно, то я не могу сделать одинаковые расстояния от краев телефона и корзины до внешних границ одинаковыми, потому что будет 2 ячеек во втором ряду, и элементы сетки будут расположены относительно их ячеек, и эти элементы имеют разную длину, поэтому расстояние до границ будет другим.

Если бы я мог использовать позиционирование сетки на косвенных дочерних элементах контейнера сетки, то это было бы легко сделать с областями сетки. Я бы просто определил соответствующие grid-template-areas для контейнера и соответствующие grid-area свойства для .pg-Header_phoneBasketContainer, .pg-Header_phone и .hdr-Basket в разных окнах просмотра:

.hdr-Top {
display: grid;
grid-template-areas: "logo phoneBasket";

}
.pg-Header_logo {
    grid-area: logo;
}
.pg-Header_phoneBasketContainer {
    grid-area: phoneBasket;
}

@media only screen and(max-width: 480px) {
    .hdr-Top {
        display: grid;
        grid-template-areas: "phone" "logo" "basket";
    }
    .pg-Header_phone {
        grid-area: phone;
    }
    .hdr-Basket {
        grid-area: basket;
    }
}

Это приведет к этому на больших экранах:

И это по меньшему:

К сожалению, CSS Grid не допускает позиционирования сетки косвенных дочерних элементов . Есть идеи, как мне достичь того, чего я пытаюсь достичь?

Answer 1

Вы не можете разделить phoneBasket и поставить logo в середине для маленьких экранов - но вы можете достичь того, чего хотите, имея 1 контейнер с 3 дочерними элементами.

При этом вы можете изменить порядок элементов сетки, используя свойство grid-template-areas:

.header {
  padding: .25rem;
  border-bottom: 1px solid #333;
  display: grid;
  grid-template-columns: 1fr auto auto;
  grid-template-areas: "logo phone basket";
  align-items: center;
  grid-gap: .5rem;
}

.header-item {
  padding: .5rem;
  background-color: #ccc;
}

.logo {
  font-weight: 700;
  text-transform: uppercase;
  grid-area: logo;
}

.phone {
  grid-area: phone;
}

.basket {
  border: 2px solid #999;
  grid-area: basket;
}

@media (max-width: 640px) {
  .header {
    grid-template-areas: "logo logo" "phone basket";
    grid-template-columns: auto;
    justify-content: center;
    text-align: center;
  }
}

@media (max-width: 480px) {
  .header {
    grid-template-areas: "phone" "logo" "basket";
  }
}

<div class="header">
  <div class="header-item logo">MyCompany</div>
  <div class="header-item phone">555-3535</div>
  <div class="header-item basket">3 items</div>
</div>