Loading
Background Split Alignment Tutorial (9 exercises)
explainer

Thinking About the UI as Rectangles

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
Loading explainer

Transcript

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.