Hi all,

Can you explean in steps how I can with my example (attachtment) to positioning containers responsive into cols?
I try it but all containers stacked in one line.
Thanks for your help

stefke
which one do you want do this for Foundation framer of RSD because very different way

For the foundation Framer Wayan But can you post the screenshot in jpg with the steps.
Thanks
Stephane

Stefke, the Foundation framer creates 'mobile first' layouts, so you need to start from small and move to larger.
On a phone screen you may want to have all the containers displayed one below the other, and then as you widen your viewport, reduce the spans so that the containers pop into place the way you want them.

I have created a wee layout according to your drawing. First I placed the slider to the left of the smallest breakpoint and made two rows, the first one with 5 columns and the second one with 3. All those columns I made cover 12 spans. I popped a container into each.
Then I moved the slider up to the right of the first breakpoint and gave each column the size I meant to be able to read out of your drawing. A container follows the size of the column it is sitting in, but you can give it some margin so that they don't stick into each other. I just kept the default margin. Hope it helps.

I did example for you in RSD also because you also posted there the same question.

Hi, Wayan Jaya
I need it in both. Can you describe the steps agreed in video but I manage not to position the containers in the columns. Can not move them.
Thanks

Stefke, as I wrote above here, a container fills the column it is sitting in, so you can't put more than one container in a column. What you have to do is split a row into the number of columns you need and then, if containers are necessary, add one into each column.

Hi,

How can I do that with my demo here "howto_position_containers_in_cols"
First row divided into tree cols
Second row divided into second cols
Thirth row divided into two cols
Fourth row divided into one col

And then implement the containers?
or can I place into a Col a subgrid and into the subgrid col containers?

Kind regards
Stephane

Did you mean to post a link to a demo? I see no such link.


You can divide it up like that, yes. Did you take a look at the suggestion I posted yesterday? It is done not quite the same way, but fairly similar.



A good principle is not to have too many things inside each other, like a div in a div in a div... Try not to use both containers and subgrids together. For many types of content just the column is enough, for images, text, lists for example. If you need to add a form, a slide show or a video I'd use a container. Subgrids are handy if you need to split a row or column vertically.

Stephane

You can place a container into a column directly, but I am not sure why you would want to anyway

Just follow the directions both Inger (for FF) & Myself (for RSD) have shown you,, it's fairly clear & straightforward

In my example is simply
1 row with 4 columns set to 12 spans each,
each column set to
position = flex
direction = row
justify = space between for the first 3 columns then the last one set justify = center.

then in each column you place the containers and set them to whatever width value you want to give you the layout you want

Inger's solution also works the same except that he uses 4 rows for each different section but the end result is still the same

My image showing the layout and the settings should be easy to understand even for a newby into web-design I have even given you some % values for what I think the containers need to be.