 Welcome to another episode of GUI Challenges where I build interfaces my way and then I challenge you to do it your way because with our creative minds combined we're gonna find multiple ways to solve these interfaces and expand the diversity of our skills and today we're building something much more lighthearted than normal. Today is an illusion. Do you see slants here? You should, even though there are none. This illusion is called the cafe wall illusion and I have to chuckle to myself because I'm sure that some artisan showed up to a cafe. It was hired to create a nice wall pattern and they sat down and they used all their tools and were very precise and laid everything out and then their client shows up and tilts their head a little bit and looks at it like hmm are you sure everything is straight and the artisan is like yes yes yes I am very sure it is uh as straight as I've ever made anything and everyone is looking at it like who's gonna tell the artisan that it's not straight and they're all like I don't know this has got to be a scenario that was really funny and everyone just had to like go double check themselves and so that's what we're going to do we're going to rebuild this today just to make sure that it is in fact not slanted because it sort of looks less slanted the more you look at it but if you glance at it it is definitely slanted looking so it's like a fun illusion plus look at it it's a grid it's rows and columns like that's even what I used today so I used grid to solve this and I'm thinking someone out there is going to use flexbox you could probably use gradients there's you know floats all sorts of cool ways to complete this task and I just saw it as a grid it's like a grid challenge plus it's like illusions I really like building illusions they're kind of fun and playful so today we're building a little bit more of a lighthearted grid and we're going to do it live inside of a code pen here in a second but I did want to show some kind of cool things with DevTools here so like I used justify content to do the offsets like to me this first row looked like it was justify content start and see how it's kind of stuck to the left this one's in the center equal on both sides and then this one's on the end so if I pop in here and I just say like display grid it was already display grid you can see it down here but this gives me this little handy swatch and now when I click these buttons it's only going to affect this one little style area and we can see it go between center left or start and right and end and that's how I was sort of visualizing this grid and I mean maybe you're visualizing it similarly or totally different and I think that's what's really fun it's also fun to come in here and like here let's look at the auto columns and kind of pull these up and look at how my illusion starts to break depending on the size of these items so the illusion is kind of a little picky in some fun ways I thought and so once you execute it properly you'll see the crooked lines and if you're doing anything a little off it's not as effective almost like on mobile like if we see this on mobile switch to responsive mode sure pixel five don't care see how it's not quite as effective I'll take off all of our kind of grid overlays too it kind of looks slanted but definitely not as much as it did when we're here right as soon as that pops up you're like it's crooked and then you're like oh let me stare longer oh I guess it's straight and anyway I'm very amused obviously I'm amused in multiple ways by this hopefully you think it's funny too let's pivot though and switch over to codepen I have this gooey challenges crooked lines illusion starter for us to fork I'm gonna go ahead and fork it here in a second but notice it's just got our html setup for us so we have five rows and each row has five boxes that's how I set it up and you can use this starter if you want and then here's our styles but you can again you know do this however it is that you want to I left like the white squares are blank those aren't actual elements like here we'll twirl this open we can see that the only elements in there are the black squares so a row has a background of white the grid has background of gray with some gap we do have some borders on our elements to kind of match that anyway we'll get there let's let's just go build it so here's the setup I'm gonna hit fork and let's get started first a little bit of house cleaning we don't really need to see the html much so I'm gonna pull it up there I'm gonna hit some nice returns here just to get these prepped and ready and then I'm gonna just right off the bat set some backgrounds we're not going to see anything yet but here's background black our row is background white and then our body is background gray background background gray okay so let's start with body though we'll do display grid excellent and grid auto rows because what we want to do is set five rows that are approximately like well here let's say 20 bh we want 100 divided by five is 20 so each of them are that size let's set margin to zero so we don't see those edges all right we've got a little bit of gap we need also and I decided four pixels was nice for this illusion so here's our grid auto rows um with our gap but I think we have a scroll bar we have a little bit of a scroll bar and to get rid of that we're gonna calc on here 20 bh minus four pixels minus that gap and now there we go no scroll bar that's nice I'll pull that out so we don't have any line wraps and there is what I did on the body right okay that seems like it makes a bunch of sense let's check out the row so here I'm going to set display grid and I'm going to change the direction of the grid which it normally flows this row so I'm going to set them to columns and that means um each particular child is going to get set up on the way there so grid auto flow column now we need to give each column a size and so we're going to say grid auto columns so we set the flow direction and now we're going to set the automatic size of each column and I said 9 vw okay so now we have a bunch of boxes here let's add a gap so that we can see some space between them 10 vw sounds right excellent okay and then one of my little secret sauces in here was to do padding inline of 4 vw okay so now we're a little offset from the edges we can rely on that justify content trick that I was showing earlier so let's go ahead and do that right now um and nth child even so this is every even item says like two four six eight stuff like that they're going to be justified content in the center and we're using nesting here so we say nth child three and so every third item we're going to set justify content to end and look at that that's almost our our illusion but you can see that the illusion isn't quite completed and the way to complete the illusion is to come in here to the square and we're going to give a border inline of four pixels of solid gray and now the gap will match the border and the border will sort of complete the illusion so this is how I built this illusion today um there's I know there are so many more ways to do it um and it's I don't know it was really exciting and maybe maybe I don't know if you really do but let's see this in the debugging corner because it's um a little much to look at but it's still fun so here let me scroll over to the debugging corner so here you can see the illusion on each of our different screens I think it's most dramatic on the iPad for some reason I don't know why it's also pretty dramatic here anywhere where it gets larger it seems to be more slanted it's like it's the lines travel along horizontally they just because right like these don't look as crooked they still feel off um but that's not the same as these anyway I hope you enjoyed this illusion today this GUI challenge was much more lighthearted I hope you feel more invited to join this one the last one was just so complex the carousel oh I mean I felt intimidated even getting started there so hopefully this one looks much more approachable I'm looking forward to your submissions watch out for the blog post and I'll see y'all in the next GUI challenge thanks y'all