Turn a collection list into a responsive grid - CSS grid layouts

Create a collection list, then turn it into a responsive grid layout that automatically adjusts to fit different screen sizes.
Note: We’re transitioning to a new UI, and are in the process of updating our Webflow University content.
----------
Get started with Webflow: wfl.io/2r7cVUW
webflow.com
/ webflow
/ webflow

[@Webflow]

We’re transitioning to a new UI, and are in the process of updating our Webflow University content.

[@spencerholtaway]

I just learned like 100000000 things in this video, why didn't I just watch this when I started using webflow???? My life, as you said in the video, has been changed forever.

[@Leechizzle1]

This video saved me A LOT of issues and head aches. Thank you !

[@JohnSmith-bs9ym]

Just had to come on here to express my thanks. The default collection list wrapper function is very limited. This trick does the job for me. Thanks a ton!

[@ostendo.design]

You weren't wrong: my life has literally been changed forever with the min/max function. 🙏

[@petigubi]

It just doesn't work. Can somebody help? I set my grid exactly like in the video. I have a 3x2 grid and it's set to auto-fit with the minimum of 300px. But when resizing the window, nothing happens. The boxes disappear with the edge of the window.

[@TSIXGaming]

Is their a setting for the grid to wrap columns as the page size gets smaller such as from 4 columns to 3 to 2 then 1 but without skewing the width/height aspect size of any cells

[@cesafacamah]

how to fix the first element in the grid not to be empty?

[@lorentracy006]

This is awesome. How would you go about having 1,2 and 3 column layouts? I see how you can drag the containers to have them span as many columns as you want in a layout, but if you had 1,2 or 4 columns items that covered the entire width of the parent I don't see how you could also have a 3 column row that filled the length of the parent as well. Thanks!

[@DANNFIGDESIGNS]

They just made a video that covers that: kzbin.info/www/bejne/ZmraoJ-wZs-Up6c

[@erick_papi]

Thank you so very much! Useful, sarcastic and funny AF!

[@DanielWalshFRCS]

The auto-fit option doesn't appear when I reduce to 1 column

[@rahinahmed946]

How can I set up url link to each individual item in collections item to go to a different page and also whenever I set up class to any item it automatically applies to all of them . How can customize each different item by setting up a different class ? . Thank you .

[@onemouthymerc]

This is what I want to know. Can't believe they didn't cover that part...

[@charbelhajj7542]

Whenever I publish, I keep getting a weird layout. After inspecting the page, all my CMS items have an inline CSS styling with position:Absolute, and top/left position. Am I missing something?

[@cpistudio]

So the images have to have the same pixel sizing otherwise this layout won't work.

[@Webflow]

You can use object-fit to set the width and height of all the images, and crop them if they aren't the correct size. Learn more here: kzbin.info/www/bejne/bX7EY3qXq817oqs

[@cpistudio]

@@Webflow am I able to do this with a CMS?

[@erick_papi]

and 2. can this be done with Hero lifestyle?? nah, with HEro Layout??

[@ned5232]

How to make each grid block with a link to a project?

[@Webflow]

Try adding a link block in the collection item, then add your content inside that link block. Hope this helps :)

[@masonschroder7643]

Is it possible to create a custom layout using Grid where the cells are not all the same size/orientation but then fill the content with collection items?

[@NVSteppers]

I don't think that is possible It says you can't create grid areas with Collection lists

[@REOforREAL]

just found out you cannot span a specific collection item in the dynamic grid, since the span will apply to every collection item and you cannot use manual to override it as well.

[@onemouthymerc]

You left out the most important part - linking each item to the individual collection pages. My biggest frustration with Webflow so far are the pieces of important information that aren't included in many of your videos.

[@sportfanatic9983]

Wrap it in a link block and there you go

[@alecsy7589]

Has anyone tried this recently and got the same layout that he's doing at around 2:06? It's broken no matter what I do. It seems like the image is not extending all the way to the text block like how he's doing it. I cloned webflow's project and copied the section for the collection list to my own project and of course it displays the final output just fine.

[@RealSoccerKid]

Me too! Have you figured this out?

[@yoozer8741]

Same here:(( Edit: Got it! You need to select the “Collection Item” and then set “Get BG Image from Blog Posts” to “Main Image”. I made the same mistake and selected the Heading. You will find it on the right hand side at “Colection Item Settings (Gear Icon:))

[@VioletYT]

My grid remains unresponsive at mobile screen. Any ideas?

[@nakeyshiaS]

wow mines too...I'm trying to figure that out now

[@trongphamle5326]

0:45 but where is the Blogs post?

[@Webflow]

If you're looking on how to create a collection for your blog posts, you can refer to this article: university.webflow.com/lesson/webflow-collections-overview If you're looking on how to create a collection template for for that actual blog post, you can refer to this article: university.webflow.com/lesson/structure-and-style-collection-pages Hope this helps :)

[@kofoare9252]

Brilliant!!!

[@shirazigs]

No fields to connect to!

[@terrestrialpress]

Table for one, please

[@dbertovi]

Extra! Thanks. Great thanks.

[@richestsoft7533]

Thanks

[@griffinbarnett3607]

Those listing names XD.

[@jeffbrydon4335]

These grids are really unintuitive and glitchy, they've wasted far too much of my time.

[@jesuschristTRUTH]

I understand your frustration. I have been a web designer/developer myself. I have tried all apps from dreamweaver, wix, sublime text, bootstrap, etc... But for a complex technology like this - this is as simple as it can go. Try Webflow's university and stick with them, they're very entertaining and funny. You won't regret it once you know Webflow. Maybe I can also help in your journey.