How to Build this Slick Device Grid Using Modern Web Design Techniques

Hey, what’s up everybody? Welcome back to the channel. Let me show you this layout real quick.

We’re going to focus on building this in today’s training. It might look kind of simple. You’re

like, Kevin, I’m just going to throw five images in there and call it a day. I’ll just change the

height of them and whatever. No, no, no, no. It’s not how we’re going to do this. First of all,

each of these devices that you’re looking at is three separate images. The shadow, so I’m going

to highlight if I can with my mouse, this shadow area on every device. Okay. That’s one image.

Then you have the frame of the device, right? That’s actually a second image. And then you have

the screen of the device, which is a third image. So we need to figure out how we’re going to layer

those and position them one on top of the other and how we’re going to manage their sizes. And then

we’re going to have to figure out how to use Flexbox to its full potential to get this nice

rhythmic kind of layout where you have the center one is a little bit bigger than the others. And

then the two on the side are perfectly vertically aligned with the middle device only to have the

ones on the end perfectly aligned with the bottom of the container. So there’s some Flexbox stuff that

we’re going to work on. That’s going to be fantastic. And then we might even turn this whole thing into a

component. There’s some, there’s some accessibility things to keep in mind here. Let’s go ahead and

dive in. It’s going to be one of those trainings where you learn a lot in a single training in a

relatively short amount of time. So hit the like button, drop a comment below, and let’s go ahead

and dive in. I’m going to pull up etch real quick, and I’m going to add a section to the page. We’re not

doing the entire hero. We’re just doing this like device grid. Okay. So I’m going to say device grid.

Oh, I don’t want it to be all caps device grid. And then I’m going to add a div to this,

and I’m going to call this div my device. And what I’m creating is like a little grouping context

so that I have a single thing. Cause this is a one device as we discussed is made up of multiple

images, right? But I want one kind of grouped con context to be able to drag around or insert or save

as a component or whatever. So I’m just using a div and I’m going to call it device. And then I’m going to

drop three images in one, two, three, and I’m going to call this my shadow. Remember we said the shadow

is one image. Then my screen is actually going to be sandwiched in the middle. And then I’m going to

have my, what are we going to call this? How about we call it a frame? So I’m going to have my frame.

Now the shadow and the frame are just purely decorative here. They don’t really mean anything.

I don’t really want them to be interpreted by screen readers or anything else. So I’m going to

put a role of none on both of these. And I can do this with etches, quick add attribute bar. So command

enter, and I can just put role equals none. I’ll copy that to my clipboard as well. And on the shadow,

I can do the same exact thing. And you’ll see it putting that in the HTML down here. I also don’t want

my mouse or anybody’s mouse really to interact with those things. So what I’m going to do is let’s,

let’s add some classes first. So I’m going to hit command enter. We’re going to call this device.

I’m going to right click, create BEM classes. Now all of these have classes, which means on device

shadow, for example, I can say pointer events, none. I’m going to copy that to my clipboard.

I’m going to go to the frame and I’m going to do the exact same thing. And now the screen is really

the only selectable or clickable element inside of this device. So I’ve got my device. I’ve got my

three images. All I need to do now is get some sample data in here, right? So my shadow, I’m going

to click here. I’m going to grab my shadow. Say, use this media, my screen. I’m going to click here.

I’ll just choose. How about this one? Use this media and then frame. I’m going to click in and I’m

going to use this frame. Now the frame is the borders of the device, but the middle is cut out. Okay.

The middle is cut out. This is like a transparent PNG. You should probably use a web P for this

instead of a PNG and get the correct device size and all that. I’m not worried about performance

right now. That’s something for you to worry about. When you execute something like this in real life,

I’m just showing you how to do the CSS side of this and the layout side of this. Okay. So I’m going to

hit use this media and you’re going to see that I have a shadow, which looks kind of funky,

but it’s all going to work out. Don’t worry. And then we have the screen of the device and then we have

the device frame itself. And so what we want to do is we want to position all these things

kind of like in a layer. All right. So we have a bottom layer, which is going to be the shadow.

We have a middle layer, which is going to be the screen. We have a top layer, which is going to be

the actual device frame. So the way I’m going to do this, I want the actual frame to be, to control the

