CSS Grid Tutorial #2 - Columns

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 - atom.io/a
+ GitHub Repo - github.com/iamshaunjp/css-gri...
---------------------------------------------------------------------------------------------
Other tutorials:
----- HTML FOR BEGINNERS:
• HTML Tutorial for Begi...
----- CSS FOR BEGINNERS:
• CSS Tutorials For Begi...
----- NODE.JS TUTORIALS
• Node JS Tutorial for B...
----- SUBSCRIBE TO CHANNEL - / @netninja
============== The Net Ninja =====================
For more front-end development tutorials & to black-belt your coding skills, head over to - / @netninja or thenetninja.co.uk
================== Social Links ==================
Twitter - @TheNetNinja - / thenetninjauk

[@jamesmassa1999]

I agree with the comment below, this series of tutorials has helped clarify what the grid is and how to use it. Thank you for your time and effort in making this series of tutorials. Best.

[@wilhelmkahn2267]

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!

[@user-sv2bn7ev2m]

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.

[@tatenda541]

Good tutorials they are short and straight to the point,good job and keep it up

[@markscardina8912]

This is awesome. Very clear and concise; thanks man!

[@arc8696]

"auto-magically" I learned grid with your tutorials!

[@markbaladad6710]

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.

[@robertbibong1040]

I finally understand css grids! You are the greatest Web Dev Teacher on KZbin !

[@raltesailo2940]

Thanks for uploading. now i understand everything. explanation is very clear and easy to understand.

[@micharatajczak9769]

Absolutely fantastic tutorial!

[@matthewdavies269]

Thanks for a whole course on Grid!

[@Shakeel714]

Thanks Shaun Pelling for these great tutorial videos

[@bradyn4180]

you're amazing for making these playlists

[@00el04]

thank you! these videos are life savingggg!

[@mistersir3185]

this is f-ing beautiful thank you!

[@jsmithtraveller]

I'm only on part 2 and already makes perfect sense. Thanks

[@bulldawg4498]

Absolutely painless learning!

[@alexmayorov795]

Your videos are the absolute best! Also, LOVE your voice / accent!

[@komposteramig]

Automagically... :3 Thanks for the tutorial, it was super helpful (as is all the rest of your content too)! Cheers

[@modestas2890]

really well explained! Thank you.

[@albertoblacutt4469]

Thaks is intersesting, Wainting for the next video

[@vladventura1928]

Just like in a mafia, I'll pay my respects to the godfather. Subscribed and shared on my school's Discord channel; sir, you're a godsend.

[@user-ql7pw7ld1n]

Wow..This is the best playlist to understand CSS grid.Definitely... :)

[@yucelmutlusoy]

Thanks for the tutorial, it was very helpful. Yes, Grid is awesome but whomever wrote the render engine that can execute such complicated system on the go is absolutely legendary.

[@melrok1]

Thank you for a great tutorial

[@ismahenelarbi7386]

This is really cool, here's to making less hideous pages thanks to the grid model :)

[@dalmapall7285]

you are an amazing teacher, mentor, ninja :)

[@jesushumbertochaidezsainz5794]

thx so much for this tutorial dude.

[@branen890]

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!

[@naumanahmadqadri7570]

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.

[@krunalpawarkp]

very helpful sir .. thank...

[@Lbmaniak]

this is brilliant.

[@mahirkaljanac]

automagicly... :)

[@maryamfalahsafari8368]

Amazing👏👏👏

[@ManontheBroadcast]

Awesome... thank you ...

[@EyeIn_The_Sky]

Hey man, do you have a tutorial on how to make images pop into columns when going from large screen to mobile view without blowing up and taking up the whole mobile screen? I have been struggling for ages on it!!! I used grid areas which was easy enough and did a media query for mobile to change the grid areas into a single column but for some reason, my image just completely zooms in and takes up the whole screen and long arse scroll bars show up as well :/ I tried every combination of width and height on the image container and the image itself but no luck :/

[@bobwilson3815]

Again... BRILL

[@sakshamchhatkuli271]

thank you so much !!!!!!

[@jyde50]

what is the difference between the "# content div" and just "# content" that you used when styling the class?

[@tunoiredaot]

It is great to be a web dev right now

[@ogundijoolajidedaniel459]

hello, which code editor is this? and is there an extension used for the beautiful colors?

[@TheYahiaK]

I LOVE YOU THANKS

[@johanstam3602]

Can you do a mosaic lay-out tut?

[@SocienNeicos]

Dude youre a god wtf

[@dmitrysweetly]

how to make rows/columns like in the pinterest / ?

[@brianhackit7900]

Net Ninja....you are the shiznit!!!!!

[@tropicm1015]

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;

[@laazizlahcen6262]

Hello I would like to know why Grid system does not work in windows xp.

[@markoordenski9508]

nice and cool

[@sanamalik5959]

why did you use id for content why not class? also why didn't you use separate style sheet foe styling?

[@jhanermadriaga3202]

can I use the body as a wrapper, or should I use a div?

[@reycubantv]

Jhaner Madriaga it is recomend to use a div!! Dont use the body

[@policeuac]

This css technique is very similar with flexbox :)

[@damebanda3180]

How can I change their height?

[@AgusBektiR]

Do you have any CSS course on udemy my master ?

[@joannew4279]

display: grid; grid-template-columns: repeat(2, 1fr); It doesn't really work, all photos are aligned on the left column only

[@steven7293]

Hello, I wanted to know what you use to code/program on? It seems so handy.

[@NetNinja]

Hey, I use a text editor called Atom, and use a package called atom-live-server for the live reload :)

[@steven7293]

Thank you! Appreciate it.

[@QromaPhoto]

Great tutorials. What package do you use for autocomplete in Atom? Looks neat...

[@minivanjack]

Can anyone tell me where I can find a CSS tutorial that I can actually comprehend?

[@evanoneill5582]

@traversymedia has some css grid ones that are very good.

[@AsifZaman0]

Sorry can't seem to find any files on GitHub. It only contains a readme.md file.

[@NetNinja]

Hey - you just have to select the correct branch for each lesson (top left, drop down on the repo) eg github.com/iamshaunjp/css-grid-playlist/tree/lesson-2

[@kayramen6243]

might steal that word :P

[@eddawry]

good goood gogogogogog

[@halogenic]

The git repo link is broken

[@NetNinja]

Thanks - I forgot to make the repo public. Should be fine now :)

[@bbbiii2341]

I am so hood!

[@Rollbaa]

whipy!

[@vioox]

your voice look like you re ill when record the video. I hope you get better then. Thx for excellent tutorials.

[@rellixx6916]

doesnt work for me as always...

[@cutliss]

repo only has a readme file

[@NetNinja]

You have to select the correct branch for each lesson (top left, drop down on the repo) E.G. github.com/iamshaunjp/css-grid-playlist/tree/lesson-2

[@cutliss]

@@NetNinja thx a bunch dude!

[@eddawry]

1fr it the same thing in flexbox [ flex-grow: 1 .....; ]

[@KrishnaManohar8021]

1fr = ???

[@scarysnake1249]

YOu are such a great teacher but please speak little bit slow because In video you were speaking very fast

[@dragonbreak3360]

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...

[@automation_jeff]

Talking maybe a little too fast, but otherwise "jolly good show"

[@ballislife8069]

xd

[@baizidacademy6295]

brother your works are fine, but intro sound is horrible. please remove it from tutorials or set cool sound...

[@scarysnake1249]

YOu are such a great teacher but please speak little bit slow because In video you were speaking very fast