WebDesign Master
CSS Grid: Новый взгляд на адаптивную верстку сайтов. Руководство
HTML и CSS

CSS Grid: Новый взгляд на адаптивную верстку сайтов. Руководство

Всем привет. Сегодня мы рассмотрим новейшую технику адаптивной вёрстки сайтов с использованием CSS Grid. Технология совершенно новая и официально стала поддерживаться современными браузерами только в середине 2017 года. Так что данный материал имеет сугубо академическое назначение. Использовать CSS Grid на реальных проектах или нет - решать вам. Однако этот инструмент, спецификация которого ещё не остыла после горячего пресса, в некотором роде, является прорывом в создании адаптивных интерфейсов. Интересно? Вперёд в будущее!

Поделиться
Твитнуть
Поделиться
Класснуть
Запинить
CSS Grid: Новый взгляд на адаптивную верстку сайтов. Руководство - Видеоурок
Смотреть урок на YouTube
Создание интернет-магазина от А до Я

Примеры 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

Курс по созданию интернет-магазина на OpenCart

Создание современного интернет-магазина от А до Я

Создание контентного сайта

Создание контентного сайта на Jekyll от А до Я

Фриланс для начинающих

Я - фрилансер! - Руководство успешного фрилансера

Другие уроки по теме «HTML и CSS»

  • Адаптивная вёрстка галереи без JS. CSS target. Работа с изображениями - Retina img. HTML сниппеты #5
  • Адаптивная верстка вертикального таймлайна. HTML Сниппеты #4
  • Bootstrap 4. Сетка. Подробное руководство
  • CSS Grid: адаптивная верстка реального макета
  • CSS анимация для самых маленьких

Разделы сайта:

  • HTML и CSS
  • Веб-дизайн
  • Инструменты
  • Оффтоп
  • MODx
  • WordPress
  • jQuery
  • Адаптивный веб-дизайн
  • Создание иконок
  • Обработка изображений
  • Иллюстрации и Инфографика
  • Интерфейсы UI/UX
  • Прототипирование
  • JavaScript
  • Хостинг

Полезные ресурсы:

  • Lazy Load Placeholder
2019 © WebDesign Master