STOP The CSS Grid Confusion - 2 Ways to GRID!

Go to www.get.online to search for your (dot)ONLINE domain now!
-- Hey all, today we're going to cover the CSS grid, and specifically how to structure a layout using the CSS grid implicit and explicit methods!
Codepen (not responsive, maybe you can make it responsive using media queries and the CSS grid properties!?):
codepen.io/des...
Let's get started!
- - - - - - - - - - - - - - - - - - - - - -
Subscribe for NEW VIDEOS!
My site: designcourse.com
My personal FB account: logodesi...
Coursetro FB: coursetro
Coursetro's Twitter: / designcoursecom
Join my Discord! / discord
^-Chat with me and others
- - - - - - - - - - - - - - - - - - - - - -
Who is Gary Simon? Well, I'm a full stack developer with 2+ decades experience and I teach people how to design and code. I've created around 100+ courses for big brands like LinkedIn, Lynda.com, Pluralsight and Envato Network.
Now, I focus all of my time and energy on this channel and my website Coursetro.com.
Come to my discord server or add me on social media and say Hi!

[@DesignCourse]

Omg I'm at 499k. Much excitement I guess? Help me hit that mark by subscribing if you enjoyed this!

[@nilen]

I need to make a 3 column website 2 column, how?

[@jeromeclaveau3519]

Well deserved, thank you for providing quality educational content on a regular basis.

[@Mark33090]

I can't subscribe now to help you reach 500K, sorry... because, I AM ALREADY SUBSCRIBED OF COURSE!!! Your channel rocks!!!! You make it look so easy and explain everything well... A huge thank you for sharing your knowledge.

[@pikasingh]

Hi Gary, Your channel is perfect match for my needs. As a student I have many questions about FrontEnd and your videos answer them all. Please make one video on making complex template through Bootstrap. It help us to understand the complex part of the development. A Bigg thank you, Gary. 😊

[@torickjdavis]

@@nilen Using CSS Grid you have a few options. You can define grid-template-areas or use ideas shown in the video with numbered columns and rows. Then, at a break point (from a media query), you can redefine the grid in similar ways. Hopefully this helps!

[@rudrapratapsinha8880]

CSS grid is revolutionary.

[@boukhadc]

Rudra Pratap Sinha from 2012

[@MrAndi1281]

@@boukhadc hmm... browser support was just catching up in the last two years! so in 2012, even though it existed, not a lot of support was there.

[@boukhadc]

MrAndi1281 yeah 2017 was the year we could say it is supported you are right.

[@ne9835]

Yup!!

[@Franiveliuselmago]

"get the diabeetus in 1 week wth our candies" lmao

[@Wendellpk123]

HAHAHA

[@heavydirtysoul1491]

they are way too sweet, i believe

[@fsantos1595]

Hahaha

[@adnanamin3666]

Finally 80% grid confusion is solved! Thank you so much!! :)

[@andreszabala9178]

Which is the over 20%? jejej

[@ashleyhoward14]

Wow when I feel like I've learnt a lot about CSS, I find this. Honestly is there anything that CSS can't do?

[@abdelrahmankhalil]

previous sibling selection

[@ashleyhoward14]

@@abdelrahmankhalil well there we go

[@byc090020]

hack NASA

[@rakibhossain9135]

@@byc090020 hahhaaha... great

[@aiSage48]

@@byc090020 We can use HTML for that.

[@jesusmanuel3697]

I've ended my relationship with the bootstrap grid(and general) since I met this

[@angiev1840]

I've done several grid tutorials and this one really helped the most. You can't set the css correctly when you're just learning grid and more time is spent just giving you a list of attributes. The illustrations made all the difference for me and I'm ready to design my grid now. Thanks!

[@cwinter90]

I use grid template areas whenever I use grid. It makes shit super simple.

[@AccessCode101]

Quick question... when would you use flexbox then? For example, for a single page application, wouldn't you use flexbox instead of grid?

[@cwinter90]

