00:00 You can place an element in a specific cell of a grid by using the grid column start or grid row start CSS properties. In Tailwind, you can use col start and so here for example you can see 1, 2, 3 and row start and let's go with 3 as well. And so this is going to make the element start

00:18 at the grid column number 3 and start at the grid row number 3 as well and it's going to by default span for one grid cell only but you could also say col span 2 if you wanted it to span across multiple grid columns. Here we'll keep it to 1 and we're going to look at what happens in

00:35 the browser but I want you to imagine it before we switch to the browser. Every element in the loop we are inside this loop here is going to be placed at the third column and row and span across one grid cell. So if you can visualize this that's right every single li item is going to be placed

00:55 in the third column and third row in the same spot. So obviously that's not what we want we want to dynamically place each logo where it should go and this is why we've defined our coordinates in the previous step. In this exercise we're going to use the style lookup directories pattern.

01:12 We have two empty objects here a column classes lookup object and row classes lookup object. This is using TypeScript this might be scary don't worry you don't have to write any TypeScript it's just here to help you and basically this is going to create a lookup object that has one key

01:30 for each possible column value in the logos so it literally looks at the logos array and grabs all the possible values for the columns and as you can see it can be 1 2 3 4 or 5 and here for the

01:44 row classes that's the same it can be 1 2 3 4 5 6. Now the object is empty but it's not complaining because of this ts expect error comment here. If I remove this you'll see that instantly TypeScript is going to say hey you're missing values 1 2 3 4 5 you need to add them and so in this exercise

02:02 you're going to populate the column classes and row classes lookup directories and then use the classes there is a little helper function here little clsx this is not the clsx library it's like a minimal implementation that lets you merge together a series of strings of classes so for

02:21 example here you can use clsx and have some classes comma some more classes and they will all be combined together and so what you're going to do is use the values in the lookup objects here and by using this little helper you're going to in the list item where we were trying to do

02:40 dynamic styles you're going to compose the correct column classes and row classes together based on the props received in this logo object you can see column 1 column 1 column 1 row 2 etc. So that sounds like a lot but there's a lot of hand holdings for the comments and

02:58 the instructions and I'm sure you've got this. Good luck!