25 чрезвычайно современных макетов с использованием CSS Grid✨

Приветик👋🏽, это действительно после долгого времени написания статьи. Я потратил более пары месяцев на интенсивное изучение CSS Grid. В спецификации CSS добавляются более продвинутые техники, которые облегчают нашу жизнь.

Я разработал 25 чрезвычайно современных макетов на основе CSS Grid и Flexbox.

Знаете ли вы?

✅ Каждый макет соответствует подходу 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

Оцените статью
devanswers.ru
Добавить комментарий