Skip to content
Switch branches/tags

Latest commit


Git stats


Failed to load latest commit information.
Latest commit message
Commit time

Practical CSS Layouts

Project Homepage:

The best way to learn something new is to practice. When I started learning CSS Grid, I found that most of the articles/tutorials provide a very basic layout to make it easy to explain things. But those easy layouts do not cover real word challenges that we face while working on actual projects. So I decided to design some real pages to find out the real challenges while working with new CSS layout modules.

I am creating these pages using CSS Grid layout Module, Flexible Box Layout Module (Flexbox), and other new features in CSS. Also, I have shared my code in this github repository so that anybody can use the code for learning.


Layout 1 - Page 1 | Page 2

Layout 2 - Page 1


Can I use these designs?

I have used some open source designs available at different websites; due credit is given to each designer. Please get in touch with the respective designers if you need more details about licensing information for a design.

Can I use this code?

This is an open source project, you can use the code as you like. However because code in this project is experimental, I cannot guarantee its compatibility with all browsers and devices.

Can I contribute?

Yes, any contributions are welcome, if they are relevant to this project.

Can I provide you a design for coding?

Yes, but all pages/designs will be available as part of this open source project. Alternatively I am available on upwork for paid projects.

How can I learn CSS Grid Module?

I am curating a list of learning resources (Link to be added)

About Me

Hi, I am Jaspreet K. Jain, I am a Frontend developer, entrepreneur, co-founder @ HSR Technologies, and mother of a lovely son.

Follow me on twitter @jaspreetkjain

Spread the word

Share my love for this project so that others can know and then use this code.


No releases published


No packages published