AI-помощник
Обновлен 07.11.2026
HTML и CSS (Часть 3) Сетки, позиционирование и адаптивность
Научитесь создавать современные адаптивные сайты с помощью CSS Grid, медиазапросов и контейнерных запросов 📱. Освойте профессиональные техники позиционирования элементов и верстайте интерфейсы, которые отлично выглядят на любых устройствах. ✨
Практические задания
Помощь от учителя
Поддержка 24/7
Программа курса
3 разделов • 15 уроков
1
CSS Grid — двумерные макеты
1.1. Grid-контейнер: grid-template-columns, grid-template-rows, gap
1.2. Единицы fr, функции repeat(), minmax()
1.3. Размещение элементов: grid-column, grid-row, grid-area
1.4. Именованные области шаблона (grid-template-areas)
1.5. Вложенные сетки и subgrid; Flexbox vs Grid — когда что выбирать
2
Позиционирование
2.1. Поток документа и свойство position: static, relative
2.2. Вне потока: absolute и fixed, смещения top/right/bottom/left
2.3. «Прилипающие» элементы: sticky-шапки и панели
2.4. Слои и наложение: z-index и контекст наложения
3
Адаптивная вёрстка
3.1. Мобильные устройства и meta viewport, подход mobile-first
3.2. Медиазапросы @media, контрольные точки (breakpoints)
3.3. Контейнерные запросы @container — адаптив по размеру родителя
3.4. Гибкие размеры: %, vw/vh, clamp(), min(), max()
3.5. Адаптивные изображения: object-fit, aspect-ratio, авто-сетки
3.6. Подведем итоги
Преподаватели
Изучите преподавательский состав
Отзывы о курсе
0 отзыва
Войдите в аккаунт, чтобы оставить отзыв о курсе
HTML
CSS
CSS Grid
Адаптивная вёрстка
Медиазапросы
Frontend