Check out a free preview of the full Intermediate React, v4 course:
The "Grid & Breakpoints" Lesson is part of the full, Intermediate React, v4 course featured in this preview video. Here's what you'd learn in this lesson:

Brian uses classes to apply CSS grid layout to the Results component. TailwindCSS also includes breakpoints for its classes. Prefixing class with sizes like sm, md, lg, or xl will apply those styles at a specific breakpoint.

Get Unlimited Access Now

Transcript from the "Grid & Breakpoints" Lesson

[00:00:00]
>> Let's do some grid. This is probably the part where I melted my mind the most of like, okay, I get to Tailwind now. Obviously, this does not look good at the moment, where they're just kind of all over the place, right? In 30 seconds, we're gonna make this look amazing with CSS Grid and Tailwind.

[00:00:20] It's upsetting how fast this goes. Okay, so head to Results.js, okay? And the outermost div, instead of search here, we're gonna have this be grid gap-4 grid-cols-2. So just that. Save that, come back over here, and already, this is looking a billion times better. Still not quite there, obviously.

[00:00:59] But three CSS classes got us from hot garbage to just it's like lukewarm garbage. [LAUGH] All right, so let's make it a little bit better, grid gap-4 grid-cols-1. Let's do some breakpoints. So now we're gonna say, at the small breakpoint, make a grid-cols-2, okay, at the large breakpoint, do grid-cols-3.

[00:01:39] So again, back over here, we're at the large breakpoint. So now it's putting three side by side. If we make it smaller, eventually, it'll go to two. Let's close that, and eventually, it'll go to one. You can't tell me that it's not pretty damn compelling, right? I'm just thinking back to my days when I was first writing.

[00:02:09] I became a professional developer in 2011. How damn long this used to take me to do this, right? And now just this, again, I'm gonna put on my old man hand and say I used to walk uphill both ways in the snow, but holy hell, [LAUGH] it used to be so much harder.

[00:02:27] So this is the part where I was like, okay, I get this. With some mastery of flexbox and grid and a little bit of Tailwind CSS, you can do so much so quickly. Yeah, super compelling. So we just did small, this is obviously the small. So we do grid-cols-1 so that by default of 1, right?

[00:02:51] So the default is actually this. And then basically, the small is everything bigger than minimum 640 pixels. Everything large, we skip to medium, there's a medium in there. 1024, everything larger than that, we go to 3. And you can keep going to XL, and triple XL, and things like that.

[00:03:09] These are also configurable, by the way. So there's a bunch of default values for Tailwind. I tend to just use whatever they have as their defaults. But if you're peculiar that at this level I would like this, you can configure that here in your tailwind.css. I think it's here in the theme part.

[00:03:27] I actually don't remember how precisely you do it, but it's there. Results, what else did I wanna say here? Yeah, there's a double XL, so there's no triple. Yeah, so rule of thumb that I just learned from years of writing CSS and maintaining large applications using CSS. I really liked their approach to breakpoints, where they just have set from 0 to 640 is 1, from 640 to 960 is another, from 960 to 1024, whatever, they're set and they don't deviate from that by a lot.

[00:04:10] I used to maintain a website that we had custom breakpoints for everything. And we got so many permutations like, what if this is in this breakpoint, but this one's in this one breakpoint, and this one? It's 860, which is between four different breakpoints depending on which component you're in.

[00:04:27] It's a hot mess, never do that. Just have a set of four breakpoints and call it good. We actually used to call our breakpoints by Starbucks sizes. So there was the tall, grande, venti, and trenta. They do T-shirt sizes, which is more normal but less fun.