Turn a collection list into a responsive grid

Lesson info

Lesson info

Explore this project

Want to dig into the project featured in this video and see how everything is put together? We've included the full project we used when making this lesson, and we've shared the link right under this very paragraph.

View and clone this projectDownload lesson assets
Clone this projectDownload project assets

Transcript

This is a blog. Except it’s not. Because there’s nothing here. Fortunately, we have a CMS collection. And we’ve added a bunch of blog posts.

So. Our goal is to take those blog posts and create a layout that lets us browse through all of them. This is a grid-based layout.

So we’re going to create this in 5 steps. We’ll add a collection list, we’ll design it based on real fake data, we’ll turn it into a grid, we’ll add columns and adjust gaps, and finally, we’ll make everything work responsively on all different devices.

The first thing we need is a collection list. We’ll just drag in a collection list, which is going to reference all those blog posts we showed a moment ago. We’ll drop this right into the container.

And to link it to that CMS collection (the blog posts), we’ll just select blog posts.

Step one done. Step two.

We can see labels for each post, but in order to actually link real content, we need some things. Let’s start with a heading. We’ll use one heading for the name of each blog post. And instantly, we can see that a heading has been dropped into each of the collection items. We’ll leave these as H1s for this demo, but this can be any kind of heading depending on your content and your design.

And it looks ridiculous. Until we get that text from the collection. We’re just going to pull it from the name field (this is the name of the blog post).

It’s nearly illegible, because the text is a very light gray. And we’ll fix that in a moment. For now, let’s try a more reasonable font size. Let’s change the heading size since it’s taking up a lot of space. Let’s hold down option (or alt) and drag until we get that font size just right.

Now. For that legibility thing. Let’s pull in background images from each post. So we can select any one collection item. And we’ll head over to element settings. And we have a few options here for pulling that dynamic content. We’re going to get the background image from our blog posts collection. In the dropdown, we’ll select our main image. And just like that, we have a start.

If we look at our final design, we have just a few more things in terms of layout. We’ll drag in a text block, and we’ll place it right underneath the title (right underneath our heading). And notice how changes to static content (like this text block) — notice how changes  in one collection item also affect the others.

And, we can apply other styling. Like making the text all-caps.

Let’s finish setting up our layout. With the collection item selected, we can change the font color to white for maximum contrast, and we’ll set up the layout. We can use flexbox for this, and we want them to display vertically. “Read more” (that text block) we can just move to the end. We can adjust the alignment so it goes to the right side.

And we can adjust padding on the collection item to square everything off a bit more. (So the spacing between the edges and the written content is more even.)

Last thing. Now that we can really start to see what’s going on, we can affect the background image. Remember: we applied the background image earlier, now we can tweak it. In the Style panel, we’ll just go down and pretend like we’re adding a background image. And our controls? (Everything on the screen here?) We’re actually affecting that background. So if we set it to cover? And we position it from the center? Everything in each of the collection items matches.

Now. This looks okay, but we might want some more height. Let’s go back up in the style panel and set a minimum height. Again, just holding down option (or alt) and dragging until we land on something reasonable. Or we can just type it in.

Now one cosmetic thing you may have noticed when we expanded the size there. “Read more” is all the way up here. We can fix that by selecting any of the collection items, and making sure its children are justified so that the space between is automatically created.

That’s it. That’s step 2.

Step 3? How do we make this a grid? Get ready. We’ll select the collection list (this is the direct parent of the collection items.) We click grid. Done.

Step 4. This is the magic. So let’s edit so we can see what’s going on. Our grid content automatically flows.

The items are set (their direction?) it’s set to row. That means the first item appears first, then the second item appears to its right. Then the content wraps to the next row. Item 3, Item 4, and so on.

If we increase the number of columns? That trend continues. And as we create more and more space, the available children fill up the available cells, wrapping when they get to the end of each row.

But there’s a better way to do this. We’ll delete all but one column. (We only have one column left). Let’s click anywhere on this column’s label. And if we head over to min/max, our lives will change forever.

The important part is this: auto-fit. Auto-fit will automatically fit (hence the term auto-fit) as many columns as possible. But the minimum (the most narrow a column will go) is 200 pixels (or whatever we put in the minimum). And we can change that. (The columns will never get more narrow than the minimum we set.) And the maximum? We’ll leave this at 1FR since fractional units do the math for you.

And if we adjust device widths? (If we check out different views?) Columns are automatically sized.

Now, we can still make changes to our grid. On mobile landscape, the gaps between our rows and columns might be a little wide. So we can go in and hold down shift, and we can drag to reduce that size. Of course, changes like this will only affect the current view and any smaller device widths, like mobile portrait.

On the published site? The whole thing looks like this. As the viewport width gets more and more narrow, the column sizes are automatically managed.

And that’s it. We added a collection list, we put in content and designed our collection items, we turned it into a grid using science, and we edited our grid using auto-fit.

But that’s using grid to build a collection list layout.