Розкриваємо міць CSS Grid: Глибоке занурення у внутрішні розміри та макети на основі вмісту

У величезному та мінливому світі веб-розробки створення надійних і водночас гнучких макетів залишається першочерговим завданням. CSS Grid Layout став трансформаційним рішенням, що пропонує безпрецедентний контроль над двовимірними структурами сторінок. Хоча багато розробників знайомі з явним визначенням розмірів треків сітки за допомогою фіксованих одиниць (як-от пікселі або em) або гнучких одиниць (як-от fr), справжня сила CSS Grid часто криється в його можливостях внутрішнього визначення розмірів. Цей підхід, де розмір треків сітки визначається їхнім вмістом, дозволяє створювати надзвичайно плавні та адаптивні до вмісту дизайни. Ласкаво просимо у світ макетів на основі вмісту з ключовими словами CSS Grid для внутрішніх розмірів: min-content, max-content та fit-content().

Розуміння внутрішніх розмірів: Основна концепція

Традиційні методи верстки часто змушують вміщувати контент у заздалегідь визначені блоки. Це може призводити до таких проблем, як переповнення тексту, надмірний білий простір або потреба у громіздких медіазапитах для адаптації до змін вмісту. Внутрішні розміри перевертають цю парадигму. Замість того, щоб диктувати жорсткий розмір, ви наказуєте сітці виміряти свій вміст і відповідно задати розміри треків. Це забезпечує елегантне рішення для створення компонентів, які є по своїй суті адаптивними та витончено пристосовуються до різної кількості контенту.

Термін "внутрішній" (intrinsic) стосується власного розміру елемента, що базується на його вмісті, на відміну від "зовнішнього" (extrinsic) розміру, який нав'язується зовнішніми факторами, такими як розміри батьківського елемента або фіксовані значення. Коли ми говоримо про внутрішні розміри в CSS Grid, ми переважно маємо на увазі три потужні ключові слова:

• min-content: Найменший можливий розмір, який може зайняти елемент, щоб його вміст не виходив за межі.
• max-content: Ідеальний, бажаний розмір, який елемент зайняв би, якби йому дозволили розширюватися нескінченно, без примусових переносів рядків.
• fit-content(): Динамічна функція, яка поводиться як max-content, але ніколи не зростає більше зазначеного максимального розміру і завжди стискається щонайменше до свого розміру min-content.

Розгляньмо кожне з них детально, щоб зрозуміти їхню поведінку та відкрити для себе практичне застосування у створенні складних, керованих вмістом веб-макетів.

1. min-content: Компактна потужність

Що таке min-content?

Ключове слово min-content представляє найменший можливий розмір, до якого може стиснутися елемент сітки без переповнення його вмісту. Для текстового вмісту це зазвичай означає ширину найдовшого нерозривного рядка (наприклад, довгого слова або URL) або мінімальну ширину елемента (наприклад, зображення). Якщо вміст може переноситися, min-content обчислить розмір на основі того, де відбулися б переноси, щоб зробити елемент якомога вужчим.

Як min-content працює з текстом

Розгляньмо абзац тексту. Якщо ви застосуєте min-content до треку сітки, що містить цей абзац, трек стане достатньо широким, щоб вмістити найдовше слово або послідовність символів, яку неможливо розірвати. Всі інші слова перенесуться, створюючи дуже високий і вузький стовпець. Для зображення це зазвичай буде його власна ширина.

Приклад 1: Базовий текстовий стовпець із min-content

.container {
    display: grid;
    grid-template-columns: min-content 1fr;
    gap: 10px;
}

.sidebar {
    background-color: #e0f2f7; /* Світло-блакитний */
    padding: 15px;
    border-radius: 8px;
}

.main-content {
    background-color: #fff3e0; /* Світло-оранжевий */
    padding: 15px;
    border-radius: 8px;
}

<div class="container">
    <div class="sidebar">
        <h3>Навігація</h3>
        <ul>
            <li><a href="#">Головна</a></li>
            <li><a href="#">Про нас</a></li>
            <li><a href="#">Послуги та рішення</a></li>
            <li><a href="#">Контактна інформація</a></li>
        </ul>
    </div>
    <div class="main-content">
        <h2>Ласкаво просимо на нашу глобальну платформу</h2>
        <p>Ця платформа надає комплексні ресурси для професіоналів у всьому світі. Ми віримо у сприяння співпраці та інноваціям серед різноманітних культурних середовищ.</p>
        <p>Досліджуйте нашу велику документацію та статті підтримки для отримання оптимального досвіду. Наша місія — розширювати можливості окремих осіб та організацій у всьому світі.</p>
    </div>
