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.

Give each column a different color - that'll help us visualize what's happening in the next steps.

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.

The first thing we'll do is create a grid that always covers the full viewport.

, just to confirm that we are covering the full viewport:

As seen in the intro to the challenge, we are looking for four columns: a left-hand side gutter space, a side panel of the card, a main panel of the card, and a right-hand side gutter space:

 classes. That will make each column have an equal width.

 shows us the actual CSS applied with the 

We need to create the elements for these columns in order for them to show up.

To do this, we'll add divs with four background colors: 

These columns will remain the same width, no matter the size of the browser.

However, when the browser reaches a custom 480px breakpoint, the side panel will move to the top and the main panel to the bottom:

We only want the background color split effect when the card is side-by-side so we have the vertical split as seen in our planning diagram:

In order to achieve this effect, we'll need to hide the entire block of HTML below the 480 pixel breakpoint by adding the 

Here's what is looks like when the browser is less than 480px wide:

And the background columns show when the browser is wider:

Perfect! Now we're ready to move on to the next lesson.

Achieving a Dynamic Four-Column Layout

 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.

 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.

 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).

 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.

 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.

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

 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.

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

Split a Viewport into Four Columns

 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.

Aligning components in the foreground with decoration in the background can bring cohesion to a user interface. The 

 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!

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.

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

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.

Watch and read the exercise introduction. Each problem contains an embedded editor with a starting point.

Watch the solution, where I walk you through how I would tackle this challenge.

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

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

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

Lining Up Grid Columns with the Card

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

Precisely Calculate Column Widths

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

CSS Calc() Function with Theme Values

Compute Column Widths with the CSS calc() Function

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

Optimizing Column Alignment for Variable Viewport Widths

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

Wrap Up the Project

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

Transcript

Split a Viewport into Four Columns

Transcript