HomeОбразованиеRelated VideosMore From: The Net Ninja

CSS Grid Tutorial #2 - Columns

965 ratings | 53632 views
Hey gang, in this CS grid tutorial, I'll show you how to work with grid columns - the amount of columns you want in your grid, the width of those columns, and how content is placed onto them. ----- COURSE LINKS: + Atom editor - https://atom.io/a + GitHub Repo - https://github.com/iamshaunjp/css-grid-playlist --------------------------------------------------------------------------------------------- Other tutorials: ----- HTML FOR BEGINNERS: https://www.youtube.com/watch?v=Y1BlT4_c_SU&list=PL4cUxeGkcC9ibZ2TSBaGGNrgh4ZgYE6Cc ----- CSS FOR BEGINNERS: https://www.youtube.com/playlist?list=PL4cUxeGkcC9gQeDH6xYhmO-db2mhoTSrT ----- NODE.JS TUTORIALS https://www.youtube.com/playlist?list=PL4cUxeGkcC9gcy9lrvMJ75z9maRw4byYp ----- SUBSCRIBE TO CHANNEL - https://www.youtube.com/channel/UCW5YeuERMmlnqo4oq8vwUpg?sub_confirmation=1 ============== The Net Ninja ===================== For more front-end development tutorials & to black-belt your coding skills, head over to - https://www.youtube.com/channel/UCW5YeuERMmlnqo4oq8vwUpg or http://thenetninja.co.uk ================== Social Links ================== Twitter - @TheNetNinja - https://twitter.com/thenetninjauk
Html code for embedding videos on your blog
Text Comments (58)
kobra (5 days ago)
what is the difference between the "# content div" and just "# content" that you used when styling the class?
minivanjack (9 days ago)
Can anyone tell me where I can find a CSS tutorial that I can actually comprehend?
Jeff Ribyat (1 month ago)
Talking maybe a little too fast, but otherwise "jolly good show"
unknown (2 months ago)
1fr it the same thing in flexbox [ flex-grow: 1 .....; ]
unknown (2 months ago)
good goood gogogogogog
NAUMAN AHMAD QADRI (2 months ago)
Thanx ,learned from your lecture but , Display grid property is not working in my style sheet.no effect after adding display grid and template of column.
tatenda mheremhere (2 months ago)
Good tutorials they are short and straight to the point,good job and keep it up
Bob Wilson (3 months ago)
Again... BRILL
Smile_Brighter (3 months ago)
Automagically... :3 Thanks for the tutorial, it was super helpful (as is all the rest of your content too)! Cheers
Ananneya Tadesse (4 months ago)
Thx soo much bro this really helped
Rollbaa (4 months ago)
Ismahene Larbi (5 months ago)
This is really cool, here's to making less hideous pages thanks to the grid model :)
Alper Aksoylar (8 months ago)
This css technique is very similar with flexbox :)
Bbb Iii (8 months ago)
I am so hood!
Modestas (9 months ago)
really well explained! Thank you.
Mark Scardina (10 months ago)
This is awesome. Very clear and concise; thanks man!
thx so much for this tutorial dude.
raltesailo (11 months ago)
Thanks for uploading. now i understand everything. explanation is very clear and easy to understand.
DIM (1 year ago)
just found your channel and I am very happy, Kudos!
Michał Ratajczak (1 year ago)
Absolutely fantastic tutorial!
Jhaner Madriaga (1 year ago)
can I use the body as a wrapper, or should I use a div?
Reyes25111 (7 months ago)
i was just testing it and it works the same
Reyes25111 (7 months ago)
ReyCuban Tv (1 year ago)
Jhaner Madriaga it is recomend to use a div!! Dont use the body
Matthew Davies (1 year ago)
Thanks for a whole course on Grid!
Dragonbreak (1 year ago)
I've watched like 50 tutorials... and every one of them was like 30min long just to say nothing... and there i fould just a ONE argument that was missing in my code... OMFG... i would say life is brutal but... whatever...
Wilhelm Kahn (1 year ago)
Thanks a million Shaun - your vids are probably the best source on the web for up and coming designers from all over the world! Vieeelen Dank!
Adrn Amrfs (1 year ago)
You have amazing shit
American Pi (1 year ago)
Net Ninja....you are the shiznit!!!!!
Łukasz ;p (1 year ago)
this is brilliant.
Kay Huang (1 year ago)
Actually there is one more way to define Grid width right? Can use pixels: grid-template-columns: 150px 150px 150px; and can mix the different ways of defining the width: grid-template-columns: 100px 30% 1fr;
vioox (1 year ago)
your voice look like you re ill when record the video. I hope you get better then. Thx for excellent tutorials.
branen890 (1 year ago)
If someday in the close future i get a job like web developer from my first paycheck im gonna donate money to your channel and to Traversy Media and Derek Banas!You guys are awesome teachers.Most my knowledge about web development is from you guys!God bless you!
tunoiredaot (1 year ago)
It is great to be a web dev right now
this is f-ing beautiful thank you!
Mark Baladad (1 year ago)
Your the best man i appreciate your videos so much. I wonder how much people uve helped get a career in developing. Hopefully ill be one of them.
Baizid Academy (1 year ago)
brother your works are fine, but intro sound is horrible. please remove it from tutorials or set cool sound...
Thom David (1 year ago)
Your JavaScript tutorial series was so good that when I saw you’d done one on CSS Grid I jumped right in. You know your stuff, your teaching style is excellent, and you give just the right size “bite” in each lesson. Thank you again for these terrific tutorials!
Mahir Kaljanac (1 year ago)
automagicly... :)
Carl Evans (1 year ago)
So many of the other tutorials on here were using extra div markup even when they were teaching CSS Grid. It's great to learn from an HTML5 point of view.
Can you do a mosaic lay-out tut?
Alberto Blacutt (1 year ago)
Thaks is intersesting, Wainting for the next video
Steven (1 year ago)
Hello, I wanted to know what you use to code/program on? It seems so handy.
QromaScan (1 year ago)
Great tutorials.  What package do you use for autocomplete in Atom? Looks neat...
Steven (1 year ago)
Thank you! Appreciate it.
The Net Ninja (1 year ago)
Hey, I use a text editor called Atom, and use a package called atom-live-server for the live reload :)
Rakesh Debnath (1 year ago)
Simple yet Excellent!
krunal pawar (1 year ago)
very helpful sir .. thank...
halogenic (1 year ago)
The git repo link is broken
The Net Ninja (1 year ago)
Thanks - I forgot to make the repo public. Should be fine now :)
Man-on-the-Run (1 year ago)
Awesome... thank you ...
ArmanGeboyan (1 year ago)
"auto-magically" :D
The Net Ninja (1 year ago)
kmn (1 year ago)
thank you so much. does all browsers support css grid?
Ishan Manandhar (1 year ago)
Please like and share my article on css grid https://goo.gl/ohqmNr :)
Jiri Laza (1 year ago)
68.14% + 4.35% = 72.49% The support isn't great but it's getting better. caniuse.com/#search=grid
Teodora Cerevicki (1 year ago)
i wanted to ask that also
Marko Ordenski (1 year ago)
nice and cool

Would you like to comment?

Join YouTube for a free account, or sign in if you are already a member.