</div>

У цьому прикладі перший стовпець, що містить навігацію, стиснеться до ширини найдовшого нерозривного текстового рядка в його елементах списку (наприклад, "Контактна інформація"). Це гарантує, що навігація буде максимально компактною, не викликаючи переповнення, і дозволить основному вмісту зайняти решту доступного простору (1fr).

Випадки використання min-content

• Фіксовані бічні панелі/навігації: Ідеально підходить для бічних панелей або меню навігації, де ви хочете, щоб ширина була достатньою лише для вміщення найдовшого елемента меню без перенесення, залишаючи максимальний простір для основного вмісту.
• Підписи до полів форми: При створенні форм ви можете встановити для стовпця з підписами значення min-content, щоб гарантувати, що підписи займають лише необхідний простір, акуратно вирівнюючи поля введення.
• Таблицеподібні структури: Для простих таблиць даних використання min-content для стовпців, що містять короткі ідентифікатори (наприклад, ID або коди), може створювати компактні макети.
• Стовпці з іконками: Якщо у вас є стовпець, призначений для іконок, min-content встановить його розмір відповідно до ширини найширшої іконки, зберігаючи його ефективність.

Що слід враховувати при використанні min-content

Хоча min-content є потужним інструментом, він іноді може призводити до дуже високих і вузьких стовпців, якщо вміст сильно переноситься, особливо з довгими нерозривними рядками. Завжди перевіряйте, як ваш вміст поводиться на різних в'юпортах при використанні цього ключового слова, щоб забезпечити читабельність та естетичну привабливість.

2. max-content: Широке бачення

Що таке max-content?

Ключове слово max-content визначає ідеальний розмір, який елемент сітки зайняв би, якби йому дозволили розширюватися нескінченно без будь-яких примусових переносів рядків. Для тексту це означає, що весь рядок тексту з'явиться в одному рядку, незалежно від його довжини, запобігаючи будь-яким переносам. Для таких елементів, як зображення, це буде їхня власна ширина.

Як max-content працює з текстом

Якщо трек сітки встановлено на max-content і він містить речення, це речення намагатиметься відобразитися в одному рядку, що потенційно може викликати горизонтальні смуги прокрутки, якщо контейнер сітки недостатньо широкий. Це протилежна поведінка до min-content, який агресивно переносить вміст.

Приклад 2: Панель заголовка з max-content для назви

.header-grid {
    display: grid;
    grid-template-columns: max-content 1fr max-content;
    align-items: center;
    gap: 20px;
    background-color: #e8f5e9; /* Світло-зелений */
    padding: 15px 25px;
    border-radius: 8px;
}

.logo {
    font-size: 1.8em;
    font-weight: bold;
    color: #2e7d32; /* Темно-зелений */
}

.page-title {
    font-size: 1.5em;
    text-align: center;
    white-space: nowrap; /* Гарантує, що заголовок залишається в одному рядку */
    overflow: hidden; /* Приховує переповнення, якщо місця замало */
    text-overflow: ellipsis; /* Додає три крапки для прихованого переповнення */
    color: #388e3c;
}

.user-info {
    text-align: right;
    font-style: italic;
    color: #43a047;
}

<div class="header-grid">
    <div class="logo">GlobalCo.</div>
    <div class="page-title">Комплексна міжнародна бізнес-панель</div>
    <div class="user-info">Вітаємо, пане Сингх</div>
</div>

У цьому сценарії стовпець `page-title` встановлено на 1fr, але стовпці `logo` та `user-info` мають значення max-content. Це означає, що логотип та інформація про користувача займуть рівно стільки місця, скільки їм потрібно, без перенесення, а заголовок заповнить решту простору. Ми додали `white-space: nowrap;` та `text-overflow: ellipsis;` до самого `.page-title`, щоб продемонструвати керування вмістом, коли `max-content` не застосовується безпосередньо, але ви хочете, щоб елемент залишався в одному рядку, або якщо стовпець `1fr` стає занадто малим для заголовка.

