#CSS Grid Layout // Introduction

This video introduces you to CSS Grid Layout, the new way to layout websites using only CSS (no frameworks). I'll show you the key parts of creating the grid structure and also give some really cool examples at the end of what is possible with Grid. I'm super excited about it and hope that you'll take the time to get through this (relatively) long video!

----------------------------------------------------------

MORE RESOURCES

CSS Grid Layouts Pen:

Grid-based Magazine Layouts (Easy and Safe for the Web):

CSS-Tricks Guide to Grid:

Grid by Example (Rachel Andrews):

Jen Simmons's Grid Layout Lab:

----------------------------------------------------------------

If you like this video, please click the thumbs up. And don't forget to subscribe to get notifications of more of my content. I'm almost to 100 videos so there is a lot of content on my channel.

Questions or comments? Leave them in the comments section or contact me on Twitter: @brianhaferkamp

----------------------------------------------------------------

[cherylstonestreet]

I love grid! I only learned of it yesterday and like you, I've always dreamed of the web looking like a magazine. Can't wait to get into it and learn more. Thanks for the video.

[hpottstock]

I discovered css grid just some days ago and everything looks amazing! Great video and examples! Cheers man!

[amina___]

Thanks so much! Love how you wove a little bit of "I had a dream" into this, gives the tutorial another dimension of meaning.

[bambubombon]

I'm learning about grid right here with your video and I'm delighted... very clear explanation. I was wondering why you were leaving out the semicolons.. so I now I have a vague inkling about sass. same about bootstrap.. heard a lot about it but from your comments, looks like it's not worth bothering with it for creating gridlike layouts.

[jasminehernandez]

Super awesome and informative!! Easy to digest for a code intermediate and grid newbie. Thanks so much!

[kaya]

Ohh my god!! I just love this! Thank you so much, I have been learning for a bit now but your grid explanation is fantastic. I absolutely love this idea of magazine like features!

[alainm]

Thanks for the introduction, it was very helpful.

[joshmealing]

Thanks for the awesome tutorial. I learnt heaps! :)

[kennyjoseph]

when you made the background pink there was a white padding around .grid container...how do you get the background to fill the space?

[doineedthat]

Hello Brian, may I ask whether there is a better layout for photos than the grid layout

[JohnHansenArtist]

Thanks! A nice very laid back intro to a fairly tricky to wrap one's mind around topic, as if 'flex' isn't/wasn't! I am in the middle of a site that I've been using flexbox to give it a responsive and grid-type layout. During this build I often would state out loud, "I wish I could use 'grid' here!" Grid will be a great tool and will become a standard build structure, though how long will it take for everyone to catch up? There's still a huge amount of the WWW that is ancient and considerably broken. :-/

[getvivekjoshi]

what about IE ? seems IE have not full support without the prefixes, any suggestions on that? I am in a learning phase.

[Dexterx]

With IE11, do we have to use the -ms- tag? Do you also have some tutorial videos on grid layout? I know this is kind of self explanatory, but it would help some real cyberworld examples

[MeDvinod]

How about dynamic width with fix height of each block, and get it fill the container space, no matter what resolution is. was there any propertie which was missing in the grid.

[drd]

I am having a problem with the responsiveness. I copied the code as shown in the video and whenever I go smaller than 800px none of the grid components show up. All I see is a white screen. I've tried changing the min-width for the media queries and still nothing. Any idea what's going on?

[tiesfa]

Really nice tutorial man! But what would the visitor see if their browser doesn't support the grid?

[webdesignlayout]

Sir, I Submitted The Form Please Check Sir..

[myztazynizta]

40 minutes and didn't show the single best way to understand and visualize the grid. Seriously?

[Dexterx]

5:22 of yapping about nonsensical stuff, would prefer to get straight in