Coding Fun Html How to layout your website on a grid (HTML/CSS) – A simple tutorial

How to layout your website on a grid (HTML/CSS) – A simple tutorial





Creating a pure HTML/CSS grid system.

Visit for copies of the files used in this video.

Learn more at

Tags: , , , , , , , , , , , , , , , , ,

14 thoughts on “How to layout your website on a grid (HTML/CSS) – A simple tutorial”

  1. jorjlm83 says:

    Hey Chris! Thanks for the video. Just a little comment: About the minute 29:30, when you add padding-left and padding-right, it is just necessary to put: padding: 0 15px; doing this way, the first value is for top and bottom, and the last value is for left and right.

  2. Great tutorial, thanks.

  3. Nick Short says:

    I'm getting the same problem that I started with: Everything is lining up vertically instead of on the grid. I've gone step by step through the video with the same results. I use codepen, is that the problem? Can someone help me out here?

    Excellent video by the way. Verry descriptive.

  4. Best explanation ever seen! Good I’ve found it. thanks

  5. SEM says:

    sir,, what should i do next after learning css to be a pro web designer….???

  6. What are the 'real' reasons for a container <div>? I read that it is no longer necessary and that the <body> is just as good of a wrapper element. As I understand there no longer are problems directly styling the body as it was with older versions of IE. I'm new to these things so if there are still are valid reasons for using a container <div> then I would be glad to know.

  7. Jimmy Park says:

    Thanks that was great.

  8. Did you remove the 6 column grid?

  9. Lee R says:

    Thanks for your time my friend and thanks for making these videos as well.

  10. Lee R says:

    Best video on HTML/CSS and I have watched a lot of them!

  11. due to color of notepat+ its hard to understand  with normal quality of video….otherwise its good..

  12. Bill Wileman says:

    Video is OK but your link doesn't work!

Leave a Reply

Your email address will not be published. Required fields are marked *