@@AccessCode101 I pretty much only use Flexbox to make containers space evenly. So pretty much I only use flexbox to justify-content: space-between. Everything else I've had to do for my job I haven't had any problems using grid. I deal with a lot of pixel perfect layouts in my job where all spacing is exact down to a few couple pixels. There really isn't much flexing going on. I just prefer to use grid as often as possible. I absolutely love grid template areas to move things around especially since it kind of gives you a visual while typing it out. Ever been to a fast food place and they have digital menus instead of paper? (In the US) Well, that's my job. Large corporations generally like everything on their screens exact and I've found grid to be the easiest way to accomplish that personally. As for a SPA I don't see how any of that differs when using React or Vue or Angular or whatever else. It all updates dynamically. All the CSS is scoped per component and you can have grids inside of grids inside of grids without any problem and with the fractions, min-content, max-content or anything else you can accomplish whatever you need with grid.

[@cwinter90]

@@AccessCode101 For example SPA main grid for your overall website layout. Then with a section in the middle that updates inside of that section in the middle you can use grid template areas to layout all of your individual components like forms or whatever else. Form grid: grid-template-areas: ". title ." "formContent formContent formContent" ". . submit"; In formContent you just spit in all your divs and each div contains inputs. Input grid: grid-template-areas: "label input" . validationCheckError"; It kind of gives you a visual representation of how each component lays out just looking at the CSS. The validationCheckError would just have either a fixed height so there is always room for it whether or not it's needed or you could use min-content on that row's height and with an dom if statement it only takes up space if it is actively stamped to the DOM.

[@cwinter90]

@@AccessCode101 short answer is you can nest multiple grids inside of each other. I found this that may help explain maybe? gridbyexample.com/examples/example21/

[@JoeMilbachOnline]

Be careful what order you place your HTML elements. Screen readers tend to rely on the actual placement of the HTML tags and not how it is rendered on the page after css. You do a great job I enjoy watching your videos. Cheers and keep up the great work.

[@viktorklymets6630]

you also can use img instead css background and instead background-size use object-fit property for image

[@johndoe2233gh]

Get a screen recorder that can transition between 2 displays. It's really annoying having to switch between programs on only one display.

[@canersanli]

Great content! How to make it responsive tho?

[@muteza]

pro tip: cut the background music

[@jamesbrooks9321]

PLEASE

[@VinJapanGuitarShop]

YES!!

[@carolmckay5152]

The order of the html elements matters VERY MUCH in regards to accessibility a11y. Please research this as you are teaching people bad habits.

[@Edwardtonnn]

Agreed. Accessibility is important and we should always use best practices. Structuring your html from a top to bottom way is best - nav > content > footer etc.

[@goldenfish31]

It definitely does, this website would suck accessibility wise. I mean, the header at the bottom, what? Nonetheless, this video shows the basics of grid, which can be confusing sometimes. After all the title is about CSS Grid, but yeah, a little a bit of best practices here and there wouldn't hurt. It doesn't make this video less interesting.

[@schoolofsa]

If you "know" this stuff why are you even watching this?

[@carolmckay5152]

@Mario Ah, the bad old fashioned way of things - "do as I say, not as I do" *SIGH*. Do we dare hope they will manage to sort this out in 2020?

[@carolmckay5152]

@@goldenfish31 Yes, useful video css wise, misleading html wise, we all have room to learn more.

[@felipewwa]

Can I use this type of grid as a template in Adobe Xd or another software without knowledge of programming? Do exist any other websites grids?

[@SuperArnie]

Row/column definition by start and end line is easier when you think of the numbers as coordinates. Example kzbin.info/www/bejne/j3-lXn16bM6DpbMm49s You say “yum starts on line 3 ends on 4 in terms of columns and starts on line 2 ends on 3 for the rows.” Then you edit every 2nd number in the code. My suggestion: Just think of the grid lines as coordinates: “yum starts at 3/2 for the left upper corner and ends at 4/3 for its lower right.” Type the coordinates in this natural order and you get the same result without twisting your brain into knots ;-) That said: Great explanation especially concerning the management of each tracks dimensions Just began using grids and sponged up every KZbin video on this, topic. Yours is definitely in the top tier.

[@darkxiao]

When defining columns/rows with the FR unit, is there a best practice or convention that says the sum of those FR units need should be even? I noticed for the columns you chose 1fr 1.2fr 1.5 fr (equals 3.7fr total instead of 4fr for example). Thanks!

[@neutralface]

