DEV Community

Cover image for 25 Extremely Modern Layouts Using CSS Grid✨
Preethi⚡
Preethi⚡

Posted on • Updated on

25 Extremely Modern Layouts Using CSS Grid✨

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.

Image description

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


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 01

Layout 02

| GitHub Link | Preview Link |

Layout 02

Layout 03

| GitHub Link | Preview Link |

Layout 03

Layout 04

| GitHub Link | Preview Link |

Layout 04

Layout 05

| GitHub Link | Preview Link |

Layout 05

Layout 06

| GitHub Link | Preview Link |

Image description

Layout 07

| GitHub Link | Preview Link |

Layout 07

Layout 08

| GitHub Link | Preview Link |

layout 08

Layout 09

| GitHub Link | Preview Link |

layout 09

Layout 10

| GitHub Link | Preview Link |

layout 10

Layout 11

| GitHub Link | Preview Link |

layout 11

Layout 12

| GitHub Link | Preview Link |

layout 12

Layout 13

| GitHub Link | Preview Link |

layout 13

Layout 14

| GitHub Link | Preview Link |

layout 14

Layout 15

| GitHub Link | Preview Link |

layout 15

Layout 16

| GitHub Link | Preview Link |

layout 16

Layout 17

| GitHub Link | Preview Link |

layout 17

Layout 18

| GitHub Link | Preview Link |

layout 18

Layout 19

| GitHub Link | Preview Link |

layout 19

Layout 20

| GitHub Link | Preview Link |

Image description

Layout 21

| GitHub Link | Preview Link |

layout 21

Layout 22

| GitHub Link | Preview Link |

layout 22

Layout 23

| GitHub Link | Preview Link |

layout 23

Layout 24

| GitHub Link | Preview Link |

layout 24

Layout 25

| GitHub Link | Preview Link |

layout 25


Practice make a perfect layout!!

Find Me on GitHub Twitter

Discussion (8)

Collapse
p3ntest profile image
Julius (P3ntest)

Looks very cool 😎

Collapse
preethi_dev profile image
Preethi⚡ Author

Thanks for your words

Collapse
atulcodex profile image
Atul Prajapati

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 🏁

Collapse
preethi_dev profile image
Preethi⚡ Author

Hii Atul,

After a long time to see your words which made me cheerful. Surely, I will share...

Collapse
atulcodex profile image
Atul Prajapati

Yes thanks 🙏

Take your time, we will wait!

Collapse
shshank profile image
Shshank

Look really awesome. Kindly share some ideas and tips, we too can apply.

Collapse
preethi_dev profile image
Preethi⚡ Author

Thanks for your words. Surely, I will.

Collapse
raibtoffoletto profile image
Raí B. Toffoletto

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"".