Content Grid in Fluid Boxes

Question

I am trying to arrange content inside a Fluid Box Responsive Project. I would like to create a grid like arrangement of content, with several rows of content and each row having several columns. I would like to be able to create a symmetrical grid (grid example below) but also an asymetrical grid (glossary, pinterest, masonry & one and others examples below). At the moment I am only working with images, but it would also be useful to be able to use different types of content in such a grid, especially image, text block, image, text block. Essentially layouts such as the below:

I am playing around with the different settings in the fluid box but can only get either one horizontal row or one vertical column. Is the only way to have one fluid box for each of these and split the content amongst them? If so, how can I add additional rows to a slide after it has been created or can this only be set once at the beginning. Also how would I then keep the content symmetrical from one fluid box to the other.

This is very straightforward to do using Breakpoint projects, how would I achieve this in Fluid Boxes?

I have also tried the following but found when the screen is resized the parts of the grid change order:

RodWard · Answer

When I see questions like this one, I always think that perhaps people are missing the central idea when it comes to mobile delivery. The layouts shown here in the graphics are way too complex to allow meaningful content for most mobile devices.

If you take a good hard look at the layouts being displayed in most websites that are now designed for mobile consumers you will find that they basically boil down to only three or four:

There's one that goes full width to display all text or maybe a single large graphic.
One that divides the width into two equal parts for either side-by-side graphics or text boxes.
One that has a graphic on the left side taking up about one third of the screen, and a variation of the same layout with the graphic on the right instead.

And that's about it. Very rarely do you ever see anything more complex. There just isn't usually room on a typical mobile device screen to accommodate more complex layouts and still display meaningful content. Mobile devices are simply NOT designed to work well with the kind of super-busy layouts that can easily be accommodated on a modern desktop computer with a large monitor.

So while it may be technically possible to use fluid boxes and breakpoints to create the kind of complex layouts illustrated in this thread, my question would be: Is this really going to be THAT beneficial?

Sign up

To post, reply, or follow discussions, please sign in with your Adobe ID.

Sign in to Adobe Community

To post, reply, or follow discussions, please sign in with your Adobe ID.

Scanning file for viruses.

This file cannot be downloaded