arrow-left
Вернуться к продуктам
Кратко о видео
В уроке разобрана практика CSS Grid на реальном проекте: настройка колонок и строк, размещение элементов в конкретные ячейки через grid-column/grid-row, комбинирование Grid и Flexbox внутри ячеек, вставка виджета видео в Grid-раскладку, асимметричные блоки разного размера. CSS Grid в Taptop задаётся в панели Layout: указываешь количество колонок, размеры в px, % или fr. Для нестандартного размещения элемента (например, блок на 2 колонки) — параметры span в дополнительных стилях. Grid и Flex не конкурируют: Grid — для двухосевых сеток, Flex — для элементов внутри ячеек. Урок для тех, кто умеет верстать в Taptop и хочет освоить Grid для сложных нестандартных раскладок. Базовое знание Flex в Taptop нужно как предварительная база — Grid изучается следующим.

Верстаем промо-сайт Альфа-банка: практика CSS Grid в Taptop

Макет с bento-сеткой — карточки разного размера, выстраиваются в двухмерный grid. Flexbox тут не поможет, нужен Grid. Но как задать колонки и строки в Taptop? Как разместить элементы точно по ячейкам?
CSS Grid в Taptop задаётся в панели Layout: количество колонок и строк, размеры в px, % или fr. Для нестандартного размещения — явная привязка через grid-column и grid-row. На практике верстаем bento-сетку промо-сайта Альфа-банка. Для всех, кто верстает сложные сетки. После просмотра строишь Grid-макеты любой структуры без вложенных Flexbox-контейнеров.
Тайминги видео
00:00 — Знакомство с макетом: оригинал и ремастер Альфа-банка 15:00 — Хедер: логотип и кнопка 30:00 — Bento-блок 1: Grid-сетка, колонки, первые карточки 1:00:00 — Bento-блок 2: Grid с видео-вставкой 1:30:00 — Bento-блок 3: асимметричная раскладка 1:50:00 — Итоги, советы по Grid, ответы на вопросы

Другие продукты академии

Как выйти на фриланс
Разберётесь, как брать первые проекты, называть цену и общаться с клиентами
Для кого
Специалистов
Направление
Фриланс
Формат
Мини-курс
Длительность
13 уроков
Taptop с нуля: сайт-портфолио
Осваиваете базу Taptop и собираете сайт-портфолио, который можно оставить себе
Для кого
Новичков
Направление
Вёрстка
Формат
Мини-курс
Длительность
9 уроков
Как дизайнеру понять вёрстку
Разберётесь, как устроены сайты, чтобы увереннее работать с ними дальше
Для кого
Новичков
Направление
Вёрстка
Формат
Интенсив
Длительность
2 урока
Как собрать сложную анимацию
Собираете сложную анимацию и плавный переход между страницами
Для кого
Для тех, кто в теме
Направление
Анимации
Формат
Интенсив
Длительность
2 урока