Loading
Current section: Art Directed Grid 4 exercises
solution

Adding Grid Coordinates to Logo Objects

Loading solution

Transcript

00:00 Alright so I am in the logos.ts file and in the logos array for each object I will add a column property as well as a row property. So starting with remix you'll see it sits on the top left of

00:13 the art directed grid so the coordinates here would be 1 and 1. So the column is 1 and the row is 1 as well. I'll copy that and then for fly.io the column is still going to be the first column but the row is going to move to row number 2. So here column 1 row 2. Let's do one more to make

00:33 sure that everyone understands so we'll take here the prettier logo. So prettier is going to be in the last column 1 2 3 4 5 and then the row 1 2 3. So column 5 row 3 and so I think you get the

00:46 hang of it so I'll do a little magic trick and jump into the future. Wow it works! We now have all the coordinates in place and we are able to use these in the next step to style the elements

01:02 and place them in the columns and rows as we want. Let's do this next.