dimensions of all of this, because it does, that’s the thing that actually looks like the device.

And the screen and the shadow are just going to be a size relative to the frame. Does that make sense?

I think that makes sense. That’s probably the best way to describe it. So shadow and screen are going

to be sized relative to the frame. The frame is going to be the actual thing that controls the size

of what’s going on. Okay. So the way that I’m going to do this is I’m going to go to device and I’m going

to position this relative. So I’m going to say position relative right here. And you can see over

in our panel, I could have done it right here as well. But you know, I prefer to write CSS, but you

can do it in the panels if you want to do it in the panels. Position relative is going to allow me to

position some of these things like the shadow and the screen. Absolutely. Okay. Which is going to take

them out of the stacking context. And it’s going to, it’s going to make all these things like mesh

together, kind of like a sandwich. Right? So I’m going to take the shadow where I have pointer

events at none, and I’m going to say position absolute, and I’m going to say width of a hundred

percent. So, Hey, be a hundred percent of the device size and then height be a hundred percent of the

device size here as well. And I’m going to say that, uh, I want to position it top and I want to position

it left zero. Okay. So just anchor it to the top left corner. Okay. So there we go. We see,

we have a shadow is behind our screen right here. Now we want the screen to essentially do the same

thing. So we’re going to say position absolute. We’re going to say width of a hundred percent.

We’re going to say height of a hundred percent. We’re going to say left of zero top of zero. Now

we’re going to change these position coordinates in just a minute, but as you can see, everything is

actually stacking on top the device frame. I want to do width of a hundred percent and we can do height

of a hundred percent in here as well. Okay. And what I want to do now is kind of put two devices

in here and I want to work on my flex layout a little bit just to get it started so that I can

start to see these things side by side and in their normal sizing. Okay. So I’m going to go up here to

device grid. I know I’m moving a little bit quickly, but you can pause and rewind if you need to. Um,

I’m going to, I’m going to select my device grid. I’m going to hit command enter, and I’m going to say

device grid, even though I’m not using grid for this, I I’m just going to call it a device grid.

If you want to name it something different, you’re totally free to do that. I’m going to say that

this is display flex flex direction of row. And that’s going to put these things side by side,

which is fantastic. And now if I duplicate again, it’s going to put three of them. And if I duplicate

again, it’s going to put four of them. Okay. This is fantastic, right? The way flex works is it doesn’t

wrap by default. And so you’re just going to, if you can put a million in here, it’ll just keep

making them smaller and smaller and smaller and making them fit side by side. I’m going to show

you a trick to manage where the middle one can actually be bigger than the others. And you don’t

have to mess with its height or dimensions or manage the dimensions of any particular device in here.

It’s really, really, really nice. Okay. However, we’re not quite there yet. Obviously this is not

looking like a screen inside of a device with a shadow. I put dimensions and sizings and all of

that stuff just to get everything to stack and be the same size as each other. But now we have to do

a little bit of fine tuning. Okay. The screen, if you think about the screen, it can’t be as big as the

device. It has to be like inside the little frame of the device, right? Okay. So what are we going to do

here? Well, I want to take the width of a hundred percent and just subtract what I think is the kind

of the size of the device frame. So I’m going to say minus 30 pixels. And then you’re going to see,

it’s asking if I want to auto wrap, I’m going to hit tab and it’s going to auto wrap that for me.

Okay. I’m going to do the same thing down here, minus 30 pixels on the height and we’ll auto wrap that.

And now you’re starting to see the device, right? You’re starting to see the device.

What I’m going to do now is I am going to, and really the, the device should be on top. And because

I position these absolutely, and the frame is not positioned absolutely where we’ve messed up the

natural stacking context a little bit. And so what we can do is we can position this, this frame

relative. And now it’s going to also like rejoin the new stacking context, I guess I should say.

That’s a little bit technical. That’s a little bit hard to understand, but it is what it is. If you

position the others, absolute, the frame, which comes last should be on top, but it’s not until you

position it relative. And then it will finally fall in line with the rest of them. Okay. What I need to do

now is I need to take this screen and I need to actually position it in the center of everything.

And so what I’m going to do is I’m going to actually remove left and top, and I’m just going to say an

in set of zero. And now I can actually use tricks like margin inline auto and margin block auto. And

