Advertisement
  1. Web Design
  2. CSS Grid Layout

5 ресурсов, чтобы быстро выучить CSS Grid Layout

by
Read Time:3 minsLanguages:

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 для непосредственной практики и изучения.

3 CSS Grid Projects for Web Designers3 CSS Grid Projects for Web Designers3 CSS Grid Projects for Web Designers
3 CSS Grid проекта для веб-дизайнеров

Один из последних курсов Крейга (Соединяем CSS Grid Layout и Flexbox вместе) объясняет, как вы можете использовать два наиболее мощных модуля разметки (CSS Grid и Flexbox) вместе.

Bringing CSS Grid Layout and Flexbox TogetherBringing CSS Grid Layout and Flexbox TogetherBringing CSS Grid Layout and Flexbox Together
Соединяем CSS Grid Layout и Flexbox вместе

Учимся дальше!

Эта краткая сводка уроков является отличным началом в изучении CSS Grid. Все эти ресурсы включают практические примеры, которые вы можете подробно разобрать и укрепить таким образом теорию. Я оставляю вас с еще парочкой уроков, до скорых встреч, а между делом – хорошего обучения!

Advertisement
Advertisement
Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.