The sum of 'fr' -values tells how many frs is 100%. Total of 3.7frs is no different than total of 4frs since both equal 100% of the width . So the sum of all fr's shouldn't matter, only the individual frs does (e.g. *1fr* / 3.7frs = ~27%, and *1fr* / 4frs = 25%).

[@salemouail627]

use mediaquery to make it responsive just swap places;)

[@butterchoco4538]

This is absolutely madness !! Can you please make a video about animation in using css grid ?? For instance, I wanna make wipe transition to reveal the content.

[@COMMANDERFOX31]

Thank you for these amazing videos. They solve a lot of confusions and misunderstandings for me. You are much more helpful than most of my lazy profs!

[@DesignCourse]

I love hearing that (the part about the lazy professors 😂)

[@jamesmassa1999]

This video is so befuddled, just fast forward the first 5 minutes, after that not much information.

[@elg281]

Stupendous performance 👏

[@petarkolev6928]

Yet another amazing video!

[@nikoslouzis1888]

i dont know how you do it , but bro. YOU EXPLAIN EVERYTHING LIKE YOU ARE TALKING TO 10 YEARS OLD KID, AND IT FCKIN WORKS!!!!!!!!!

[@endeavor4299]

Your content is amazing and really fun to watch! You've definitely earned my sub =)

[@DaggieBlanqx]

Gary Simon: ""Hopefully you enjoyed that..." Me: "Ënjoyed is an understatement... I loved every bit of it, especially while coding along, and pausing to wonder why I cant like the video multiple times!"

[@dubble.]

So, with this, how would you proceed to make the layout responsive? I imagine you could use media queries to line them up in a single column, but is there any other way?

[@KriszX12]

At the point where you introducing the grid-area and telling its a bit confusing. Just think as coordinates on the grid! First corner is 3-1 the second is 4-3. You just write in 3/1/4/3 format and the computer just fills the fitting square. Thanks for this video, this is a very easy way to grid. My teacher at Uni showed us a very bad, barely useable, confusing method for grid. And it was looong...

[@nezeeyf]

Before I even watch this video I will admit, "I am CSS confused"... I've watched several videos already and I'm counting on this one being my last... 🙏🏼

[@StrangeIndeed]

Maybe that's a stupid question, but why do we have to put slashes between arguments in grid-column etc? Normally, we split the arguments with space, but this specific attribute requires slashes. Why is it different? EDIT Okay, I've figured it out. Basically you can name grid lines e.g. 'col-start 7'. There can be a space in the name, so we can't just use space to split arguments, so we have to use something else. That's the why of the slashes

[@mawulijo]

How did you know I was watching your other CSS grid videos? I simply can't believe the impeccable timing of this video. Thanks Garry

[@DesignCourse]

I know because I'm watching you... I watch all of my subscribers -- it's a reciprocal relationship. I know a guy at the NSA.

[@mawulijo]

@@DesignCourse Can't say I don't believe you. Can I? Can the NSA guy be a mutual friend? :DD

[@spiritosa0123]

Thank you very much. Love the visuals!

[@darkmift]

Grid nowadays are a vital skill

[@SteveUrlz]

Gr8 vid Gary. I can't help but wonder, when you have the explicit grid declaration, then how can one make a grid item fit those predefined areas, let's say height wise, how to make the "candify" text fit the first two "main" areas height wise? (25:40)

[@ratchthps]

This is one of those things where you look at several tutorials and see multiple that are not as helpful for whatever reason, maybe you feel like they aren't explaining things well, or they are going about things in this roundabout way, or skimming over some crucial aspect or whatever, or they assume some prerequisite knowledge you may not have, and it just makes it hard to understand 100%. Then you watch this one and it just clicks so much easier like -- "why didn't people explain it this way to begin with." I guess the usefulness of tutorials can vary for lots of reasons including your skill level, but this is the one that helped me the most. Very simple and to the point and easy to follow and I now understand enough about grids that I can immediately begin using them.

[@HansLemurson]

What kind of savage made the grid-column line numbering start at 1 instead of 0? The columns? Sure, those could be numbered in any order, but the lines are boundaries. The leftmost line that nothing is to the left of? 0 is the only number that makes sense for that!

[@dharmang]

Man getting some real css grids help from youtube these days. Not that i dont like it... 👍🏻

