Intermediate React, v3 Grid & Breakpoints in Tailwind

Transcript from the "Grid & Breakpoints in Tailwind" Lesson

[00:00:00]
>> So what I wanna do now is I have all these images with nice pictures and all that kind of stuff. I'd like to make a nice grid. So let's see how we would do that really quick on results.js. So head to results.js, and here instead of search, what I'm gonna put is instead of search I'm going to put grid gap-4, for like nice gutters between them like nice little spacing.

[00:00:25] And grid-cols-2. And this might blow your mind, but I'm just gonna save that. And I'm gonna hop back over here. And then all of a sudden, everything is in a nice looking grid. And that's really how easy it was. Now that's just the magic of CSS grids, right?

[00:00:49] That's really doing the heavy lifting here. But getting this into the correct mode was, as you saw, very, very simple to do. Now you can see here, unfortunately, my picture of Luna here is not big enough on a bigger screen. And you know there's some users like me that browse at full screen.

[00:01:07] So it'd be nice if we should have at large screens, this should be three, right? So I think what we can do is we can just come back over here. And we can say, hey, at large screens, just do lg:grid-cols-3. And now, At a larger screen, it's three.

[00:01:31] But if I make it smaller, it's gonna pop in two. And hey, I mean, while we're at it, let's just make this grid-cols-1. So that at the smallest sizes, it'll be on one. And then we can say everything after the small break point, which I think by default is 640 pixels.

[00:01:57] Which, by the way, these are all adjustable via the theme. I'm gonna say at the small, we're going to do grid-cols-2. And then everything after the large will be grid-cols-3. So now they come in here, two. And then again it'll pop to one. Pretty slick, right? This used to be so hard to do.

[00:02:28] I don't know if many of you have been in the web development industry as long as I have. But when I was doing this at Reddit, this took me hours and hours of messing with the breakpoints, messing with the widths and the floats, and that kind of stuff.

[00:02:40] It was just a tremendous pain. And now that we have grid, this just becomes unbelievably easy. Flexbox was a huge step in the right direction, and then grid was a huge step further to get the right spots. So there's more stuff on that kind of CSS advanced usage.

[00:02:58] So definitely check out the rest of Frontend Masters' catalog on that. From Jen, yeah, Jen's great. Yeah, definitely take that from Jen. Okay any questions about break points? I mean, what you saw here is more or less what it is. You just put the name of the break point before it, put the colon, and then whatever style you want to apply with that break point.

[00:03:26] That's the whole thing. There's small, medium, large. There's also XL and XXL. Those are all the break points that ship by default. But you're welcome to define more of those and call them whatever you want. When I was at Reddit, we used to call them tall, grande, venti, and trenta, cuz of the Starbucks sizes.

[00:03:47] Yeah, go ahead.
>> Does the order matter?
>> No.
>> Of the class names?
>> Well, it shouldn't, but it does. [LAUGH] In this particular case, if I put small afterwards, no, it doesn't, this doesn't matter. This will work exactly the same way, cuz these will get applied in the same order, so it doesn't matter.

[00:04:12] However, what might matter if you do text-white, or what's a good one we could do here? Well, let's just do it this way. If we do grid, I'm gonna delete these for a second. If I have two exactly competing class names, like grid-cols-1 and grid-cols-3, which one wins?

[00:04:39] Which one wins? It's the one that's lower on the style sheet. And you don't know, right? You're not gonna know which one's gonna come lower on the style sheet. So just make sure that you're only applying one class of the class type, right? So, in my case, going back to results.

[00:04:58] The grid-cols-3 came lower on the style sheet than grid-cols-1. So that one was always applied. This one, the grid-cols-3. But how am I supposed to know that? Or should I know that? You're not supposed to know that and you should know. So just only apply one. In other words, don't depend on that behavior.

[00:05:16] That would be a bad idea to depend on that behavior.