Current section: Implementation 12 exercises

Overview of the Cards Grid

In order to have our cards be able to fluidly share horizontal space, we will use Flexbox.

First, we'll remove the <p> tag from our starting point html, and replace it with a an unordered list. The classnames for the <ul> will be flex and gap-4:

<div class="grid min-h-screen place-i

Loading lesson


00:00 A great tool here to share this horizontal space and have some fluidity of the space used is going to be Flexbox. So I'll delete this paragraph and instead we'll have an unordered list and we'll set that to flex and give it a gap of 4.

00:14 And let's quickly add 4 LI items and we'll give them a background color of BG Rose 300, a height of let's go custom with 500 pixels, doesn't really matter. And let's also give them a width of full. Now if we look at this in the browser, we won't see anything.

00:31 An ordered list is completely squashed and the only space it's using is the gap. And so we need to tell the first child, so our list, to use all the possible space with width full. Okay so now we see our 4 cards and let's also add a max-width container so it doesn't use the whole width.

00:49 And we'll use max-width 6XL. Alright very nice and at this point we're going to replicate the same styles for each card. So if we wanted rounded corners for example, I'd need to add this 4 times, rounded 2XL.

01:03 And so really here we should create a component to avoid repeating ourselves or even better here I'll just use a little loop.