[@janekkowalski1416]

Great content Gary, thanks! I watch your videos for the content and in my opinion the background music is really annoying and your voice blends in so I really have to focus in. Please consider not to put music in your videos. Thanks!

[@SvartAdamSolander]

Very distracting background music! I would think that a lot of people in this business watches youtube at increased speed when watching videos about technology and the music messes up that as well.. :/

[@JulienReszka]

you probably should make you design smartwatch-first

[@liamdoran2257]

I can follow this fine, but when placing the image it goes wrong for me, The image doesn't show up. I have an image folder, with an image, I've even tried linking an image with a URL!

[@mad_coder]

2.45 - three rows, not columns. Very good videos! Subscribed

[@aevo1526]

Why don't you use table tag in html and add an attribute of cellpadding=0 and cellspacing=0 then use css for centering the table and adding background color? That's the easiest way

[@kasirojkt9245]

Ok bro. You make grid look much easir bcs you defined 1st the term. Then you construct it in moderate speedy mode😁 I will try this. I wonder if grid methode has another advantage beside it simplicity compare to other methode in designing area

[@hardikpatelhdhe]

Well that's an amazing tutorial. but how to make this same grid responsive? Won't it give a headache to change that shit at breakpoints 🙂

[@OnlyADownstat]

remember doing layouts with tables a bit like this..(rowspan, colspan).lol

[@Digmen1]

One thing I really don't get is that these new semantic elements in HTML5 seem to be very interchangable eg main, section and article don't seem to me to have any special properties. Its all very confusing.

[@MarcCardwell]

i'm a long time old print designer, trying to be more employable. what are the advantages of using XD instead of AI or Pshop? i know it can animate transitions between pages, and that looks nice, but does it do anything to make it easier to code?

[@dhebejdbd]

When I used other method than GRID I felt like borracho , now I am like Macho! thanks

[@danielelgressy]

Thanks for the video. if there is a div that sometimes exist and sometime doesn't and I'm using grid, the div will be there without the content. comparing to flex box if the content is empty the rest of the elements will take over the empty space. is it possible to make it happened using grid as well?

[@2SaltyRecipes]

And how would you make this responsive? Using media queries?

[@ISOnepal]

U did great boss. May Pasupati Nath bless u. I am subscribing ur channel.

[@3mweb]

Hi, what's the name of the tool used in the tutorial to draw the grid? Thanks for all !!!🙏

[@farn451]

dude, you're an awesome teacher. i've been using wordpress for years and back in the day i used to code html and css but got lazy. recently been trying to get back into front end devlopment and your tutorials are the best i've found. keep up the good work. :)

[@dezinhtang]

it is possible to make an overlapping layout by using grid-template-areas format??

[@briankgarland]

Good tutorial. Maybe take a mobile first approach though?

[@md.sumonbiswas2272]

Thanks a lot, simon. I had trouble a long time with this. Finally I got it from you brother

[@marcograzer4066]

Super Video! Ich habe für 2,00 CHF Applaus gesendet. 👏

[@StefanoKocka]

if you have trouble with grids, try this grid builder: grid.layoutit.com/ it helped me a lot in the past.

[@JorgeHernandez-kh4bm]

Is there any video showing how to start on mobile layout without grid and then using grid for wider screens?

[@nwxxzchen3105]

Two points, refer grid area by geometry, refer grid area by area name. Thanks.

[@AccessCode101]

So grid is better than flexbox? What's the difference?

[@antonboio]

Look at the size of your arms, bro. Your PC is probably too scared to ever freeze up on you.

[@alex-suciu]

css grid is awesome 😍 but it's not working in IE 😅😆

[@adanrodriguez2124]

Is that grid layout available on any other browser or only on Firefox?

[@techwithkip4856]

css grid not use on this page, this the message i'm getting.Someone kindly help.

[@choralguardian3442]

Finally understand grid pretty well. I’m learning web development and none of the courses I’ve done cover the topic very well

[@bkrsaleem8]

Dude you are simply the best! greeting from Austria :D

[@Mischu708]

Cool ibanez you got there(rg370 is it?)

[@alexgrinberg1888]

Amazing course. Thank You.

[@JohnNiemand]

>2 grids 1 UI I wonder if that's a reference to something

[@MauroAmador]