that’s going to center on both axes right here. In fact, can I just do margin of auto? I can. You could

just do margin of auto. You could just shorten it up. You could, you could just like, that’s a lot less

typing, right? Okay. So margin auto, put all of that in the middle. And I’m seeing that this is pretty good.

The corners of the, of the screen are kind of poking out here, but all we have to do is round those.

Okay. I’m just going to use a little bit of a magic number just to cut that off because the device is

being rounded. It makes sense that the screen should be rounded as well, but this is looking really good

now. Um, and what I want to do is I want to put another one in here. So I’m going to grab one of the

devices. Actually, you know what? I don’t want to do that yet. I want to make it a component. Why don’t we turn

this into a component? So we’ve got our device here. I’m going to go ahead and right click, create

component in, in, uh, in etch. And now my thing is a component and all I really need an attribute for

is the screen. So I’m going to add an image attribute and we’re going to call this screen.

Okay. And I can select a default, which is going to be this one right here. I’ll use that media.

I’ll go ahead and hit save. And now I have this component called a device. And if you see,

I can duplicate it and now I have five of them. This is really, really nice. Okay. All right.

Let’s just go ahead and hit save. Now, the one thing you’re not seeing is you’re not seeing the

shadow. You’re not seeing the shadow. And this is because I stole the shadow image from their site

and they did some weird, weird, weird things with the dimensions of their shadow. It’s not really,

the image file is not really configured the way the image file should be configured.

So you have to use magic numbers to kind of position it, which is a little bit annoying,

but I’m going to hit edit component right here. And I’m going to come in to my shadow.

And I’m just going to say that the width on this is actually 160. I think I wrote it down. Like it’s,

it’s just the most ridiculous number. You shouldn’t have to do this because you should,

you should format your, um, images correctly. They didn’t format their images correctly.

So I’m going to say 162% on the, uh, width and the max width. Okay. Um, I don’t know. I actually,

I don’t even think I need max width. I don’t think I need max width. I think it’s going to behave like

that. I think this is 116. Let me double check one. Yeah. 116. Okay. So we’ve got a width of 162.

And I think I do need a max width on there. So max width of 162%. Okay. And there you go. Now you see,

we can see the image. It’s just, it’s just, but cause the dimensions, they made the shadow a little

bit too small and you got to use the CSS, uh, dimensions to fix it. It’s just dumb. They should

have done it right in Figma to begin with or wherever they made the shadow. Okay. All right. Fantastic.

Let’s go ahead and save that component. And now you see, I mean, guys, let’s check this out on the

front end real quick. Let’s just take a little trip to look at this. Look at this on the front. I mean,

it’s looking fantastic, right? All we have left to do is a couple of things. Number one,

we need to make the middle one bigger. We need to make the outside to align at the bottom of this

container. Um, and then we have to deal with mobile and then we’re going to be done here. And then you’re

going to learn all the things that you’ve learned. Okay. All right. So what I’m going to do here is,

uh, and I think I could do this probably inside the component, right? So I am going to say,

I’m going to go down to screen or no, I’m going to go down to device. Cause this is really where all

the magic is happening in terms of the sizing and positioning of the things in the grid.

And we’re going to do a little bit of CSS nesting, nesting of CSS, which is super, super, super powerful.

If you don’t know what nesting is, you’re about to learn. So pay attention. Okay. So inside of this

class called device, what I can do is I can target any of the ones I want. So for example,

I can say in child three, and I could say border five pixels solid red. And look at how the third

one, the middle one has a border of five pixels solid red now. Right? So I can just target it.

This little ampersand, if you don’t know what the ampersand means, it’s like a placeholder for this

class name. And so it’s going to attach whatever I have attached to the ampersand to the class name.

So I’m basically saying device in child of three. So find the device in child. I want the third

one. Okay. And so what I’m going to do here is I’m going to flex 1.5. Okay. On the third one.

Now I want the normal, all the other ones to be a flex of one. So on the, and this is what’s so

powerful about nesting. All of your styles stay together, like in one kind of component ties,

little instruction set. Okay. So all of my devices, I’m going to say, be flex one. This is kind of like,

think of this as the size as, as a proportion of, of the, the, the grid. Like it’s like one FR in grids

