Приветик👋🏽, это действительно после долгого времени написания статьи. Я потратил более пары месяцев на интенсивное изучение CSS Grid. В спецификации CSS добавляются более продвинутые техники, которые облегчают нашу жизнь.
Я разработал 25 чрезвычайно современных макетов на основе CSS Grid и Flexbox.
- Знаете ли вы?
- Не только для демонстрации, но и для практики
- 3 шага, чтобы применить этот современный макет на практике
- Макет 01
- Макет 02
- Макет 03
- Макет 04
- Макет 05
- Макет 06
- Макет 07
- Макет 08
- Макет 09
- Макет 10
- Макет 11
- Макет 12
- Макет 13
- Макет 14
- Макет 15
- Макет 16
- Макет 17
- Макет 18
- Макет 19
- Макет 20
- Макет 21
- Макет 22
- Макет 23
- Макет 24
- Макет 25
- Найдите меня на GitHub Twitter
Знаете ли вы?
✅ Каждый макет соответствует подходу Mobile First.
✅ Отзывчивость ко всем точкам разрыва.
❌ Не используется абсолютное или относительное позиционирование.
✅ Используется только техника CSS Grid.
Не только для демонстрации, но и для практики
Привет, эти 25 макетов — лучшая практика для современных макетов от новичка до продвинутого уровня.
Для каждого макета я указал ссылку на GitHub🔗 и ссылку для предварительного просмотра🔗.
Дизайн принадлежит Марко Джотику, а получить его можно на Gumroad
3 шага, чтобы применить этот современный макет на практике
✅Шаг 01 — Форк репозитория.
✅Step 02 — Понять используемую технику HTML-группировки и CSS-макета.
✅Step 03 — Создайте макет самостоятельно.
Макет 01
| Ссылка на GitHub | Ссылка для предварительного просмотра | Ссылка для просмотра.
Макет 02
| Ссылка на GitHub | Ссылка для предварительного просмотра |
Макет 03
| Ссылка на GitHub | Ссылка для предварительного просмотра |
Макет 04
| Ссылка на GitHub | Ссылка для предварительного просмотра |
Макет 05
| Ссылка на GitHub | Ссылка для предварительного просмотра | Макет 05
Макет 06
| Ссылка на GitHub | Ссылка для предварительного просмотра |
Макет 07
| Ссылка на GitHub | Ссылка для предварительного просмотра |
Макет 08
| Ссылка на GitHub | Ссылка для предварительного просмотра |
Макет 09
| Ссылка на GitHub | Ссылка для предварительного просмотра |
Макет 10
| Ссылка на GitHub | Ссылка для предварительного просмотра |
Макет 11
| Ссылка на GitHub | Ссылка для предварительного просмотра |
Макет 12
| Ссылка на GitHub | Ссылка для предварительного просмотра |
Макет 13
| Ссылка на GitHub | Ссылка для предварительного просмотра |
Макет 14
| Ссылка на GitHub | Ссылка для предварительного просмотра |
Макет 15
| Ссылка на GitHub | Ссылка для предварительного просмотра |
Макет 16
| Ссылка на GitHub | Ссылка для предварительного просмотра |
Макет 17
| Ссылка на GitHub | Ссылка для предварительного просмотра | Макет 17
Макет 18
| Ссылка на GitHub | Ссылка для предварительного просмотра | Макет 18
Макет 19
| Ссылка на GitHub | Ссылка для предварительного просмотра |
Макет 20
| Ссылка на GitHub | Ссылка для предварительного просмотра |
Макет 21
| Ссылка на GitHub | Ссылка для предварительного просмотра |
Макет 22
| Ссылка на GitHub | Ссылка для предпросмотра |
Макет 23
| Ссылка на GitHub | Ссылка для предварительного просмотра |
Макет 24
| Ссылка на GitHub | Ссылка для предварительного просмотра |
Макет 25
| Ссылка на GitHub | Ссылка для предварительного просмотра |
Практика делает идеальный макет!!!
Найдите меня на GitHub Twitter