7 days of unlimited WordPress themes, plugins & graphics - for free!* Unlimited asset downloads! Start 7-Day Free Trial
Advertisement
  1. Web Design
  2. CSS Grid Layout

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

Read Time: 3 mins

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
Did you find this post useful?
Want a weekly email summary?
Subscribe below and we’ll send you a weekly email summary of all new Web Design tutorials. Never miss out on learning about the next big thing.
Scroll to top
Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.