almost. Like it’s one fractional unit, let’s say. And then if I take the third one using in child three

and I make it flex 1.5, it’s going to be 1.5 times bigger. Or is that how the math works? I’m just,

I’m awful at math. It’s going to be 50% bigger. I think it’s, is that correct? Is it 50% bigger?

Okay. Let’s just go with that. Now the question is, do I want it to be 50% bigger? The answer is no.

I’d, I’d actually like it to be like, kind of like that, right? Just like a little bit, like 15% bigger.

Okay. So that’s about 15% bigger, or I guess it’s exactly 15% bigger. And now what I’m going to do is I am

going to do the next thing before we exit this component. Cause I do have to do one thing at the grid level.

But that’s okay. I still need to take care of these outside items. I want those to be aligned to the bottom

of their container. Okay. So now what I’m going to do is I am going to say, and inth, actually not inth,

I’m going to say first child comma, and then the ampersand selector again, last child. And I’m going

to say align self end, and it’s going to push those down to the bottom. That’s the first one and the last

one. Right. Okay. Now here’s the thing about this. Actually, I need to back up. We are doing this all

wrong. I’m just thinking about it because we made this a component. We want to be able to use this

device everywhere. So these kinds of instructions that actually are, are, are relative to this

particular layout, this particular grid, we don’t want, if I use the device anywhere else on its own,

I don’t want these instructions to apply. Okay. So what I’m going to do is I’m going to remove them

from here. Okay. I am going to leave the flex one on there, but I’m just going to save this component.

I’m going to come to the device grid and we’re going to nest inside of here. And we’re going to

just say, okay, take the device. Actually, I can just paste those instructions that I got right there.

And I could say device inth child three. And now this is all happening within the context of the grid

itself. Okay. So now I can use this component, this device component anywhere I want. And these grid

instructions, these layout instructions are not going to affect it. All right. So I’m just saying

device first child, device last child, align self to the end device in child three is going to be flex

1.15. That’s all happening in the context of this grid. And then I’m going to say align items to the

center, which is going to take the second one and the fourth one and make sure that they’re centered at

all times in the layout. And now if we save and we go to the front end, see, this is the power of flex box

right here. This is the power of flex box. I’m getting very, very, very close. I mean, the only

thing that I don’t have, we look at theirs. Okay. Is the right screens in. Okay. And, and their

container is a little bit wider than my container, but this is all conforming to whatever the dimensions

of your website is. So I’m going to grab this and I’m going to come in and look at this because this is a

component. It’s now exposing the prop that I made the screen prop. And I could just come in here all

day long, just very easily swap in unique images for these components right here. So I’m going to come

in and I’m going to grab this one and I’m going to grab this one on the end. And I think there’s a

little bit of, let me save, let me refresh. Okay. Oh, you know what I didn’t do? Dummy. I was a dummy.

Okay. I didn’t link this up. I didn’t click and say, okay, this is supposed to apply to what,

right? Um, so let’s open this up and let’s go to here. So the screen should actually be props

dot screen. Okay. And I’m going to go ahead and save that component. So I made the props,

but I never linked them up. That was just an oversight on my part. Um, so now when I actually

do these, uh, props, we will be good to go. I don’t think that’s the right one. Which one do I,

oh, it’s the screen one right here. Okay. There we go. Okay. And you can see there’s a little bit

of issue with the dimensions on some of these screens. So I’m going to edit my component here

and I’m going to go down to my screen and I’m going to say, you know, the height of 30 minus 30 pixels.

It’s not like, not looking like it’s working very well. So my magic numbers were a little off

and I’m just going to say maybe minus 25 and minus 20 pixels. Okay. That might work well.

And then maybe this 30, 40. Okay. Uh, the width, the width of minus 25. Is that working? Well,

maybe this is 30. I’m just kind of looking at what’s going on on the screen and kind of adjusting

these magic numbers a little bit. Okay. I think that’s all looking good. Let’s save our component.

This is fantastic. Save, go to the front end. Look at this. Look at this. Look at this. Let’s handle

mobile. Let’s handle mobile. Okay. So I can just check my mobile real quick. There’s a medium and

there’s a small device size. Oh, we can see that on mobile, we’re actually our, our little screen

