Skip to content
Branch: master
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Type Name Latest commit message Commit time
Failed to load latest commit information.

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.

You can’t perform that action at this time.