Виправлення та уточнення: У наведеному вище прикладі div з класом `page-title` знаходиться у стовпці `1fr`, а не у стовпці `max-content`. Якби ми встановили середній стовпець на `max-content`, заголовок "Комплексна міжнародна бізнес-панель" змусив би середній стовпець стати надзвичайно широким, потенційно викликаючи переповнення для всього `header-grid`. Це підкреслює, що хоча `max-content` запобігає перенесенню, він також може призвести до горизонтальної прокрутки, якщо не керувати ним обережно в загальному макеті. Метою прикладу було показати, як max-content на бічних елементах дозволяє середньому динамічно займати решту простору.

Випадки використання max-content

• Елементи заголовка фіксованої ширини: Для логотипів, коротких заголовків або імен користувачів у заголовку, які ви хочете запобігти перенесенню.
• Підписи без перенесення: У конкретних випадках, коли підпис абсолютно повинен залишатися в одному рядку, навіть якщо це означає переповнення його контейнера або розширення сітки.
• Макети, що вимагають певної ширини елементів: Коли вам потрібно, щоб певний елемент сітки відображав свій повний вміст без усічення або перенесення, незалежно від доступного простору.

Що слід враховувати при використанні max-content

Використання max-content може призвести до появи горизонтальних смуг прокрутки, якщо вміст дуже довгий, а в'юпорт вузький. Важливо пам'ятати про його потенціал руйнувати адаптивні макети, особливо на менших екранах. Його найкраще використовувати для вмісту, який гарантовано буде коротким, або де явно бажана поведінка з переповненням без перенесення.

3. fit-content(): Розумний гібрид

Що таке fit-content()?

Функція fit-content(), мабуть, є найгнучкішим та найцікавішим з ключових слів для внутрішнього визначення розмірів. Вона забезпечує динамічний механізм визначення розміру, який поєднує переваги як min-content, так і max-content, водночас дозволяючи вказати максимальний бажаний розмір.

Його поведінку можна описати формулою: min(max-content, max(min-content, <flex-basis>)).

Розберемо це детальніше:

• Розмір треку буде не меншим за його min-content (щоб запобігти переповненню вмісту).
• Він намагатиметься відповідати вказаному <flex-basis> (який може бути фіксованою довжиною, відсотком або іншим значенням).
• Однак він ніколи не перевищить свій розмір max-content. Якщо <flex-basis> більший за max-content, він зменшиться до max-content.
• Якщо доступний простір менший за <flex-basis>, він буде зменшуватися, але не нижче за свій розмір min-content.

По суті, fit-content() дозволяє елементу зростати до свого розміру max-content, але обмежується вказаним значенням `<flex-basis>`. Якщо вміст невеликий, він займає лише стільки місця, скільки потрібно (як `max-content`). Якщо вміст великий, він стискається, щоб запобігти переповненню, але ніколи не стає меншим за свій розмір `min-content`. Це робить його неймовірно універсальним для адаптивних макетів.

Приклад 3: Адаптивні картки статей з fit-content()

.card-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, fit-content(400px)));
    gap: 25px;
    padding: 20px;
    background-color: #f0f4c3; /* Світлий жовто-зелений */
    border-radius: 10px;
}

.card {
    background-color: #ffffff;
    border: 1px solid #dcdcdc;
    border-radius: 8px;
    padding: 20px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    box-shadow: 0 4px 8px rgba(0,0,0,0.1);
    overflow: hidden; /* Гарантує, що вміст не виходить за межі */
}

.card h3 {
    margin-top: 0;
    color: #558b2f;
}

.card p {
    font-size: 0.95em;
    color: #424242;
}

.card .button {
    display: inline-block;
    padding: 10px 15px;
    background-color: #7cb342; /* Середньо-зелений */
    color: white;
    text-decoration: none;
    border-radius: 5px;
    text-align: center;
    margin-top: 15px;
}