dimensions here. How big did I make my screen edit component? Okay. Let’s go to screen a hundred percent

minus 25 pixels. I wonder if that minus 25 pixels is not what we want. Maybe we just want to use a pure

percentage. So 98% on that. That’s, that’s what we want to do. We want to use a pure percentage for this.

So the height, let’s do 98% here. Okay. Let’s come back into desktop. What’s nice is that you can

preview these breakpoints in etch without leaving the code behind, like the code sticks and you could

just, you could just check on what’s going on with the actual canvas at any screen size. So the width of

98, I think we need to like 96, 95, 94, 93, 92. Okay. These are, this is very magic numbery 97, 90,

but that’s what you got to do when you don’t have the actual dimensions of things. Um, how about 95

looks good. 96. Okay. I’m noticing the bottom there is now perfect. This looks pretty good. 96 and 92.

And now let’s do a quick preview. Okay. Now it’s the border radius causing us a problem.

And let’s do maybe a percentage on the border radius. Now we’re good. Now we’re good. Okay. We’re

golden. So if we just use percentages for all of, all of these things, let’s go back to here,

same result, right? But now it’s going to scale way better, way better. Um, and now what I want to do

is I want to say, okay, on this break point right here, 768, and I’m going to come in here to

my device grid and you could even nest media queries, right? So I can say at media max width 768 pixels.

What do I want to have happen here? Well, I’m going to say device first child device,

last child. And I’m going to say that we want to display those none. Okay. At that device. Now,

if I go back up to desktop, they’re going to be there, but if I go here, they’re not going to be

there. And if I go down here, there’s just going to be three of them. And by the way, you’re wondering

like, why is that floating in outer space? Okay. It’s because there’s no background color. So if I go

background base, ultra light, actually let’s do ultra light. Let’s just do BG ultra light. There’s a

background color. And now you’re going to see, okay, there’s actual like device borders here. Okay.

And so that’s what that’s going to look like on mobile. And the only thing I don’t like is that

the gap is good here, but the gap is too big on mobile. We need to, we need to tighten that gap up

on mobile. So I’m going to teach you something else. We’re going to use a min function and the way that

a, I’m sorry, we’re going to use a gap with a min function. And the way the min function works is it

accepts two values. We can do something like 2.5 VW for, it’s like calculating the gap based on the

device width. And what a min does is it actually sets like a maximum that something’s allowed to be.

Okay. I can do something like 30 pixels. Okay. So 2.5 VW or 30 pixels. It’s going to choose the smallest

value. Okay. So if I come down here, look at that. So now it’s choosing the 2.5 VW because 2.5 VW at

this device size is smaller than 30 pixels, but on the desktop, it’s going to make it stop at 30 pixels,

which is really nice. Okay. So they get closer on mobile and they get a little bit further away

on desktop. And it’s just going to kind of fluidly manage that gap at everything in between.

Okay. So I’ve got components here. I’ve got a device component where I have full control over

all the HTML that’s going on here. All the styling is handled with classes. These all go into a device

grid. Like I could come down to another section somewhere else and I could put in like two flex

divs inside of this container right here. And I could say another grid and I could say display that as a grid,

grid template columns of grid two like that. Okay. And then in this right here, I could just say,

you know what? I want a device in there and there’s a device. And then I could say, all right,

I want it to have this screen right here. Boom, boom, boom. Now it’s got that screen. And I’m just able

to put devices anywhere I want now because I’ve made this a component super handy. And it’s got an exposed

prop called the screen of the device. And it’s just, this is just really, really, really fantastic guys.

Really, really, really fantastic. If you liked this training, I want you to hit like, I want you to hit

subscribe. If you have any questions, I want you to drop them down below. I will answer them. I will

reply to them. I hope you learned some stuff in today’s lesson about flex, about absolute positioning

of elements, about stacking context of things. There was a little, there’s a, there’s a little

bit tricky. Like there’s some tricky stuff going on here. We talked about CSS nesting. Like I said,

this is one of those lessons where you’re going to learn a lot in just a little bit of time. And if

you need to rewatch this, go rewatch. If you need a pause, if you need to rewind, if you need to go slow

at a couple of parts, do that, do that. Use this to your advantage. But I’ll be back very soon with

another training. So stick around. I’m out. Peace.