Як працюють контейнерні запити? 🎁

В старі добрі часи ми мали лише один спосіб реагувати на різні розміри наших елементів; media-queries.

І це було цілком нормально, однак запити контейнерів (container queries) дають нам більшу гнучкість; ми можемо орієнтуватися на розмір нашого батьківського контейнера, а не лише на розмір вікна перегляду.

Давайте почнемо з головного контейнера з класом ‘container’, який буде нашим контейнером запиту, а його діти будуть реагувати на його розмір.

Resize me! 🎁
 ```  У нашому контейнері нам потрібно додати дві властивості: [container-type](https://developer.mozilla.org/en-US/docs/Web/CSS/container-type) та [container-name](https://developer.mozilla.org/en-US/docs/Web/CSS/container-name) (необов'язково).  ``` .container {    container-type: inline-size;    container-name: giftBox;   } ```  Є й інші властивості для стилізації, але єдине важливе — це початкова ширина, встановлена на 700px.  ``` .container {    container-type: inline-size;    container-name: giftBox;    display: flex;    justify-content: center;    align-items: center;    resize: both;    overflow: auto;    border: 5px solid black;    width: 700px;   } ```  Ми встановлюємо стандартний розмір шрифта для нашого тегу h2.  ``` .box h2 {    font-size: 1em;   } ```  І розмір, який буде використовуватися, коли його батьківський контейнер буде мати щонайменше 700px у ширину.  ``` @container giftBox (min-width: 700px) {    .box h2 {    font-size: 3em;    }   } ```  Наш h2 всередині контейнера запиту має початковий розмір шрифта 3 em.  ![pic](https://drive.javascript.org.ua/33b4933f411_QYlL7QtNvQay_W4RKE5bXA_png)



Перекладено з: [How container queries work ? 🎁](https://medium.com/@LoginALee/how-container-queries-work-438cade44179)