Hey support,

Can someone explain the steps in the form of a video or text how two containers in a subgrid or colum positioning so two containers side by side and two under another. How do you do that?
Which CSS properties do you use in the positioning of the containers?
I want developed responsive websites.

Kind regards
Stephane

The column is given a Position setting as follows -
Display:Flex; Direction:Row; Wrap:Wrap; Justfy:Flex Start.

1. For two containers side by side, each container is given a Width setting of 50%.

2. For two container stacked one on top of the other, each container is given a Width setting of 100%.

3. For two containers underneath a single container, each container having a separate class,
(a) the single container is given a Width setting of 100%, and Flexbox Order setting of 0;
(b) the two containers are given a Width setting of 50%, and a Flexbox Order setting of 1 and 2 respectively

If I have misunderstood exactly what is wanted, I think a diagram would help.

Frank

Hi Frank

Can you more explean the points (a) and (b) with steps?

Let's say that three containers have been put in the column, and have been given the following classes -
container-1
Container-2
container-3

Step 1
Select container-1, and in the Design panel go to the Flexbox heading (clicking on it to open it if it's not already open). In the Order box, set the figure to zero if it's not already zero.
Still in the Design panel go to the Dimensions heading, and in the Width line it will probably show 'auto' against a white background. Clicking on that word 'auto' will show a drop-down menu, from which '%' should be selected. The number 100 should be entered in the Width box.

Step 2
Do the same for container-2, but in the Order box set the figure to 1, and for the Width % enter the figure 50.

Step 3
Do the same for container-3, but in the Order box set the figure to 2, and for the Width % enter the figure 50.

Frank