Streaming live at 10am (PST)

Responsive Grid + Custom Filled Square Cells


I want to make the following layout for the instagram feed of my site:

I have struggles to archived the following features:

  • responsive grid with squared cells
    The idea is to display native instgram images without formatting (crop, resize), regardless the device used (computer, tablet, phone).

  • CMS content excluded from first and last cells
    The idea is to use the first and last cells to show title, CTA, link, or anything else but instagram images from a CMS collection.

Hope someone has a solution to this.


Instagram website use the same trick you find her (In this case also a guide I wrote):

Add read-only link (If you are unable to complete the steps in the manual).

CMS content excluded - hard to answer without knowing what kind of data you put in those “first/last” cells. One option is to use conditional-visibility:

Create in your collection list extra div with the name of “the first cell” put any content you want - and use if first-cell (Add Checkbox field to your data) show this.

another div/wrapper inside your collection item - for the image/price and so on - and use the same logic (If “the first cell” or the last cell false - show content).