Unlimited Wordpress themes, plugins, graphics & courses! Unlimited asset downloads! From $16.50/m
FREELessons:19Length:1.5 hours

Next lesson playing in 5 seconds

  • Overview
  • Transcript

3.5 “Repeat Grid” and Responsiveness

One of XD’s most useful features is its ability to take an element and turn it into a multi-element grid with the “Repeat Grid” function. In this lesson, we’ll cover how to use “Repeat Grids” in a responsive mockup and the “gotchas” to look out for.

Related Links

3.5 “Repeat Grid” and Responsiveness

Hey, welcome back to Responsive Design in Adobe XD. In this lesson, we're gonna talk about using XD's repeat grid function to help you out content quickly. But then also make sure that it's set up in way that's still gonna be conducive to all the responsiveness that you're trying to design for. So I've taken the layout that I showed you in the last lesson and just added in some placeholder content. As I mentioned, I'm gonna be skipping over the actual design part because it's not really pertinent to responsiveness. There's nothing here that I've yet done specifically to help make this all responsive. I've just added in some rectangles and some text, and you'll get this file so you won't have to do this manually. You can just pick up from this point and follow along with what I'm doing. I'm using a couple of placeholder elements here that have come from Envato elements. So using this logo, these little image placeholders for the images in the wire frame, and a couple of these social media icons. So they won't be in the actual file cuz I don't have the right to share those, but if you do wanna grab them, the links are in the notes below this video. So I'll just quickly run through the content that I've added here. So in here, we've got a logo and title on the left, and just a straight up text menu on the right. In here, we've got a placeholder image, and just like I showed you before, this is centered inside our sort of fake div. All right, we've got some text and a button that is left aligned in our little fake div. Here, we've got just a heading and this little column. There are gonna be three of these, which we're gonna create with the repeat grid functionality. And I set up the width of these using that math function that I had told you about in our previous lesson. This section is simulating a slider of images that are gonna move from left to right. So we just got one place holder image in there. We'll repeat that out to five with the repeat grid functionality. Here we've got the main section. This would be sort of a blog area with an article on the left, with image, text and read more button. And on the right, we'll just have a little widget with a couple of different links. And then finally, we've got our footer down at the bottom with a just ordinary text navigation bar, little copyright message and some social icons. And just to quickly show you as well, because of the way that this is all being set up, the way that we set up that layout in the last lesson, if the wrapper group here, the parent group, is selected, this is already pretty responsive. There are some things that start to break and that's what we're gonna address as we go through later lessons. But you can see that that's already pretty well responsive to get the ball rolling. All right, so now, let's expand this content, this content, and this content out to multiple items by using repeat grid. So I'm gonna come up here, and I'm gonna grab this item here. It can be difficult to select things in XD. Sometimes an easy way to directly select an item that's nested inside other groups is to hold down Ctrl. And then you can hover and it'll show you which item you're going to select. So then you click to select and it will sometimes drill you down too far, but then at least you're in roughly the right place. So what I actually want to select is this column group here. Now with this column selected, I can hit the Repeat Grid button, up here, and now I can just drag this out so that I get three of these columns. By default, it's always gonna give you a 20 pixel gap in between each one of your grid items. In this case I want a 40 pixel gap between the items so I'm just gonna hover over the gap so that it goes pink and then I'm just gonna drag the right edge out until I hit 40, And so now that's that grid, it's all set up and good to go. We're gonna do the same thing down here, Ctrl + click to get into the roughly right place in the last structure here. So I'm gonna select the column itself, hit Repeat Grid, and then drag out until I get five items. In this case the 20 piece square is fine, and I can also do the same thing vertically with this item here. So once again Ctrl + click to get into roughly the right place and then I'm gonna select the sidebar snippet, hit Repeat Grid, and then drag down so I get six of these items. So now that is most of that content all set up. But right now, if I grab that wrapper again and I shrink down the sides, you can see that the grid stuff is not shrinking along with everything else. So basically, responsive resize is not going to work on elements that you've laid out using the repeat grid functionality. So to make that work, what you're gonna have to do is come in and select, The grid, then you're gonna have to right-click and choose Ungroup Grid, or you can do the same thing up here. Now if we try resizing, you can see it's still not working because there's another step that we have to take. We have to select all of these columns. And they have automatically had responsive resize activated on them. So you remember I said that sometimes it's gonna try to guess what you want with constraints but it's gonna be wrong, and then you're gonna have to turn it off. So we're gonna turn it off because we want our multiple columns to be flexible. And now when we shrink down now, everything is shrinking along with it. So then we wanna do the same thing also for our other section. So in here, we're gonna need to ungroup this grid. And then again, responsive resize has been switched on, but we don't want it. So we'll turn that off. Now if we select the parent, These items will shrink down too, and then the same thing goes here with our sidebar. We're gonna need to ungroup, in this case responsive resize is already off. It's guessed correctly this time, and now when we resize the parents. Sidebar items are resizing too. Now there's gonna need further adjustments that we'll have to make to get everything working fully responsively. But that's one of the first things that we need to do to lay the foundation. And that is how you can use the repeat grid function to quickly get columns of content later in your site. But then you're gonna need to go through and tinker around with the responsive resize functionality to get everything responding to the parent size the way that you want it to. And this one more thing, you'll notice that when we resize this parent, the images and a place holder go a bit funny. These are just place holders, so it's not a big deal. But if you want to deal with that and prevent that sort of funny resizing from happening, then you can go in and select the image place holder, turn on responsive resize, switch it to manual. Make sure all the edge constraints are off and fixed width and height are both on. I'm just gonna do that with all of them. That's all good. Then when you resize the parent, Then those little place holder images are gonna keep their size, so that's just gonna help you to keep everything looking neat. All right, so next up, you probably just noticed then that this text went funny when I resized everything. And there are actually a few different areas where the text is going a little bit weird as we shrink things down. There are a couple of different settings that you can use in XD to help your text stay more responsive. You're still gonna have to make some manual adjustments, but these little changes are gonna help you to minimize the number of manual adjustments that you need to make. So we're gonna go through handling text in responsive design in XD in the next lesson. I'll see you there.

Back to the top