Многие верстальщики используют Flex на автомате просто потому, что привыкли к нему за долгие годы. Grid часто кажется чем-то избыточным или пугающим из-за своего специфического синтаксиса. На деле эти инструменты не заменяют друг друга, а решают принципиально разные задачи.
Разница между ними кроется в самом подходе к пространству. Flex создавался для работы в одном измерении, когда вам нужно выстроить элементы в строку или столбец. Grid же мыслит сразу в двух плоскостях, позволяя контролировать и ряды, и колонки одновременно.
В этой статье мы разберем конкретные ситуации, где один инструмент явно выигрывает у другого, чтобы вы перестали гадать и начали выбирать технологию осознанно. Для наглядности в наших примерах блоки Grid будут красными, а Flex — синие.
Под каждым примером есть полный код, который достаточно скопировать в файл и запустить.
❯ Пример 1: Три карточки в ряд
Это самая базовая задача, с которой сталкивается любой фронтенд-разработчик при верстке витрины товаров или блока с тарифами. Нам нужно, чтобы три блока стояли рядом и адекватно реагировали на разный объем текста внутри.
Проблема здесь в том, что содержимое почти никогда не бывает одинаковым по объему. Один заголовок может быть коротким, а другой растянуться на три строки, и нам важно, чтобы страница продолжала корректно отображаться.
Решение на Flex
Вот пример реализации базовых классов:
.flex-container { display: flex; /*...*/ } .card { /*...*/ }
Полный код
Полный код примера
<!DOCTYPE html> <html lang="ru"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Flexbox: Uneven Widths</title> <link href="<https://fonts.googleapis.com/css2?family=Montserrat:wght@500;600;800&display=swap>" rel="stylesheet"> <style> body { margin: 0; font-family: 'Montserrat', sans-serif; background-color: #eef2ff; display: flex; justify-content: center; align-items: center; min-height: 100vh; color: #334155; } .flex-container { display: flex; gap: 20px; width: 90%; max-width: 1000px; padding: 50px; background: #ffffff; border-radius: 30px; box-shadow: 0 20px 50px -10px rgba(59, 130, 246, 0.15); } .card { background: #ffffff; border: 3px solid #60a5fa; border-radius: 20px; padding: 28px; box-shadow: 0 10px 25px -5px rgba(59, 130, 246, 0.1); } .card h3 { margin: 0 0 12px 0; font-size: 20px; font-weight: 800; color: #1e40af; letter-spacing: -0.5px; } .card p { margin: 0; line-height: 1.6; font-size: 15px; font-weight: 500; color: #64748b; } </style> </head> <body> <div class="flex-container"> <div class="card"> <h3>Lite</h3> <p>Минимум функций.</p> </div> <div class="card"> <h3>Standard</h3> <p>Оптимальный набор для работы. Включает аналитику и отчеты.</p> </div> <div class="card"> <h3>Premium Pro</h3> <p>Полный доступ ко всем инструментам и приоритетная поддержка 24/7.</p> </div> </div> </body> </html>
Если открыть этот код в браузере, вы увидите проблему: карточки разной ширины. Там, где текста больше, карточка шире. Это происходит потому, что Flex по умолчанию подстраивает ширину под содержимое.
Чтобы исправить это, нужно добавить карточкам свойство flex: 1. Это заставит их делить доступное пространство поровну.
Итоговый класс будет выглядеть так:
.card { flex: 1; /*...*/ }
Полный код
Полный код примера
<!DOCTYPE html> <html lang="ru"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Flexbox: Uneven Widths</title> <link href="<https://fonts.googleapis.com/css2?family=Montserrat:wght@500;600;800&display=swap>" rel="stylesheet"> <style> body { margin: 0; font-family: 'Montserrat', sans-serif; background-color: #eef2ff; display: flex; justify-content: center; align-items: center; min-height: 100vh; color: #334155; } .flex-container { display: flex; gap: 20px; width: 90%; max-width: 1000px; padding: 50px; background: #ffffff; border-radius: 30px; box-shadow: 0 20px 50px -10px rgba(59, 130, 246, 0.15); } .card { flex: 1; background: #ffffff; border: 3px solid #60a5fa; border-radius: 20px; padding: 28px; box-shadow: 0 10px 25px -5px rgba(59, 130, 246, 0.1); } .card h3 { margin: 0 0 12px 0; font-size: 20px; font-weight: 800; color: #1e40af; letter-spacing: -0.5px; } .card p { margin: 0; line-height: 1.6; font-size: 15px; font-weight: 500; color: #64748b; } </style> </head> <body> <div class="flex-container"> <div class="card"> <h3>Lite</h3> <p>Минимум функций.</p> </div> <div class="card"> <h3>Standard</h3> <p>Оптимальный набор для работы. Включает аналитику и отчеты.</p> </div> <div class="card"> <h3>Premium Pro</h3> <p>Полный доступ ко всем инструментам и приоритетная поддержка 24/7.</p> </div> </div> </body> </html>
Теперь карточки одинаковые по ширине. Но обратите внимание: нам пришлось менять стили самих карточек, а не только контейнера.
Важный момент: свойство flex: 1 это сокращенная запись. Она означает flex-grow: 1, flex-shrink: 1, flex-basis: 0%. Это говорит элементам, что они должны игнорировать свой размер и поровну делить доступное место.
Решение на Grid
Теперь давайте решим ту же задачу с помощью Grid:
.grid-container { display: grid; grid-template-columns: 1fr 1fr 1fr; /*...*/ } .card { /*...*/ }
Полный код
Полный код примера
<!DOCTYPE html> <html lang="ru"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Grid Example: Even Columns</title> <link href="<https://fonts.googleapis.com/css2?family=Montserrat:wght@500;600;800&display=swap>" rel="stylesheet"> <style> body { margin: 0; font-family: 'Montserrat', sans-serif; background-color: #fff1f2; display: flex; justify-content: center; align-items: center; min-height: 100vh; color: #334155; } .grid-container { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 20px; width: 90%; max-width: 1000px; padding: 50px; background: #ffffff; border-radius: 30px; box-shadow: 0 20px 50px -10px rgba(225, 29, 72, 0.15); } .card { background: #ffffff; border: 3px solid #fb7185; border-radius: 20px; padding: 28px; box-shadow: 0 10px 25px -5px rgba(225, 29, 72, 0.1); } .card h3 { margin: 0 0 12px 0; font-size: 20px; font-weight: 800; color: #9f1239; letter-spacing: -0.5px; } .card p { margin: 0; line-height: 1.6; font-size: 15px; font-weight: 500; color: #64748b; } </style> </head> <body> <div class="grid-container"> <div class="card"> <h3>Lite</h3> <p>Минимум функций.</p> </div> <div class="card"> <h3>Standard</h3> <p>Оптимальный набор для работы. Включает аналитику и отчеты.</p> </div> <div class="card"> <h3>Premium Pro</h3> <p>Полный доступ ко всем инструментам и приоритетная поддержка 24/7.</p> </div> </div> </body> </html>
В Grid карточки сразу получаются одинаковой ширины. Нам не нужно менять стили карточек — вся работа делается в контейнере.
Что здесь важно: grid-template-columns: 1fr 1fr 1fr буквально разрезает пространство на три абсолютно равные части. Карточкам даже не нужно знать, что они должны быть одинаковыми — они просто занимают отведенные им ячейки.
В чем разница подходов:
Подводя итог первому примеру, можно сказать, что Flex работает от частного к общему, заставляя нас настраивать каждый элемент в отдельности для достижения симметрии. Grid же работает от общего к частному: мы сначала строим жесткий каркас, и элементы просто подчиняются его правилам.
Если вам нужна строгая геометрия колонок, Grid справится с этим чище, так как все настройки сосредоточены в одном месте — в родительском блоке.
❯ Пример 2: Кнопка внизу карточки
Теперь рассмотрим задачу: внутри карточки есть заголовок, текст и кнопка. Текст внутри карточки, может быть разной длины. Нужно, чтобы кнопка всегда была внизу карточки.
Это типичная задача на внутреннее выравнивание, где элементы внутри одного блока должны распределяться по вертикали.
Решение на Flex
Чтобы решить это через Flex, нам нужно превратить саму карточку в еще один flex-контейнер, но уже вертикальный. Вот как это делается:
.flex-container { display: flex; /*...*/ } .card { flex: 1; display: flex; flex-direction: column; /*...*/ } .card p { flex-grow: 1; /*...*/ }
Полный код
Полный код примера
<!DOCTYPE html> <html lang="ru"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Flexbox: Sticky Footer</title> <link href="<https://fonts.googleapis.com/css2?family=Montserrat:wght@500;600;800&display=swap>" rel="stylesheet"> <style> body { margin: 0; font-family: 'Montserrat', sans-serif; background-color: #eef2ff; display: flex; justify-content: center; align-items: center; min-height: 100vh; } .flex-container { display: flex; gap: 20px; width: 90%; max-width: 1000px; padding: 50px; background: white; border-radius: 30px; box-shadow: 0 20px 50px -10px rgba(59, 130, 246, 0.15); } .card { flex: 1; display: flex; flex-direction: column; padding: 28px; background: white; border: 3px solid #60a5fa; border-radius: 20px; box-shadow: 0 10px 25px -5px rgba(59, 130, 246, 0.1); } .card p { flex-grow: 1; margin-top: 0; margin-bottom: 24px; line-height: 1.6; color: #64748b; font-size: 15px; font-weight: 500; } .card h3 { margin: 0 0 12px 0; font-size: 20px; font-weight: 800; color: #1e40af; letter-spacing: -0.5px; } .card button { padding: 16px; background: linear-gradient(135deg, #eff6ff 0%, #dbeafe 100%); color: #2563eb; border: none; border-radius: 12px; font-family: 'Montserrat', sans-serif; font-weight: 700; cursor: pointer; width: 100%; transition: 0.2s; } .card button:hover { transform: translateY(-2px); background: #dbeafe; } </style> </head> <body> <div class="flex-container"> <div class="card"> <h3>Start</h3> <p>База.</p> <button>Выбрать</button> </div> <div class="card"> <h3>Business</h3> <p>Здесь текста намного больше. Он растягивает эту карточку, но благодаря Flexbox кнопки внизу выровнены.</p> <button>Выбрать</button> </div> <div class="card"> <h3>Pro</h3> <p>Среднее описание.</p> <button>Выбрать</button> </div> </div> </body> </html>
Здесь мы делаем каждую карточку flex-контейнером с вертикальным направлением (flex-direction: column). Затем параграфу с текстом даем свойство flex-grow: 1, чтобы он занимал все свободное пространство и выталкивал кнопку вниз.
Минус этого подхода: нам нужно лезть в стили конкретного элемента (параграфа) внутри карточки. Если структура карточки изменится, придется переписывать CSS. Например, если вместо параграфа будет использован div или список, наш CSS перестанет работать.
Решение на Grid
Grid позволяет описать структуру карточки более абстрактно и надежно. Мы просто говорим, сколько строк должно быть внутри блока и какого они должны быть размера:
.grid-container { display: grid; grid-template-columns: 1fr 1fr 1fr; /*...*/ } .card { display: grid; grid-template-rows: auto 1fr auto; /*...*/ }
Полный код
Полный код примера
<!DOCTYPE html> <html lang="ru"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Grid: Sticky Footer</title> <link href="<https://fonts.googleapis.com/css2?family=Montserrat:wght@500;600;800&display=swap>" rel="stylesheet"> <style> body { margin: 0; font-family: 'Montserrat', sans-serif; background-color: #fff1f2; display: flex; justify-content: center; align-items: center; min-height: 100vh; } .grid-container { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 20px; width: 90%; max-width: 1000px; padding: 50px; background: white; border-radius: 30px; box-shadow: 0 20px 50px -10px rgba(225, 29, 72, 0.15); } .card { display: grid; grid-template-rows: auto 1fr auto; padding: 28px; background: white; border: 3px solid #fb7185; border-radius: 20px; box-shadow: 0 10px 25px -5px rgba(225, 29, 72, 0.1); } .card p { margin: 0 0 24px 0; line-height: 1.6; color: #64748b; font-size: 15px; font-weight: 500; } .card h3 { margin: 0 0 12px 0; font-size: 20px; font-weight: 800; color: #9f1239; letter-spacing: -0.5px; } .card button { padding: 16px; background: linear-gradient(135deg, #fff1f2 0%, #ffe4e6 100%); color: #e11d48; border: none; border-radius: 12px; font-family: 'Montserrat', sans-serif; font-weight: 700; cursor: pointer; width: 100%; transition: 0.2s; } .card button:hover { transform: translateY(-2px); background: #ffe4e6; } </style> </head> <body> <div class="grid-container"> <div class="card"> <h3>Lite</h3> <p>Базовый старт.</p> <button>Выбрать</button> </div> <div class="card"> <h3>Standard</h3> <p>Здесь текста намного больше. Grid автоматически растягивает среднюю строку (1fr), выталкивая кнопку вниз, независимо от соседей.</p> <button>Выбрать</button> </div> <div class="card"> <h3>Premium</h3> <p>Полный набор инструментов для профи.</p> <button>Выбрать</button> </div> </div> </body> </html>
В этой записи auto означает, что заголовок и кнопка возьмут столько места, сколько им нужно, а 1fr отдаст все оставшееся пространство средней части.
Плюс этого подхода: Grid не важно, что именно находится во второй строке. Это может быть один элемент или пять — сетка просто расширит эту зону, автоматически выталкивая кнопку вниз.
В чем разница подходов:
Flex заставляет нас манипулировать внутренностями контента, в то время как Grid позволяет создать «умный» шаблон самого блока. Если структура контента внутри карточки может меняться, Grid обеспечит гораздо большую стабильность, так как он управляет пространством, а не конкретными тегами.
❯ Пример 3: Облако тегов
Бывают ситуации, когда строгая сетка только мешает. Хороший пример — облако тегов под статьей или список категорий. Теги имеют разную длину и нам нужно, чтобы они шли друг за другом, как слова в предложении, и мягко переносились на следующую строку, когда место закончится.
Решение на Flex
Flex изначально создавался для таких потоковых задач. Ему достаточно дать одну команду flex-wrap: wrap, и он начнет вести себя максимально естественно.
.tags-container { display: flex; flex-wrap: wrap; /*...*/ }
Полный код
Полный код примера
<!DOCTYPE html> <html lang="ru"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Flexbox: облако тегов</title> <link href="<https://fonts.googleapis.com/css2?family=Montserrat:wght@500;700;800&display=swap>" rel="stylesheet"> <style> body { margin: 0; font-family: 'Montserrat', sans-serif; background-color: #f0f7ff; display: flex; justify-content: center; align-items: center; min-height: 100vh; } .tags-container { display: flex; flex-wrap: wrap; gap: 12px; max-width: 700px; padding: 40px; background-color: white; border-radius: 30px; border: 3px solid #60a5fa; box-shadow: 0 20px 50px -10px rgba(59, 130, 246, 0.15); } .tag { background-color: #eff6ff; color: #2563eb; padding: 10px 20px; border-radius: 12px; border: 2px solid #dbeafe; font-size: 14px; font-weight: 700; white-space: nowrap; transition: 0.2s; } .tag:hover { border-color: #60a5fa; background-color: #dbeafe; } </style> </head> <body> <div class="tags-container"> <span class="tag">Новинка</span> <span class="tag">Распродажа</span> <span class="tag">Ограниченный тираж</span> <span class="tag">Бестселлер</span> <span class="tag">Эксклюзив</span> <span class="tag">Скидка 50%</span> <span class="tag">Рекомендуем</span> <span class="tag">Новое поступление</span> <span class="tag">Хит сезона</span> <span class="tag">Спецпредложение</span> </div> </body> </html>
Каждый тег занимает ровно столько места, сколько нужно его тексту. Когда место в строке заканчивается, теги переносятся на новую строку.
Это естественное поведение, похожее на то, как текст переносится в книге. Каждый элемент занимает ровно столько места, сколько ему нужно, и когда строка заполняется, элементы переходят на следующую строку.
Решение на Grid
Если попытаться втиснуть теги в Grid, мы столкнемся с его главной особенностью — стремлением к порядку. Grid всегда создает ячейки, и даже если вы используете продвинутые функции вроде auto-fit, он все равно будет пытаться выровнять теги по невидимым вертикальным линиям.
.tags-container { display: grid; grid-template-columns: repeat(auto-fit, minmax(120px, 1fr)); /*...*/ }
Полный код
Полный код примера
<!DOCTYPE html> <html lang="ru"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Grid: теги (неудачно)</title> <link href="<https://fonts.googleapis.com/css2?family=Montserrat:wght@500;700;800&display=swap>" rel="stylesheet"> <style> body { margin: 0; font-family: 'Montserrat', sans-serif; background-color: #fff1f2; display: flex; justify-content: center; align-items: center; min-height: 100vh; } .tags-container { display: grid; grid-template-columns: repeat(auto-fit, minmax(120px, 1fr)); gap: 12px; width: 90%; max-width: 700px; padding: 40px; background-color: white; border-radius: 30px; border: 3px solid #fb7185; box-shadow: 0 20px 50px -10px rgba(225, 29, 72, 0.15); } .tag { background-color: #fff1f2; color: #e11d48; padding: 10px; border-radius: 12px; border: 2px solid #ffe4e6; font-size: 13px; font-weight: 700; text-align: center; display: flex; align-items: center; justify-content: center; } </style> </head> <body> <div class="tags-container"> <span class="tag">Новинка</span> <span class="tag">Распродажа</span> <span class="tag">Ограниченный тираж</span> <span class="tag">Бестселлер</span> <span class="tag">Эксклюзив</span> <span class="tag">Скидка 50%</span> <span class="tag">Рекомендуем</span> <span class="tag">Новое поступление</span> <span class="tag">Хит сезона</span> <span class="tag">Спецпредложение</span> </div> </body> </html>
В итоге короткие слова будут либо растянуты на всю ширину ячейки, либо вокруг них образуется странное пустое пространство, потому что соседний длинный тег задал ширину всей колонке. Это как раз тот случай, когда порядок Grid превращается в излишнюю жесткость.
Проблема в том, что Grid мыслит ячейками. Он создает строгую сетку, где все ячейки в одном столбце одинаковой ширины. Для тегов это не подходит, потому что теги должны занимать ровно столько места, сколько нужно их содержимому.
В чем разница подходов:
Главный урок этого примера заключается в том, что Flex незаменим для контента с непредсказуемыми размерами. Если ваша задача — позволить элементам «дышать» и занимать ровно столько места, сколько им требуется, не пытаясь выстроить их в ровную сетку, Flex будет лучшим и самым простым решением.
❯ Пример 4: Макет страницы
Когда дело доходит до каркаса всего сайта — с шапкой, боковым меню, основным контентом и футером — масштабы задачи меняются. Здесь нам нужно управлять не просто парой кнопок, а целыми областями экрана. И именно здесь Grid раскрывает свой потенциал.
Grid с grid-template-areas
С помощью Grid мы можем создать сетку для всей страницы и распределить элементы по именованным областям. Это избавляет нас от необходимости создавать бесконечные вложенные контейнеры, которые обычно нужны во Flex для группировки боковой панели и контента.
body { display: grid; grid-template-columns: 280px 1fr; grid-template-rows: auto 1fr auto; grid-template-areas: "header header" "sidebar main" "footer footer"; /*...*/ } header { grid-area: header; /*...*/ } aside { grid-area: sidebar; /*...*/ } main { grid-area: main; /*...*/ } footer { grid-area: footer; /*...*/ }
Полный код
Полный код примера
<!DOCTYPE html> <html lang="ru"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Grid: макет страницы</title> <link href="<https://fonts.googleapis.com/css2?family=Montserrat:wght@500;700;800&display=swap>" rel="stylesheet"> <style> body { margin: 0; font-family: 'Montserrat', sans-serif; min-height: 100vh; display: grid; grid-template-columns: 280px 1fr; grid-template-rows: auto 1fr auto; grid-template-areas: "header header" "sidebar main" "footer footer"; background-color: #fff1f2; } header { grid-area: header; background-color: #ffffff; color: #9f1239; padding: 25px 40px; font-weight: 800; font-size: 24px; border-bottom: 3px solid #fb7185; } aside { grid-area: sidebar; background-color: #fffafb; padding: 40px; border-right: 3px solid #fb7185; } main { grid-area: main; background-color: #ffffff; padding: 50px; } footer { grid-area: footer; background-color: #ffffff; color: #e11d48; padding: 20px; text-align: center; font-weight: 600; border-top: 3px solid #fb7185; } h1 { color: #9f1239; font-weight: 800; margin-top: 0; } h3 { color: #e11d48; font-weight: 700; margin-top: 0; text-transform: uppercase; font-size: 14px; letter-spacing: 1px;} p { line-height: 1.7; color: #4b5563; } ul { list-style: none; padding: 0; } li { padding: 12px 0; color: #64748b; font-weight: 600; border-bottom: 1px solid #ffe4e6; cursor: pointer;} li:hover { color: #e11d48; } @media (max-width: 768px) { body { grid-template-columns: 1fr; grid-template-areas: "header" "sidebar" "main" "footer"; } aside { border-right: none; border-bottom: 3px solid #fb7185; } } </style> </head> <body> <header>LOGO.DESIGN</header> <aside> <h3>Панель управления</h3> <ul> <li>Главная</li> <li>Аналитика</li> <li>Проекты</li> <li>Настройки</li> </ul> </aside> <main> <h1>Обзор системы</h1> <p>Использование <code>grid-template-areas</code> превращает верстку в чтение карты. Вы буквально описываете словами, где должен находиться каждый блок.</p> <p>Это самый наглядный способ создания интерфейсов для десктопа и мобильных устройств.</p> </main> <footer>© 2026 Grid Layout System.</footer> </body> </html>
Вы сразу видите, что шапка занимает верхний ряд целиком, под ней слева узкий сайдбар, а справа — основная часть. Обратите внимание на grid-template-areas. Мы буквально рисуем макет в CSS: header header значит шапка занимает обе колонки, sidebar main значит в первой колонке боковая панель, во второй — основной контент, footer footer значит футер занимает обе колонки.
Более того, решить проблему «прилипающего» к низу футера здесь можно одной строчкой 1fr для центральной части. Если на странице будет мало текста, Grid сам растянет среднюю секцию и прижмет подвал к краю экрана.
Делать то же самое на Flex — значит плодить лишние обертки в HTML коде. Вам придется объединять сайдбар и контент в отдельный div, чтобы выровнять их горизонтально, а затем этот div оборачивать вместе с шапкой и футером для вертикального выравнивания. Grid же позволяет держать HTML структуру плоской и чистой.
Поэтому в этом примере, обойдёмся без реализации на Flex. Это заведомо плохое решение.
❯ Итог: Flex или Grid?
Подведем итоги. Оба инструмента полезны, но для разных задач.
Используйте Grid, когда вам нужен двумерный макет, то есть управление и строками, и колонками одновременно. Grid отлично подходит для общего макета страницы, когда нужно создать жесткую сетку, где контейнер управляет расположением элементов.
Используйте Flex, когда элементы должны идти в одну линию — горизонтально или вертикально. Flex отлично подходит для компонентов, которые сами определяют свои размеры, например, для навигационного меню, где каждый пункт занимает столько места, сколько нужно его тексту. Flex идеален, когда элементы должны переноситься на новую строку, сохраняя свою естественную ширину, как в случае с облаком тегов.
На практике часто используют оба подхода вместе. Например, Grid для общего макета страницы, а внутри Grid-областей — Flex для выравнивания содержимого. Или наоборот: Flex-контейнер для расположения карточек в ряд, а внутри каждой карточки Grid для выравнивания внутренних элементов.
Попробуйте примеры из этой статьи. Скопируйте код, откройте в браузере, поэкспериментируйте. Так вы лучше поймете разницу между подходами и сможете выбирать правильный инструмент для каждой задачи. Не бойтесь использовать Grid. Да, его синтаксис может показаться сложнее на первый взгляд, но зато он дает возможности для создания сложных макетов.
Новости, обзоры продуктов и конкурсы от команды Timeweb.Cloud — в нашем Telegram-канале ↩
