Hey There👋🏽, it's really after a long time writing an article. I spent more than a couple of months on intense research of CSS Grid. More advanced techniques are added in CSS Specification which makes our life easier.
I developed 25 extremely modern layouts made on CSS Grid and Flexbox.
Do yo Know??
✅ Every Layout following Mobile First Approach.
✅ Responsive to all breakpoints.
❌ No Absolute or Relative positioning used.
✅ Only use CSS Grid techniques.
Not Showcasing Only, For Practicing also
Hey, This 25 layout make a best practice for modern layouts from beginner to advanced level.
For Every layout, I list GitHub link🔗 and Preview Link🔗.
Design Credits to Marko Jotic and get it on Gumroad
3 steps to practice this modern layout
✅Step 01 - Fork the repo.
✅Step 02 - Understand the HTML Grouping and CSS Layout technique used.
✅Step 03 - ReCreate the layout on your own .
Layout 01
| GitHub Link | Preview Link |
Layout 02
| GitHub Link | Preview Link |
Layout 03
| GitHub Link | Preview Link |
Layout 04
| GitHub Link | Preview Link |
Layout 05
| GitHub Link | Preview Link |
Layout 06
| GitHub Link | Preview Link |
Layout 07
| GitHub Link | Preview Link |
Layout 08
| GitHub Link | Preview Link |
Layout 09
| GitHub Link | Preview Link |
Layout 10
| GitHub Link | Preview Link |
Layout 11
| GitHub Link | Preview Link |
Layout 12
| GitHub Link | Preview Link |
Layout 13
| GitHub Link | Preview Link |
Layout 14
| GitHub Link | Preview Link |
Layout 15
| GitHub Link | Preview Link |
Layout 16
| GitHub Link | Preview Link |
Layout 17
| GitHub Link | Preview Link |
Layout 18
| GitHub Link | Preview Link |
Layout 19
| GitHub Link | Preview Link |
Layout 20
| GitHub Link | Preview Link |
Layout 21
| GitHub Link | Preview Link |
Layout 22
| GitHub Link | Preview Link |
Layout 23
| GitHub Link | Preview Link |
Layout 24
| GitHub Link | Preview Link |
Layout 25
| GitHub Link | Preview Link |
Practice make a perfect layout!!
Top comments (8)
Looks very cool 😎
Thanks for your words
Wow 👏👏👏
Your creativity is mind blowing 🙏 you put your 100% efforts in your work. Please share some consistency ideas we can apply it on our work also 🤞.
Thanks 🙏☺️
Keep growing 🏁
Hii Atul,
After a long time to see your words which made me cheerful. Surely, I will share...
Yes thanks 🙏
Take your time, we will wait!
Look really awesome. Kindly share some ideas and tips, we too can apply.
Thanks for your words. Surely, I will.
Awesome work, kudos 🎉. But I'd take a bit more attention to mobile. Sometimes words are cut or hidden, like in the crypto case, the message I see is ""new era"".