00:00 In this art directed grid, the logo tiles have been specifically placed in specific cells, and we need to create some sort of coordinate system to be able to recreate this custom placement. The CSS grid lines that we can turn on with the DevTools happens to be an excellent coordinate system. As you can see, we have column lines named 1,

00:19 2, 3, 4, 5, 6, and then row lines 1, 2, 3, 4, 5, 6, 7. Those row and columns are going to help us generate Tailwind styles to place the elements exactly where we want inside the grid. That's really useful because if we take the top left of each style,

00:37 let's, for example, take the Tailwind CSS style, you can see that it starts at the second column line and the third row line. If I take TypeScript, it's going to be the third column line and the sixth row line. By following this approach, we could assign a row and column number value to each logo tile in the logos array

00:56 where it's already defined in JavaScript. Remix, for example, would be 1, 1 because it's the first column and first row. Tailwind here would be 1, 2, 3, 1, 2, 3, so 3 and 3. A great place to do this is the logos.ts file.

01:13 You can see we're exporting this logos array where each logo has a source, an alt text, and an href. What you're going to do here is add a column and a row property to each logo and then have a number that represents the top left coordinates of the grid lines. Now, there are a lot of logos. There are 17, I believe.

01:33 If you get the hang of it and after three or four you get bored, you can check the div tab and go and grab the coordinates in the solution. I don't necessarily want you to manually type all 17 coordinates, but it's important that you get the hang of it and understand how these numbers are found out. Then once you get the hang of it, just go and copy the results.

01:52 I'll see you in the other end.