Всем привет. Сегодня мы рассмотрим новейшую технику адаптивной верстки сайтов с использованием CSS Grid. Технология совершенно новая и официально стала поддерживаться современными браузерами только в середине 2017 года. Так что данный материал имеет сугубо академическое назначение. Использовать CSS Grid на реальных проектах или нет - решать вам. Однако этот инструмент, спецификация которого еще не остыла после горячего пресса, в некотором роде, является прорывом в создании адаптивных интерфейсов. Интересно? Вперед в будущее!
Примеры CSS Grid из видео:
- Пример №1: https://codepen.io/agragregra/pen/WEPLja
- Пример №2: https://codepen.io/agragregra/pen/VzggZQ
- Пример №3: https://codepen.io/agragregra/pen/ZJwwOO
- Пример №4: https://codepen.io/agragregra/pen/wqNNpw
- Пример №5: https://codepen.io/agragregra/pen/prGGBe
Премиум уроки от WebDesign Master
Другие уроки по теме «Верстка»
- Создание красивого сайта с поддержкой темной темы (HTML, CSS, GSAP)
- Создание крутого 3D сайта с анимацией прокрутки
- Создание потрясающей галереи на HTML, CSS и JavaScript
- Создание крутой 3D сцены (CSS + HTML) с эффектным дизайном
- Создание крутого Swiper-слайдера от А до Я | Материалы курса
- Создание пользовательского курсора с красивой анимацией. CSS / JavaScript / GSAP. Видеоурок и материалы