I mentioned thinking in rectangles in the introduction.

Looking at this representation of our UI, if I was to break it down in areas of interest, I see four vertical bands:

1. The gutter space left of the card
2. The card's side panel
3. The card's main panel
4. The gutter space on the right

These bands spread across the whole height of the UI:

![](http://res.cloudinary.com/pro-tailwind/image/upload/v1673632570/tutorials/Background%20Split/background-split_01-01-02_6_00-27760-these-bends-spread-across-the-whole-height-of-the-ui.png)

Thinking in rectangles and breaking down a UI like this is a great first step that gives us a ton of insight on how we can approach our solution.

In this case, CSS Grid will be an excellent tool for the job!

Throughout this tutorial, we're going to write some _questionable_ arbitrary values directly in our HTML. Soooo... get ready for that.

We _might_ want to consider creating an abstraction later on, either at the CSS level or in the `tailwind.conf` file. 

But... if it's _only used in one place..._ it's probably fine 😉

Let's get into it!

Begin to train your mind to think in terms of rectangles by dividing UI into multiple vertical sections for better understanding.





Thinking About the UI as Rectangles

0:00 There are multiple ways to solve this challenge, but I think CSS Grid is going to work really well here. I mentioned thinking in rectangles in the introduction, so take a look at this Figma document.

0:10 Looking at this representation of our UI, if I was to break it down in areas of interest, I sort of see four vertical bends. The gutter space left of the card, the card's side panel, the card's main panel, and the gutter space on the right.

0:24 These bends spread across the whole height of the UI, see? Just thinking in rectangles and breaking down our UI like this is a great first step that gives us a ton of insight on how we can approach our solution, and it sounds to me like CSS Grid would be an excellent tool to handle all that.

0:39 Now, we're going to write some questionable arbitrary values directly in our HTML, so get ready for that. We might want to think about making an abstraction later at the CSS level or in the tailwind.config file, but if it's only used in one place...All right, let's get into it.

Aligning components in the foreground with decoration in the background can bring cohesion to a user interface. The [Pro Tailwind Calendar App](https://calendar-app.protailwind.com/) shows this in action, where a darker background lines up with the side panel beside the date picker.

Keeping things lined up at different viewports can be tricky. But with the right planning approach and knowledge of CSS features, you'll be taking your UIs up a notch in no time!

## What You'll Build

In this exercise-driven tutorial you will learn how to recreate a simplified version of the background color split effect, as seen in the Pro Tailwind Calendar App.

![](http://res.cloudinary.com/pro-tailwind/image/upload/v1673998793/tutorials/Background%20Split/bg-split.png)

Throughout the tutorial, you'll work with CSS Grid, extend Tailwind by using inline arbitrary values, and calculate sizes with help from CSS functions.

## An Exercise-Driven Tutorial

This tutorial is split into several exercises. Each features a problem that encourages you to take an active, exploratory learning approach to find an exercise.

1. Watch and read the exercise introduction. Each problem contains an embedded editor with a starting point.
2. Try to solve the challenge on your own. **Struggle for a bit**.
3. Watch the solution, where I walk you through how I would tackle this challenge.

All right, let's get started!

Create a decorative background-color-split effect that lines up with a foreground card's side and main panels.

Recreate the background color split effect using CSS in this tutorial. Plan your approach by thinking in rectangles and visualizing the desired result.

Introduction to the Background Split Tutorial

0:00 Hey, what's up?

0:01 In this tutorial, we're going to recreate the background color split effect that you can see in the Pro Tailwind Calendar App.

0:10 You can see the background color split is aligned with the card split between the sidebar and the main panel.

0:17 Before we jump in and write some code, let's do some thinking about our approach. I like to recommend when solving CSS problems, to think in rectangles. Let's spend some time visualizing what we're trying to do.

Create a responsive grid with Tailwind CSS that adapts to screen size by creating a four-column layout that switches to a vertical layout at a 480px breakpoint.

Achieving a Dynamic Four-Column Layout

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.

Split a Viewport into Four Columns

0:00 Your first challenge is to create a full screen grid that splits the viewport into four columns. For now, all four columns can have equal width, and give them a different color so it's going to help us visualize what's happening in the next steps.

Figure out how to replace the grid-cols-[] class with a custom arbitrary four column grid definition. Approximation is fine for now!

Aproximately Line up CSS Columns

0:00 Let me replace grid-cols-4 with an arbitrary value of 1fr repeated four times. This is going to give us the exact same result, but just to show you how fraction units work, if the last one was to be 3fr, you can see it's now occupying half the space of the viewport and think of it as we have six fractions available. One, two, three, and then four, five, six, since this one is three fraction units.

0:23 These fraction units are very helpful to determine width, based on what space is available.

0:29 Let's go back to 1fr everywhere. To start with, we'll use the most predictable width of the four columns, which is the side panel, which is the second column. We have this theme(width.56) value here, and we can use exactly that here in the second column definition. I'll reach for the theme and go for width.56 and hit save.

0:49 You can see that now the second column is matching the width of the side panel. If I had width.80, it would be bigger, just to show you that it works, so let's go back with 56. To be super clear, this would be the equivalent of using the value set by the w-56 class. You can see that is 224px. If I was setting the value to 224px, this would work just the same. Let's go back to the theme value.

1:16 The next width that we can define is the left-side and right-side gutter space. This will change based on the viewport size. Essentially, we want to allocate one fraction unit of the available space to these, like we've played with just before.

1:31 The first column here will stay with 1fr, and the last one as well, will stay with 1fr. That leaves us with the third column here, which represents the main panel. We'll work that out in the next lesson.

1:44 For now, let's try some random value. Let's try 200px. That's a bit too small. 400px. Oh, that's too big. What about 350? Oh, wow, look at this. It looks almost absolutely perfect. Now, you'll find out if I change the viewport size that things kind of break, but that was a pretty good estimation.

2:04 In the next lesson, we're going to work out the exact value that this third column should have to make everything work nicely.

Lining Up Grid Columns with the Card

0:00 We have a four-column full screen grid. That's a good start.

0:03 Right now, we're using grid-cols-4 to define our four columns. Obviously, the columns are not aligned with the card yet, and this is what we'll start working on in this lesson. Even if it's going to get a bit hairy and almost offensive to some, we'll do all our work directly in our HTML.

0:18 We're going to write an increasingly complex, arbitrary value class for our grid columns. We can replace the 4 here with square brackets, which allows us to declare any custom grid template columns value. You can already see this in action in our markup if I go down a bit.

0:33 Here, at the 480px mid-width breakpoint, we define grid template columns with grid-cols-, and then an arbitrary value. This represents the two panels of the card here. You can see we even use a value from the theme. Here we grab width.56. This is what defines this side panel width.

0:50 This class here gives us really good insights on some of Tailwind's superpowers that we can use to prototype our background color splits. We can use arbitrary values, we can pull the theme values directly in the HTML, and we can use fraction units for fluid width.

1:05 Your challenge is to replace this grid-cols-4 class with a custom, arbitrary four-column grid definition. You don't have to be too precise just yet. Approximation is fine for now. Don't worry about responsive adjustments, think in desktop only. All the hints are here in the HTML classes to give you information on what dimensions our grid columns should have.

1:25 Good luck.

Work out how to get precise column widths in CSS. Remember, the alignment may change at smaller viewport sizes.

Calculating the 3rd Column’s Width

0:00 Let's work out an exact pixel value that we can use for our main panel column here on desktop. I'll change the comment to s,ay "Main panel width calculation." We need to do some detective work to figure out the width of the card, and then deduct that space to calculate this one.

0:16 This is our card component, but you can see that the wrapper here sets a max width of 2XL. If I hover this class, you can see that it sets the max width to 672 pixels, so let's write that down to start with.

0:30 Then, we want to subtract from that the side panel width. That width is the width.56 and as we've seen in the previous lesson, that is 224 pixels. If we try to do 672 minus 224, we'll have a value of 448 pixels.

0:47 Let's try to replace our 350 pixels with 448, and that doesn't seem quite right. You can see that together, these side panel column and main panel columns are using more space than the card itself, and you might be able to figure out what's happening here.

1:03 You can see the card wrapper has this extra horizontal padding which comes from this PX-8 class, so the real width of the card is the values that we've calculated here, minus this padding gutter here on the left and on the right.

1:16 We have that PX-8 class here which sets padding left and right to 32 pixels, so in our calculation, we need to also subtract the padding 2 times 32 pixels or 64 pixels. The new value here will be 672 minus 224 minus 64, which is equal to 384 pixels.

1:38 Let's try update this. 384. Hit save, and boom! Now our grid columns are perfectly lined up with the card, and if I make the elements bigger, you can see that it works great. Now, we are not done yet.

1:52 You can see that if I make the viewport smaller, we will eventually hit a few problems where things get out of alignment, and we'll fix that in the next lessons.

Precisely Calculate Column Widths

0:00 We landed on the approximate value of 350 pixels for this third column, which as you've seen is not absolutely correct, and it's now time to work out the precise value for that column. You can do some math in your head or on paper to work it out. Again, all the hints are right there in the HTML.

Learn how to use the CSS calc() function and do the math to compute column widths.

CSS Calc() Function with Theme Values

0:00 Let's declare our math calculation we've done before in a calc function instead of this pixel value of 384 pixels. That's pretty cool that you can use calc functions inside an arbitrary value.

0:12 Just make sure you don't have any spaces in your expression, that would break things, but if you need a space, you can replace it with an underscore like so.

0:19 In our calc function, we'll be very expressive about what we're calculating, just like we did before in the previous lesson. We started with the width of the whole card, with max width 2XL, so in our calc let's add theme and reach for the max width scale, and drill down to the 2XL value.

0:36 If I save this, this is going to be way too big and break our design, but that's a good sign that it works. Next, we subtracted the side panel width, which is width 56, so we'll go minus and another theme function that goes and gets the width, that 56 value.

0:53 We should be a bit closer now. Yep, and you can see that the remaining space that we need to calculate is that padding around the card. That comes from this PX-8 class, so let's go minus one more time and reach for the theme, and this time the padding level 8.

1:09 This is not going to work, you'll see we still have half the padding left, because padding level 8 is applied on the left and on the right, so we need to subtract it two times. You'd think, "Well let's use padding 16 instead," which would work, but that makes the assumption that padding 16 is the double of padding 8.

1:28 It is in the default config, but the user may have changed that, so instead let's go back to padding 8, and here we'll wrap this in parentheses and we will multiply that by 2.

1:38 All right, so let's save. Yep, it still works. This arguably makes this class harder to read because it's longer, but at least we are explicit about how we landed on that third value.

1:49 We take the max width of 2XL, and then subtract the width of 56 and the padding 8x2. Our class is getting sort of crazy, and we're absolutely not done yet. The next thing we'll tackle is how to make things work properly when we get below a certain width between there and the initial breakpoint.

Compute Column Widths with the CSS calc() Function

0:00 Before we adjust our column width to work in smaller screens, let's make the value for our third column a bit more explicit and less magic.

0:07 Instead of just using a pixel value, we will use the CSS calc() function to explicitly communicate how we landed on that value. Instead of using pixel values, we'll reach for those theme values with Tailwind's theme function.

0:20 Good luck.

Learn to use the CSS minmax() function to pass a range for column widths. This allows you to avoid issues with alignment at smaller viewports. 

Creating Dynamic Column Widths Using the CSS minmax() Function

0:00 The MinMax CSS function takes two arguments. The first one represents the min value, and the second one the max value. Let's try and make the third column, this one, respect the actual size of the main panel by wrapping this crazy calc function here inside a MinMax function.

0:17 Here I will go MinMax, and make sure I close the parentheses right here, and we want the range to go from for the min value to the current calc function for the max value. Inside the MinMax here, the first parameter will be zero, and then comma, and we'll pass the calc as the second parameter. Let's save that.

0:36 It's hard to tell if it's working or not because we also have to fix the issue with the first and last column. If we look at the first column, you can see that at some point it completely disappears because 1FR, one fraction of the available space for it, becomes nothing, zero.

0:54 Here it completely disappears, but that's technically not right. Our card always has some padding on the side, on the left and the right, and so here we need to also use MinMax to make sure that we have at least the padding value for the minimum value, and then one fr if this happens to be bigger than the padding.8 value.

1:15 Let's try that for the first 1FR column, MinMax, and the second value will be one FR for the max value, and before that we will want, not zero this time, but theme, padding.8. Let's give it a try now.

1:31 Big screen, all good. Now, this column should have at least a width of padding.8 and not completely collapse. Yep, looks like it's working correctly. We can do the exact same for the last column, this one, wrap it in MinMax with the first value of theme, padding.8, and the second value of 1fr, and moment of truth.

1:56 Now the column should always stick perfectly to the card, no matter what the width of the viewport is. Let's try it out. Shrink, shrink, shrink, and check this out. It's working perfectly until the snap point at 480. Amazing.

Optimizing Column Alignment for Variable Viewport Widths

0:00 Everything's looking great on wider screens, but when resizing the viewport, things start going out of alignment, and it makes sense.

0:06 If we look at the third column, we're calculating its width based on the maxWidth value, and assuming that this value will always be at its max.

0:14 When I resize the viewport, you can see that clearly, that main panel's width is changing. Instead of defining the maxWidth value, what we want is anything between the max value and technically, . We want to pass a range instead of a fixed value, and we can do this with the CSS minmax() function.

0:32 Your challenge here is to wrap the columns with fluid width -- so that's every column except the second one -- inside a minmax function, so you can pass a range that covers all the possible values. For the second column, you can keep the theme width 56, because it's a constant width.

0:48 Good luck.

Do the last bit of cleanup for the project by combining the first and last two columns together with col-span-2 and setting background colors for both groups.

Cleanup The Code and Optionally Create Abstractions

0:00 Let's tackle step one first.

0:02 I'll scroll down to the four column divs. We only want to keep two of these, and because we already have the colors we want, I can put the 600 first, and the 500 second, and delete the other two.

0:12 If I save this, it's going to look a bit awkward. Essentially, we only have two columns now, and the second one here happens to blend with the cyan-500 background color that is applied on the top element up here. Believe me, if that was bg-cyan-600, you'd be able to see the second column here.

0:29 All right, so back to our divs. We want each of these to span across two columns, and so I can give both the class of col-span-2. Hit save, and voila. We have a perfect background split effect, working at absolutely any screen size, until the layout of the card switches to top-bottom, which is exactly what we want. Nice.

0:51 I can get rid of number one, and number two is optional. Me personally, even if this class looks absolutely horrendous, I would not create an abstraction, because right now we're only using it in one specific place, and it's very unlikely that we're going to use that again somewhere else. This will probably live in a background split component and tucked away, and I don't really care about how it looks.

1:13 If you were to reuse that, that's another story. I personally would leave it here but let me quickly do an abstraction at the CSS level to wrap up this tutorial.

1:22 I will cut this class here, and let's write a class that doesn't exist yet called background-split. You can see that now things look broken. The split is top-to-bottom, because we don't have any grid columns defined anymore, so we have a single column grid that stacks from top to bottom.

1:38 In our CSS file, let's create a new component class @layer components, and we will create this background-split class, and here I'll use @apply, and paste all of this. When I save this, the background split should be back in place.

1:54 Yep, it is.

Wrap Up the Project

0:00 All right. Now that we've got our columns working perfectly, let's wrap up this tutorial with some cleanup.

0:05 The first thing you need to do is combine the columns one and two together, and three and four together, using the col-span-2 class.

0:12 If I scroll down, you can see right here, we're using four elements, and we want to only use two of them. The combined first two columns can have the cyan-600 color, and then the other two can have cyan-500.

0:24 The next point is optional, and sort of an opinion, but if you're disgusted by this crazy class name here, you can abstract it away, either in your Tailwind config file or as a CSS class, in the CSS file.

The key thing this tutorial showed you was how to use minmax() and fr to control how columns occupy available space. Thanks for watching!

Outro to the Background Split Tutorial

0:00 You've reached the end of this tutorial. I hope you had fun going through it. This is not your typical use case for CSS Grid, but I got to say, it's working pretty well.

0:08 The key CSS Grid features here, in my opinion, are the minmax function and the fr units to allow columns to claim available space. Thank you so much for your support. Have a great day. Bye.

Transcript

Thinking About the UI as Rectangles

Transcript