Hi all,

I have no idea if don't know what steps I need to do to those columns not to paste against each other but a space should let see demos. I tried that with a container but get those between distances are not correct.
Should I here maybe with a flexbox work?.
I really don't know how I got that right get like your help how should accomplish that I Thank

In attachment the screenshots what I want To developed this in RSD

Kind regards

Are you familiar with the Flexbox layout model? It can be done, but since there is a language barrier I do not want to get too far ahead of you.

Are you using RSD V2 beta? And do you have access to RSD 1.5? And what Framework do you prefer to use, Foundation, Bootstrap, or RSD 1.5's Coffeegrinder?

Hi Bill,

I have RSD v1.50 and RSD v2.0 beta
I would prefer as framework Foundation
Kind regards
Stephane

It looks like you copied those images from templates. The "boxes" of content can be made anyway you want, the real issue is how you want their responsive behavior to change and what sort of content and how much content you will need. These template files tend to make all of their examples easy to use and in real life you may have varying content to deal with.

I included a link to a file where I made some examples of the image files you posted.
In the first section of the file, I recreated all of the images where there is an icon to the left, and content to the right. The icon is floated left and the paragraph/header content is added with the overflow set to "auto" so it does not wrap around the icon.

Each of the content blocks are in a container, and there are containers in a column. The column is given a display of flex, direction row for layout (this will make sure the containers are the same height. The flex basis of each container was changed to 0px to make sure each container had the same width. The 2nd row is an example of when a heading might take up two lines. There is no automatic way in css or flex to make the paragraphs of different containers start at the same height (unless some sort of javascript is used). So - I gave the heading a height of a few em's. The heading font size and height will have to be adjusted through breakpoints.

The third row is just the same as the first row, but I changed the display flex property to a column direction. That is something you might want to do for smaller breakpoints. That is, start with the content blocked stacked in the direction of a column (on tope of each other) and that as the screen gets wider, change the direction to row and have them line up horizontally.

The 4th row is like the 2nd row. Except that a container was added to wrap the header and paragraph. Becareful with using some flex display properties for containers in RSD. There is a bug (soon to be fixed) where the justification of space-between and space-around do no behave properly. They will behave properly for columns and in columns of sub-grids. So if you need one of those justifications for a container, convert the container into a subgrid to that the container becomes a subgrid column.

The 5th row is using Foundation's card components. You can make a similar card yourself using flexbox properties and containers. The cards are in a column that is using the display flex property. In the lower breakpoint, the flex property has a wrap. So at low screen sizes, there may be one or two images across (the containers have a maximum size).

link to the file.
https://www.dropbox.com/s/245mlo3qduimdrh/the-problems.rsd?dl=0

I believe I misread your question. You want to have a space between the content boxes that automatically adjusts?

The easiest way to do this is to place your containers in a column. Then give the column a display of flex (flex is in the dropdown menu beside display in the position section of the design panel). A new section will appear with dropdown menu options. Make sure the direction is "row" and wrap is "no wrap." Then for justify - choose "Space Between" or "Space Around" You can give the containers specific widths or percentage widths for each container in a Flexbox menu option for the containers that appears after that are children of a flex container (The column) through the flex basis box.

You can also give the containers a specific width, and the flex properties will also position them. Each column of containers will be spread across the width of the page. That is just the basics of flex properties. You can change an option to "no wrap" and as many containers that it can fit into the column will wrap on the first line of the column based on the container size if specified, or the flex basis sie you gave them (The flex basis can be larger than the actual container size)

Bill G,

Thanks for your quickly repley

Can you give an demo example for the problem "You want to have a space between the content boxes that automatically adjusts"?
Kind regards
Stephane

Inger,

Kan je dat eens bekijken hoe ik de tussen afstanden van objecten bvb een matrix van 4 video's by 6 video's dus een 4 * 6.
4 kolommen en 6 rijen. De bedoeling is dat ze niet tegen elkaar worden geplakt, dus en ruimte van 20px links, rechts, boven en onder.
Ik heb geen idee hoe je dat moet verwezenlijken. Ik krijg ze niet met die tussen afstanden en krijg ze ook niet responsive
Graag een demo dat ik zie wat je aan het doen bent en een beschrijving welke CSS3 properties je moet instellen

Met vriendelijke groet
Stephane

check this out
https://www.dropbox.com/s/vvn7kar1inq3drv/flex-spacing.rsd?dl=0