Positioning CMS items on x and y axes

Hi everyone

I’ve got a CMS collection and I want to position every CMS item on a x and y axe. Could be on a grid or something else. Do I need some custom code to do this positioning?

Thanks in advance for your help.

Hi @saschajaeggi :wave: If I understand you correctly — the fast and easiest way is create 2 Collection Lists:

For vertical List #1 set: “Show: 4 / Start at: 1” and
for horizontal List #2 set “Show: 3 / Start at: 5”

Hi Dmitrii
Thanks a lot for your reply.
I need to position the CMS items on both axes, see screenshot.
So every item needs to have two values (A-E) and (1-5) and must be asign to this position.
My idea was to create a grid to achieve this. But if there’s another solution, I will be totally happy as well. :wink:

So why solution with 2 collection lists* is not works for you? Do you have a design of what you plan to implement into Webflow?

there is a design but it is confidential due to the worldwide known brand of my customer… :wink:

I have about 10 CMS item, all with different pictures and descriptions. All of them should be mapped on acertain position on a grid.

Example:
Item 1: Position A4
Item 2: Position A2
Item 3: Postion D5
Item 4: Position C1

Create 10 item lists with one item shown in each and then you can move them any way you’d like… with grid or relative/absolute position shift, etc.

Oh got it now😬 Then CSS Grid may looks a good solution (as for me).

One of the way is manually write a CSS for each position in Grid using this: :nth-child() - CSS: Cascading Style Sheets | MDN + BETA CSS Preview Feature for correct and fast writing in Custom code CSS Grid cell position:

Here is an example for your example values: Live example and Read-only project

@bro-design Thanks a lot for your preview. :+1:
I can manage to asign the positions via nth-child() now. But how is the CMS field “Axis grid item position” linked to those positions? If I change the value this field, the position of the items in the grid don’t change.

The logic of my current read-only solution is: create “preset” for all your 10 elements (keep in mind this position in order of priority from top left to bottom right corner of Grid). Then just with sorting assign positions to CMS elements (and set: Smallest to largest in CMS Lists):

If your CMS items are quite simple, like an icon, dot, or number on a graph, then you can accomplish this using an HTML embed. Your literal HTML element would have a custom style attribute where you can calc() the exact x and y positions you want.

Something like…

<div class="graph">
  <div class="point" style="top: calc((5/10)*100%); left: calc((8/10)*100%);">
    X
  </div>
</div>

And then for page-level CSS, something like;

.graph {
  position: relative;
  width: 100%; 
  height: 300px;
}

.point {
  position: absolute;
  width: 20px;
  height: 20px;
  background-color: red;
}

This makes it easy to “plot” simple CMS items on an X/Y graph. In the CSS calc, you’d create your % by dividing your value against the max, e.g. 5/10 would position it right in the center.

If your items are more complex than this, I’d likely use the same approach but use custom code to set those positions on designer-built elements.