0:00 We want a grid that always covers the full viewport, and we can do that with the position fixed, and inset-. We can't see it, but let's give it a color of bg-red-500, and you can see that the element is indeed covering the entire viewport.

0:15 We want to define this element as a grid, and we want this grid to have four columns, so I can add the grid-cols-4 class. Remember, we want the first column to be the left-hand side gutter space, then the side panel of the card, the main panel of the card, and finally, the right-hand side gutter space.

0:33 To start with, we'll just have four equal width columns, which is what we get with grid-cols-4. You can see it's going to repeat four times minmax(, 1fr).

0:43 Before our four columns appear, we need to create elements for these. The first one will be bg-cyan-400, second one will be bg-cyan-500, and then 600, and 700.

0:56 With that in place, you can see our four grid columns, and if I resize the browser, they will always be equal width, but check what happens to our card here. The side panel is on the left, the main on the right, but when we reach a specific breakpoint, the side panel will be on the top. This happens at this custom 480px min-width breakpoint.

1:16 We only want our background color split effect when the card is side-by-side, so we can have this vertical split.

1:21 What we're going to do is completely hide this entire block of HTML below the 480px breakpoint. I can add the class by default of hidden, and then switch to display grid at the min-480px breakpoint. Below that breakpoint, the bg-cyan-500 of the parent elements takes over, and when we reach the 480px breakpoint, you can see that our four column grid appears.

1:47 That's perfect, and we're ready to move on to the next lesson.