Hello,
I am trying to implement a collection list with a grid layout that is custom.
I can do this perfectly fine using a div as a grid and then use manual placement of the items where I specify the columns and rows but when I try to replicate it using CMS, I run into issues.
I thought I could use an embed for each collection item that will pull from the CMS fields the custom grid-column and grid-row values, but it doesn’t work.
this is the css code i though i could use:
<style>
.views__cl-item {
grid-column: {value from the CMS} !important;
grid-row: {value from the CMS} !important;
}
</style>
here is a vimeo link to my issue:
password: 123
here is the link to my readonly simplified project
here are some screenshots:
Here is my public share link: LINK
(how to access public share link)
ok well I found a bit of a solution, I needed to target the elements independently, based on their cms unique name.
The distribution is almost right, but not quiet. I used the values i found in the webflow designer UI. But when I inspect the code, i get this kind of css styles:
grid-area: 3 / 1 / 6 / 3;
however in the webflow designer i get this:
which i asked chatGPT what it would translate into and he said:
.views_link {
grid-column: 1 / 2;
grid-row: 3 / 5;
}
which does make sense, the element starts on column 1 and span to column 2. the element starts on row 3 and spans up to row 5.
if grid-area: 3 / 1 / 6 / 3; is the answer, how do I calculate the converstion from
grid-column: 1 / 2;
grid-row: 3 / 5;
to
grid-area: 3 / 1 / 6 / 3; ?
Okay so I kind of hacked my way into solving those extra invisible columns and rows by doing a calc in the css… it is working but looks ugly in my code, i like clean code.
any idea why i have to do this ?