<div class="card-grid">
    <div class="card">
        <h3>Глобальний економічний прогноз на 2024 рік</h3>
        <p>Поглиблений аналіз світових ринкових тенденцій, інвестиційних можливостей та викликів на наступний рік, з думками провідних економістів з різних континентів.</p>
        <a href="#" class="button">Читати далі</a>
    </div>
    <div class="card">
        <h3>Сталі інновації в технологіях</h3>
        <p>Відкрийте для себе проривні технології від Азії до Європи, які прокладають шлях до більш сталого майбутнього, зосереджуючись на відновлюваній енергетиці та екологічно чистому виробництві.</p>
        <a href="#" class="button">Читати далі</a>
    </div>
    <div class="card">
        <h3>Стратегії міжкультурної комунікації для віддалених команд</h3>
        <p>Ефективна комунікація є життєво важливою. Дізнайтеся, як подолати культурні розриви та покращити співпрацю в розподілених командах, що охоплюють кілька часових поясів та різноманітні мовні середовища.</p>
        <a href="#" class="button">Читати далі</a>
    </div>
    <div class="card">
        <h3>Майбутнє цифрових валют</h3>
        <p>Дослідіть мінливий ландшафт цифрових валют, їхній вплив на традиційні фінанси та регуляторні перспективи з боку різних економічних блоків у всьому світі.</p>
        <a href="#" class="button">Читати далі</a>
    </div>
</div>

Тут використовується grid-template-columns: repeat(auto-fit, minmax(250px, fit-content(400px))). Це дуже потужна комбінація:

• auto-fit: Створює стільки стовпців, скільки може поміститися без переповнення.
• minmax(250px, fit-content(400px)): Кожен стовпець буде щонайменше 250px завширшки. Його максимальний розмір визначається fit-content(400px). Це означає, що стовпець намагатиметься розширитися до свого розміру max-content, але не перевищить 400px. Якщо вміст дуже довгий, стовпець все одно не перевищить 400px, і вміст перенесеться. Якщо вміст короткий, він займе лише необхідний простір (до свого розміру max-content), але ніколи не буде меншим за 250px.

Це створює надзвичайно гнучку сітку карток, яка чудово адаптується до різних розмірів екрана та довжини вмісту, що робить її ідеальною для блогів, списків продуктів або новинних стрічок, орієнтованих на глобальну аудиторію з різною довжиною контенту.

Випадки використання fit-content()

• Адаптивні макети карток: Як було продемонстровано, це чудово підходить для створення плавних компонентів карток, які регулюють свою ширину залежно від вмісту та доступного простору в розумних межах.
• Гнучкі бічні панелі: Бічна панель, яка повинна адаптуватися до свого вмісту, але також мати максимальну ширину, щоб не займати занадто багато місця на екрані.
• Форми, керовані вмістом: Елементи форм, які інтелектуально змінюють свій розмір залежно від вмісту, який вони містять, але також дотримуються обмежень системи дизайну.
• Галереї зображень: Зображення, які зберігають своє співвідношення сторін, але розумно змінюють розмір у межах сітки, обмежуючись максимальним розміром.

Що слід враховувати при використанні fit-content()

fit-content() пропонує неймовірну гнучкість, але його динамічна природа іноді може ускладнити налагодження, якщо ви не повністю знайомі з його обчисленням min/max/flex-basis. Переконайтеся, що ваше значення `<flex-basis>` добре підібране, щоб уникнути несподіваних переносів або порожніх місць. Часто його найкраще використовувати з функцією `minmax()` для надійної поведінки.

Внутрішні розміри проти явних та гнучких розмірів

Щоб по-справжньому оцінити внутрішні розміри, корисно порівняти їх з іншими поширеними методами визначення розмірів у CSS Grid:

• Явні розміри (наприклад, 100px, 20em, 50%): Ці значення визначають фіксований або відсотковий розмір для треків. Вони пропонують точний контроль, але можуть бути жорсткими, що призводить до переповнення або невикористаного простору, якщо вміст значно змінюється.

  grid-template-columns: 200px 1fr 20%;

• Гнучкі розміри (одиниці fr): Одиниця fr розподіляє доступний простір пропорційно між треками сітки. Це дуже адаптивно і чудово підходить для "рідких" макетів, але не враховує розмір вмісту безпосередньо. Стовпець `1fr` може бути дуже широким, навіть якщо його вміст крихітний.

  grid-template-columns: 1fr 2fr 1fr;

• Внутрішні розміри (min-content, max-content, fit-content()): Ці ключові слова унікальні, оскільки вони отримують свій розмір безпосередньо з розмірів свого вмісту. Це робить макети надзвичайно адаптивними та чутливими до вмісту, мінімізуючи потребу в ручних налаштуваннях або складних медіазапитах для різної довжини контенту.

  grid-template-columns: min-content 1fr max-content;

