Wrapping of objects

Hi,

This is just a visual wish, but it somehow it´s always a topic of conversation, when I show a similar prototype. See attached file.

The blocks wrap to another line, depending on the screen size. When some of them have already wrapped, there is an empty space, because each block size adapts to its content.

Is there a way to keep the wrapping behaviour but to fill this blank space? If the last one on the row stretches, for example.

Thanks in advance!

Hey @Carlos,

there are multiple ways to achieve this. For example you could use CSS on the container.
One possible way to achive this directly with Antetype features is the following:
Wrap the columns in a wrapping container and give each column a percental width depending of how many columns there should be visible in one row. Also add a minimum and maximum width depending on screen size.

Please find attached Antetype File.

Best regards
Adrian

2020-12-03_Wrapping-of-Objects_272.atype.zip (181.2 KB)

Hey @Adrian,

thanks for your input! It´s a good idea to define breakpoints where widgets stretch to container, each of the breakpoints with different stretch percentages. I didn´t think about that.

However, your example is useful when the content of the columns is predictable, for example if the content of each column is equally long. I have columns that can be filled by the user.

I just found that pasting the CSS code “min-width: min-content” in the CSS box brings me a step forward. Still, the breakpoints also depend on the minimum width: If I have two boxes that already fill 45% of the screen, the stretch percentage of the breakpoint should be higher, or I would have a blank space.

If I don´t know that percentage, and enter a number that is too high, I will lose compactness, which was my first goal.
The second one was to fill up the remaining space, just for the sake of beauty.

I guess I can live without achieving the second goal, and I learned something new.

Thanks! :slight_smile:

Hi Carlos, not sure if I understand correctly. If you don’t want to enter percentages, you could use custom CSS to achieve almost everything. Either use something like this on the container flex: 1 1 0 or play a "display: grid".

CSS Grid gives you many possibilities, that are unfortunately not yet available in the GUI. Try e.g. something like this on the container:

 display: grid;
 grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
 grid-column-gap: 6px;
 grid-row-gap:6px;
1 Like