Seeking Design Wizards: How Do I Tame These Uneven Repeater Cards (no code)?

Application Builder
, ,
1

Important information:

  • I am using Baserow (SaaS)
  • I am on the Free Plan and therefore cannot use custom code.

Hi everyone,

I’m hoping someone with a good design eye, or just more experience wrangling the Baserow repeater, can point me in the right direction.

I’m trying to create a clean card-style layout using the repeater on the free Baserow plan. I want something tidy and cohesive, but I’ve run into a couple issues that are making the whole layout wobble like a haunted bookshelf.

1. Variable image sizes
Not all my item images are the same proportions. This causes the repeater to generate cards with different heights, which makes the rows jump around visually. If I set a height limit, the images get cropped and you can’t tell what they are. I’m trying to avoid cutting anything off, but I also want the cards to look even and intentional.

2. Cards with different numbers of links
Some cards have three links, others only have two. Because the content height changes depending on how many links are present, the card sizes become inconsistent again. I don’t want to create a separate details page just to move the links off the card in order to force the rows to align. I’d prefer to keep all links visible on the card itself, if possible.

If anyone has tips, tricks, or creative no-code styling solutions within Baserow’s free SaaS limitations, I would genuinely appreciate it. Even small insights about spacing, alignment, images, or structure would help a lot.

Thanks in advance to anyone who’s willing to share ideas or examples.

2

@frederikdc maybe you have some ideas :raised_hands:

3

Following.

I’m having a similar issue.

However, I’m not sure adding extra space to match the largest repeat item would desirable, nor adding a scrolling bar.

Screenshot 2025-12-16 at 08.44.37
Screenshot 2025-12-16 at 08.44.371920×466 86.3 KB

4

I’ve made a new feature suggestion that might help here.

‘Show more’-type containers

5

It is not possible to get all the images fully visible and the cards all of the same height when the images do not have the same ratio. Most websites crop the portrait image. You can do this in baserow by setting:

  • Max width to 100%
  • Setting a max height to 166px if you have cards in a single row
  • Set Constraints to Cover

You can fix this by adding some custom CSS

  • Offer the Repeat element that holds the links (or the container that holds the links) as name in the CSS classes property under the Style tab. For example: link__container
  • Open the settings of your application and go to the tab Custom CSS/JS
  • Enter the following CSS
.link__container {

    height: 200px;

max-height: 200px;

overflow: scroll;

}

This sets the height to 200px for each card. If the number of links takes more than 200px, it will show a scrollbar.

An alternative is to pick a height that is higher than the largest amount of links. In that case, it will just add empty space to elements with less links.