Aproximately Line up CSS Columns
Set the Arbitrary Value
Let's start by making all columns equal width by setting the arbitrary grid-cols value to 1fr repeated four times:
<div class="fixed inset-0 hidden grid-cols-[1fr,1fr,1fr,1fr] min-[480px]:grid">
This is going to give us the exact same result, as seen in
Transcript
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.