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

CSS Grid Tutorial #2 - Columns

765 ratings | 41283 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 (49)
Ananneya Tadesse (11 days ago)
Thx soo much bro this really helped
Rollbaa (15 days ago)
whipy!
Ismahene Larbi (29 days ago)
This is really cool, here's to making less hideous pages thanks to the grid model :)
Alper Aksoylar (4 months ago)
This css technique is very similar with flexbox :)
Bbb Iii (4 months ago)
I am so hood!
Modestas (4 months ago)
really well explained! Thank you.
Mark Scardina (6 months ago)
This is awesome. Very clear and concise; thanks man!
thx so much for this tutorial dude.
raltesailo Sailo (6 months ago)
Thanks for uploading. now i understand everything. explanation is very clear and easy to understand.
DIM (7 months ago)
just found your channel and I am very happy, Kudos!
Michał Ratajczak (8 months ago)
Absolutely fantastic tutorial!
Jhaner Madriaga (9 months ago)
can I use the body as a wrapper, or should I use a div?
Reyes25111 (2 months ago)
i was just testing it and it works the same
Reyes25111 (2 months ago)
why
ReyCuban Tv (9 months ago)
Jhaner Madriaga it is recomend to use a div!! Dont use the body
Matthew Davies (9 months ago)
Thanks for a whole course on Grid!
Dragonbreak (10 months 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 (11 months 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 (11 months ago)
You have amazing shit
American Pi (11 months ago)
Net Ninja....you are the shiznit!!!!!
Łukasz ;p (11 months 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 (10 months 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)
:D
kmn (1 year ago)
thank you so much. does all browsers support css grid?
Beyond Pixels (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.