Russian (Pусский) translation by Alex Bogdanov (you can also view the original English article)
Сегодня я поделюсь с вами 5 ресурсами для совершенствования CSS Grid Layout. Давайте начнем!
Краткое введение в CSS Grid
CSS Grid Layout заслуженно является одной из самых важных технологий для веб-разработчиков с момента появления CSS. Это система разметки, используемая при создании пользовательских интерфейсов, основанных на какой-либо сетке, что значит, что стандартный подход с использованием "Float" (который больше похож на хак, честно говоря) больше не нужен для правильного позиционирования элементов на веб-странице.
Первый работающий черновик был опубликован в 2011 году, и, верьте или нет, за значительную часть его разработки мы должны благодарить Microsoft; три из четырех людей, которые его создали, были частью команды Microsoft. Эта изначальная версия уже неактуальна, с тех пор ее заменила CSS Grid Layout Module Level 1.
5 сподручных ресурсов
Поддержка браузерами CSS Grid уже подает много надежд, так что сейчас отличное время для того, чтобы разобраться в ее синтаксисе. Вот несколько отличных ресурсов, чтобы сдвинуться с места.
Mozilla: введение в CSS Grid Layout
Первый ресурс будет от Mozilla. Это "Введение в CSS Grid Layout" охватывает самые основы, также как и более сложные вещи, такие, например, как именование линий CSS Grid. Это очень скрупулезный ресурс, очень здорово преподносящий информацию с понятной навигацией, также как и приятным дизайном. Здесь же дается код, на котором можно потренироваться, не покидая страницу.
learncssgrid.com
Другой хороший ресурс – это learncssgrid.com от Джонатана Су. Он объясняет теорию, стоящую за синстаксисом, при этом также предоставляя примеры наиболее употребимых случаев использования CSS Grid.
CSS Tricks: исчерпывающее руководство по CSS Grid
Далее мы переходим к CSS Tricks, который является отличным ресурсом, созданным Крисом Хаусом (в видео я ошибочно упомянул Криса Коера, приношу за это извинения). Исчерпывающее руководство по CSS Grid на самом деле является именно тем, чего от него ожидаешь; оно очень исчерпывающее. В нем можно найти информацию о таких вещах, как свойствах для контейнеров сетки и помещении контейнеров сетки в разные столбцы. Прекрасная работа, как и всегда, от CSS Tricks.
CSS Grid на примере
"CSS Grid на примере" разработана и поддерживается Рэйчел Эндрю (она сама часть команды, которая работает над CSS Grid Layout) и уже существует немалое количество времени. Помимо "начального руководства", которое разбирает основы спецификации, оно также дает множество примеров и готовых к использованию паттернов для часто используемых ситуаций.
Курсы Envato Tuts+ по CSS Grid
Если вам больше подходит обучение в формате видео, я вам настойчиво рекомендую (очевидно!) ознакомиться с этими курсами Крейга Кэмпбелла. Первый (3 проекта на CSS Grid для веб-дизайнеров) проведет вас через 3 проекта, построенных на CSS Grid Layout, с примерами на Codepen для непосредственной практики и изучения.
Один из последних курсов Крейга (Соединяем CSS Grid Layout и Flexbox вместе) объясняет, как вы можете использовать два наиболее мощных модуля разметки (CSS Grid и Flexbox) вместе.
Учимся дальше!
Эта краткая сводка уроков является отличным началом в изучении CSS Grid. Все эти ресурсы включают практические примеры, которые вы можете подробно разобрать и укрепить таким образом теорию. Я оставляю вас с еще парочкой уроков, до скорых встреч, а между делом – хорошего обучения!