Сила CSS Grid часто полягає в поєднанні цих методів. Наприклад, `minmax()` часто використовується з внутрішніми розмірами для встановлення гнучкого діапазону, наприклад, `minmax(min-content, 1fr)`, що дозволяє стовпцю бути щонайменше розміром свого мінімального вмісту, але розширюватися для заповнення доступного простору, якщо його більше.

Просунуті застосування та комбінації

Динамічні макети форм

Уявіть собі форму, де підписи можуть бути короткими (наприклад, "Ім'я") або довгими (наприклад, "Бажаний спосіб зв'язку"). Використання min-content для стовпця з підписами гарантує, що він завжди займатиме лише необхідний простір, запобігаючи незграбно широким стовпцям підписів або переповненню, тоді як поля введення можуть займати решту простору.

.form-grid {
    display: grid;
    grid-template-columns: min-content 1fr;
    gap: 15px 20px;
    max-width: 600px;
    margin: 30px auto;
    padding: 25px;
    border: 1px solid #ddd;
    border-radius: 8px;
    background-color: #fcfcfc;
}

.form-label {
    text-align: right;
    padding-right: 10px;
    font-weight: bold;
    color: #333;
    align-self: center;
}

.form-input {
    width: 100%;
    padding: 10px;
    border: 1px solid #ccc;
    border-radius: 4px;
}

<div class="form-grid">
    <label for="name" class="form-label">Ваше ім'я:</label>
    <input type="text" id="name" class="form-input">

    <label for="email" class="form-label">Адреса електронної пошти:</label>
    <input type="email" id="email" class="form-input">

    <label for="pref-comm" class="form-label">Бажаний спосіб зв'язку:</label>
    <select id="pref-comm" class="form-input">
        <option>Електронна пошта</option>
        <option>Телефон</option>
        <option>SMS/Текстове повідомлення</option>
    </select>

    <label for="message" class="form-label">Ваше повідомлення (необов'язково):</label>
    <textarea id="message" class="form-input" rows="4"></textarea>
</div>

Поєднання fit-content() з auto-fit/auto-fill

Ця комбінація є неймовірно потужною для створення адаптивних галерей зображень, списків продуктів або сіток дописів у блозі, де елементи повинні природно розташовуватися та регулювати свій розмір:

.gallery {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(200px, fit-content(300px)));
    gap: 15px;
    padding: 20px;
    background-color: #e3f2fd; /* Світло-блакитний */
    border-radius: 10px;
}

.gallery-item {
    background-color: #ffffff;
    border: 1px solid #c5e1a5; /* Світло-зелена рамка */
    border-radius: 8px;
    padding: 10px;
    text-align: center;
    box-shadow: 0 2px 4px rgba(0,0,0,0.05);
}

.gallery-item img {
    max-width: 100%;
    height: auto;
    border-radius: 4px;
    margin-bottom: 10px;
}

.gallery-item p {
    font-size: 0.9em;
    color: #546e7a;
    margin: 0;
}

<div class="gallery">
    <div class="gallery-item">
        <img src="https://via.placeholder.com/280x180/ADD8E6/000000?text=Cityscape" alt="Міський пейзаж">
        <p>Міські горизонти</p>
    </div>
    <div class="gallery-item">
        <img src="https://via.placeholder.com/220x150/F08080/FFFFFF?text=Mountains" alt="Гори">
        <p>Альпійські вершини</p>
    </div>
    <div class="gallery-item">
        <img src="https://via.placeholder.com/300x200/90EE90/000000?text=Forest" alt="Ліс">
        <p>Зачарований ліс</p>
    </div>
    <div class="gallery-item">
        <img src="https://via.placeholder.com/250x170/FFA07A/000000?text=Ocean" alt="Океан">
        <p>Прибережний спокій</p>
    </div>
    <div class="gallery-item">
        <img src="https://via.placeholder.com/270x190/87CEFA/000000?text=Desert" alt="Пустеля">
        <p>Пустельні дюни</p>
    </div>
</div>