excellent explanation friend, with your videos it has been easier to understand CSS Grid, now to continue practicing and see how to apply responsive design, a question what software do you use to make web prototypes?

[@Colorbowl80]

Finally got grid system...thank you

[@tenaciousanddumb]

Where should i pay for teaching me this magic?

[@TheeMelloMan]

Thanks for telling me about firefox

[@jflo911b]

Anyone knows when to use minmax() in this exemple ? Or we don't need to use it ?

[@scientificshiv]

Do you have a channel where you play guitar? Would love to see that.

[@neoTriny]

that really helped me, although it's a little messy. But, that's what make things real

[@subhanassiddik6320]

Css grid come.i guest,we dont need framework.

[@rubentorrealba]

Excellent, clear and direct. Question: why didn't you use the BEM Methodology and SASS?

[@Jake-xs4mx]

Unnecessary for such a small project.

[@solusquinto3086]

Fantastic Video! Thank you!

[@sonoftroy8572]

The way I use css Grid, I only use it for small adjustments for positioning and alignment , if your markup is solid you won’t have to bloat the css file with all the grids rules

[@onebacon_]

Bruh u cant really get vertical alignment without grid and without "misusing" other functions. Css grid makes the mark-up way Cleaner and easy to read

[@sonoftroy8572]

oneBACON, yes you are absolutely right ! And I only use css grid for vertical alignment and horizontal alignment, use case would be a navigational bar or aligning cards in a row for the exact lvl of positioning

[@nicklawrence7244]

@DesignCourse First off, thanks so much for this! Definitely gonna save us all quite a bit of time and headache during layout! Question: would you recommend using media queries for redefining your grid at breakpoints or is there another method of wrapping/resizing that you would recommend with this particular layout method? Thanks again so much, keep up the exceptional work! :D

[@maggieli4116]

can you tell me how to create a responsive from this video?

[@gacacg4703]

Watch it at 0.5x speed and sound like he drunk

[@fayozhons]

Thank you very much, it really helped me a lot! 🎉

[@sircasino614]

Why can't XD just code this for you?

[@HarpreetSingh-cz2zh]

How to take the column and row approach if you have a full-screen background image? Top is nav, full-screen bg img, and CTA with text at the bottom? Thanks!

[@Allformyequine]

This has become my bible for grid tutorials! Thank you for rockin it !!!

[@karatejutsu]

Can you do grid Vs flexbox please

[@sarthakmalhotra7912]

Wow, didn't know that it was this simple. Excellently Explained. 10/10 would learn again.

[@rickucherian]

Hi Gary ! This video is very informative to those who want to know about how css grid works, Can u pls do another video on how to add content within the grid with grid gap column gap etc , Adding text images etc...sub grid it seems is still not supported....So flexbox properties within a Grid layout...That would be more helpful 🙏🙏

[@mahdifalahati4181]

finally can i use grid display ? internet explorer,chrome,firefox version before 2017 not support grid display

[@ritter06]

Perhaps someone could help with my problem. I want to center my layout, however, I am using align-item:center on the wrapper div, the layout crashes oddly. :s Need you more informations for what could went wrong?^^'

[@Growlboy1986]

Naming grid areas is much easier than navigation in line numbers.

[@alessandrospiridigliozzi7943]

the question I have is: how do you put the content (text, h1, p, etc.) inside those boxes/cells? For example, the name of the site ''candify'' fits perfectly in the 1st cell in the top-left corner, while the ''majorly awesome candies'' h1 fits in the cell below... and these are all part of the same div .main

[@bobbysilver272]

21:02 Line 38 should have a class of candy and not header.

[@chicox3me]

Hey, Garry, isn't this only css grid's explicit behavior in the video? Implicit behavior is about creating rows and columns on the fly (with grid-auto-rows, grid-auto-columns, i think)

[@StrangeIndeed]

13:45 random fun fact - you can highlight the word the cursor is currently on by pressing Ctrl + D. Pressing Ctrl + D again highlights the next instance of the highlighted word. So in this situation Gary could've just pressed Ctrl + D twice and written the word 'row'. I know that it seems like knowing this doesn't save that much time, but it adds up c:

[@emilchapchakchi8593]

Wow! No shit I enjoyed it! Thank you!