css - как изменить сетку без использования медиа-запроса - PullRequest
Новая
       43

css - как изменить сетку без использования медиа-запроса

0 голосов
/ 25 февраля 2020

Я создаю заголовок для сайта, который имеет несколько отдельных элементов. Я использую сетку css и хочу избежать использования медиа-запроса для изменения макета, когда содержимое не подходит. Возникли проблемы с настройкой сетки.

Моя html структура выглядит следующим образом: 

<header class="container">
  <div id="brand">...</div>
  <div id="hamburger-menu>...</div>
  <nav id="nav1">...</nav>
  <nav id="nav2">...</nav>
</header>

Ниже приведен мой текущий css код: 

#brand { grid-area: brand; }
#hamburger-icon { grid-area: hamburgerIcon; }
#nav1 { grid-area: nav1; }
#nav2 { grid-area: siteNav; }

.container {
   display: grid;
   grid-template-columns: 450px auto ;
   grid-template-rows: auto;
   grid-row-gap: 16px;
   grid-template-areas:
     "brand nav1"
     "brand nav2";
}

выше CSS дает мне макет, который выглядит следующим образом: 

| brand | nav1 |
|       | ---- |
|       | nav2 |

Это нормально на большом экране. В моем случае nav2 ожидается намного дольше. Итак, на экранах меньшего размера (не на мобильном устройстве / планшете) текущая раскладка перетекла на правую сторону.

Я бы хотел, чтобы nav1 и nav2 просто текли "под" брендом, но только когда это необходимо. Например, переместите nav2 во вторую строку, когда она больше не помещается. 

| brand | nav1 |
| ----- | ---- |
|     nav2     |

Я знаю, что, возможно, могу задать медиазапрос и на основе размера экрана изменить grid-template-areas, но я ' Интересно, это единственный способ?

Эта статья действительно хороша, так как показывает, что медиа-запрос не нужен, но у меня возникают проблемы с его применением в моем случае.

https://css-tricks.com/look-ma-no-media-queries-responsive-layouts-using-css-grid/

Есть предложения?

...