CSS Grid Tutorial #7 - Create a 12-Column Grid

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.

----- COURSE LINKS:

---------------------------------------------------------------------------------------------
Other tutorials:

----- HTML FOR BEGINNERS:

----- CSS FOR BEGINNERS:

----- NODE.JS TUTORIALS

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

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

[arminbro.]

I just want to point out to everyone that the latest version of Firefox (57) and Chrome (63) both now support highlighting and inspecting the predefined grid system within the inspector console. This will help move elements around your grid system very easily.

[LouisYungling]

Stunning! Thank you for your generosity in showing us how to do this...and to create a grid overlay with check button! AMAZING! Thank you.

[lincolnmutwiri]

Here 5+ years later. The tutorial I was definetly looking for. Thanks

[janenic]

Net Ninja : makes sense ?!!!??
Me : hmmm(nodding)
Net Ninja : cool !!!

[DIEZ]

checkbox fro showing/hiding grid is freaking coolest trick I have ever seen!!!! WOW WOW WOW !!!! TNAKS!!!!

[oswaldomendoza]

The checkbox to toggle the grid on and off trick was really helpful when comparing my static layout to the HTML. Great job on these videos!

[duskairable]

You can display the grid overlay with only chrome dev tools,
> open dev tools
> beside the "content" id element you'll see "grid".
> press it and you can see the grid overlay on the page.

[mohamedibrahemsaad]

you don't know how much I love your channel. thanks

[meghaaggarwal]

I'm super proud of you to explain it so well and in depth ! Well done Shaun !

[mikidigital]

Hey Thank you for the tutorial. Exactly what I was looking for! To everyone confused. You can do a grid that is two columns or what ever you want. this is the most flexible way to make a grid.

Only think I would add is I follow the 1200px.com grid. So what I do is width 1200px, 15 columns, 20px, 10px margin left and right. I also set up my grids in Photoshop the same way using GuideGuide extension. This makes it really easy to think about how I will code it while im brainstorming and designing the UI.

[fullstackprojects]

The grid lines trick is pretty cool. Nice to see one real example of css positioning accidentally :)

[nejedly]

Absolutely amazing tutorials. Never seen better explained this grid system!

[mariansand]

Thank you very much. Very helpful!

Suggestions for future videos: a) PWA, b) PWA + Vue.js, c) PWA + AMP

[JatinChhabra]

I forgot to add diaplay:none; in the grid and for the past hour was thinking that what I did wrong, as the checkbox isn't working. Great tutorial man...

[wilhelmkahn]

Very cool Shaun. Am enjoying a good feeling of success as I go along. You know a lot - and I'm grateful for you for sharing your knowledge. Thanks.

[codecrayon]

Hey Shaun. You outdid yourself in this tutorial buddy. Lots of love from India. 💙

[scarysnake]

Thank you for give us idea of checkbox You are the best teacher

[christian_life]

Thanks Shaun, you have the best front-end tutorials in YouTube : )

[digiexploration]

this is 2021 in this reality and it's so relevant!

[Shakeel]

Thanks Shaun, I am learning a lot from your tutorial series