Hey gang, in this CSS grid tutorial, I’ll show you how we can create a 12-column grid using the CSS grid properties I’ve shown you so far. I’ll also show you how to create a grid overlay so you can visualize the grid on the page.

+ Atom editor –
+ GitHub Repo –

Other tutorials:





============== The Net Ninja =====================

For more front-end development tutorials & to black-belt your coding skills, head over to – or

================== Social Links ==================

Twitter – @TheNetNinja –


  1. @The Net Ninja , Thanks for this awesome tutorial , But what i want is to stick the footer to the bottom of the website irrespective of the device height or browser height . So that when i have much less content the footer don't stick up with other content and look awkward. Please provide a solution using css grid . 🙂

  2. Bravo ….. Clear and Clean course as usual …..just small note to subscriber : donn't use (id) attribute to handle css stylesheet . use class .. id is attribute use with javascript …. our teacher ninja used it just as example ….

  3. thank you very much sir .for making these 10 videos for us.
    we really neded these. specially i neded a lot.
    thanks onece again!,
    why do i need visibility sir….?

  4. amazing! thanks! just wondering how the input check box made it to the center? usually by default it will start/display from the left

  5. I would have to agree with 'Thin Soldier'. A lot of time and coding would have been saved to just use Firefox. Your tutorials are very good and clearly explained. I use Firefox for coding and then I will compare in other browsers. Great job.

  6. Great video as always, I would love if you did an updated React tutorial (and Redux)… one can dream though ;D Thanks for all the great work you do.

  7. As long as Firefox has a proper grid inspector and Chrome does not I can't take a grid tutorial seriously if it isn't using Firefox. The last 10 minutes of this video is a waste of time compared to showing the great grid inspector in Firefox or at least the work in progress Chrome add-on that tries to do the same thing.


Please enter your comment!
Please enter your name here