Тут `auto-fill` (або `auto-fit`) створює стільки стовпців, скільки можливо. Ширина кожного стовпця контролюється `minmax(200px, fit-content(300px))`, гарантуючи, що елементи мають ширину щонайменше 200px і розширюються до свого внутрішнього розміру вмісту, але ніколи не перевищують 300px. Ця конфігурація динамічно регулює кількість стовпців та їхню ширину залежно від доступного простору, забезпечуючи високоадаптивний макет для будь-якого в'юпорта.

Вкладені сітки та внутрішні розміри

Внутрішні розміри однаково ефективні у вкладених сітках. Наприклад, основна сітка може визначати бічну панель за допомогою min-content, а всередині цієї бічної панелі вкладена сітка може використовувати `fit-content()` для динамічного розташування своїх власних внутрішніх елементів. Ця модульність є ключовою для створення складних, масштабованих користувацьких інтерфейсів.

Найкращі практики та рекомендації

Коли обирати внутрішні розміри

• Коли довжина вмісту є змінною та непередбачуваною (наприклад, контент, створений користувачами, інтернаціоналізовані рядки).
• Коли ви хочете, щоб елементи природно регулювали свій розмір на основі свого вмісту, а не фіксованих розмірів.
• Для створення надзвичайно гнучких та адаптивних компонентів, які пристосовуються без численних медіазапитів.
• Щоб забезпечити мінімальний білий простір або запобігти непотрібному перенесенню вмісту в конкретних сценаріях.

Потенційні підводні камені та як їх уникнути

• Горизонтальне переповнення: Використання `max-content` без ретельного обмірковування, особливо для довгих текстових рядків, може призвести до появи горизонтальних смуг прокрутки на менших екранах. Поєднуйте його з `overflow: hidden; text-overflow: ellipsis;` або використовуйте `fit-content()` з розумним максимумом, щоб запобігти цьому.
• Стиснутий вміст: Хоча `min-content` запобігає переповненню, він може призвести до дуже високих і вузьких стовпців, якщо нерозривний вміст все ще короткий. Переконайтеся, що загальний макет може вмістити такі розміри без шкоди для читабельності.
• Продуктивність: Хоча сучасні браузери високо оптимізовані, надзвичайно складні сітки з багатьма внутрішніми обчисленнями можуть мати незначний вплив на початкове відтворення макета. Для переважної більшості випадків це несуттєво.
• Сумісність з браузерами: Сам CSS Grid має відмінну підтримку у всіх сучасних браузерах. Ключові слова для внутрішніх розмірів добре підтримуються. Завжди перевіряйте ресурси, такі як Can I Use, для конкретних версій, якщо ви орієнтуєтеся на дуже старі браузери, хоча це рідко є проблемою для сучасної веб-розробки.

Налагодження проблем з внутрішніми розмірами

Інструменти розробника в браузері — ваш найкращий друг. Під час інспектування контейнера сітки:

• Увімкніть накладення сітки (Grid overlay), щоб візуалізувати лінії сітки та розміри треків.
• Наводьте курсор на елементи сітки, щоб побачити їхні обчислені розміри.
• Експериментуйте зі зміною значень `grid-template-columns` та `grid-template-rows` у реальному часі, щоб спостерігати за впливом `min-content`, `max-content` та `fit-content()`.

Висновок: Використання підходу "Content-First" з CSS Grid

Можливості внутрішнього визначення розмірів у CSS Grid перетворюють дизайн макетів з жорсткої, піксельно-точної вправи на динамічну, керовану вмістом оркестровку. Опанувавши min-content, max-content та fit-content(), ви отримуєте можливість створювати макети, які не просто реагують на розмір екрана, а й інтелектуально адаптуються до змінних розмірів їхнього фактичного вмісту. Це дозволяє розробникам створювати більш надійні, гнучкі та легкі в обслуговуванні користувацькі інтерфейси, які чудово відповідають різноманітним вимогам до вмісту та глобальним аудиторіям.

Перехід до макетів на основі вмісту є фундаментальним аспектом сучасного веб-дизайну, що сприяє більш стійкому та перспективному підходу. Включення цих потужних функцій CSS Grid у ваш робочий процес, безсумнівно, підвищить ваші навички фронтенд-розробки та дозволить створювати справді виняткові цифрові враження.

Експериментуйте з цими концепціями, інтегруйте їх у свої проєкти та спостерігайте, як ваші макети стають більш плавними, інтуїтивними та легко адаптивними. Внутрішня сила CSS Grid чекає, щоб її розкрили у вашому наступному дизайні!