DEV Community

Cover image for CSS Layout: A collection of popular layouts and patterns made with CSS

CSS Layout: A collection of popular layouts and patterns made with CSS

phuocng profile image Phuoc Nguyen ・1 min read

Being a front-end engineer, I have to deal with a lot of layouts and components.

There are a lot of CSS frameworks out there that provide popular layouts and components but I usually don't want to include entire framework in my project because

  • It's giant and there are a lot of stuffs I don't need
  • Each layout or component provides a lot of unnecessary options because it serves many functionalities, for many people

For each project with different requirements, I often google for the most basic part of particular layout or UI pattern and build up from there.

So I collect most popular layouts and components that can be built with pure CSS. They are powered by modern CSS features such as flexbox and grid.

And here it is: 🎉🎉🎉

CSS Layout

They are great starting points to be picked and customized easily for each specific need. By composing them, you can have any possible layout that exists in the real life.

It helps me a lot and hopefully it will help you!

Source code

This is fake JavaScript codes but it covers all the tools that I use to build the website:

    .then(r => lint(tslint))
    .then(r => lazyLoad(@loadable/component))
    .then(r => optimizeAndBundle(webpack))
    .then(r => exportHtml(react-snap))
    .then(r => deploy(Netlify))
    .then(r => {
    .finally(() => {/* Give me 1 star */}) 🎉

The entire website is open source, so let's explore and give me one Github star :)


Editor guide
jwp profile image
John Peters

Thanks Phuoc for this post!

lucasmrl profile image
Lucas L.

Great work!

shamimahossai13 profile image
whyohengee profile image
Yong Lee


I love layout problems, this is super helpful

phuocng profile image
Phuoc Nguyen Author

I am glad that you found it useful! Let me know if you have any feedback.

nguyenquangtin profile image
Tony Tin Nguyen

Thanks Phuoc for the hard works.

andyst81 profile image

Great, thank you. I will use this, so I've upvoted and Product Hunt and I've starred on GitHub.

phuocng profile image
Phuoc Nguyen Author

Thank a lot! You can subscribe to the newsletter or create an issue for missing pattern!

dongyuhappy profile image
ziizium profile image
Habdul Hazeez

This is awesome. Bookmarked.

the_riz profile image
Rich Winter

Thanks for sharing! (Might wanna double check the mobile layout though, pretty wonky on my Pixel)

phuocng profile image
Phuoc Nguyen Author

Yes, it doesn't work well on mobile yet :) I'll try to support as soon as I can.

bitdweller profile image
Pedro Pimenta

Very very nice!!