Sub-grid (stacking?) query

User 1955696 Photo


Registered User
23 posts

After a few days I wonder if I am trying to do the impossible with sub-grids?
I want 4 image + text containers that display 2 x 2 on the smallest screens (to fit in the brief heading and text below). On the larger screens, I want the four containers to display on a single row. I can get it right for either small (2 x 2) or large screens (4 in line) but they will not slide from 2 per row to 4 in line, or vice versa, from 4 in line to 2 x 2.
Would appreciate any help on this.
Thanks
User 232214 Photo


COO
827 posts

Did you try changing the span-width of a column at a breakpoint? Basically you start with a single row and 4 columns, all with a span width of 6. Then, at a breakpoint, change the span width to 3 for each of them and voila!
The future of web layout has arrived and it's called CSS Grid. CoffeeCup helps you to get ready with a free guide, the Grid Builder app plus cool demos & themes.
User 1955696 Photo


Registered User
23 posts

Hi Bob,
Many thanks for your reply. Won't be back to my PC until Monday - (just 15 minutes battery left here and no power) - yes, I did try that, both on standard grid with rows and columns, starting 2x2 (2 col. @ 6 span, then 4 in line each 3 span). Also with a sub-grid ... about to shut-down, to be cont. thanks
User 1955696 Photo


Registered User
23 posts

Hi Bob,
Funny what a rest can do - all fine now, thanks. I think my mistake was in using both rows of the sub-grid component and dividing the top row into two columns as well. Today I simply deleted the bottom row of two columns and divided the remaining single row into four columns as per your instructions. Works a treat, thank you.:)
Regards / silmcoach
User 1955696 Photo


Registered User
23 posts

Hi Bob,
Huh - it all went wrong again. Finally worked it out - changing text size or line-spacing of the heading and text below an image in a link container may distort the sub-grid display when shifting from 2x2 to 4 inline or vice versa.
Thanks again / silmcoach
User 2706435 Photo


Ambassador
444 posts

You do not need a subgrid to do this unless you have other complicated things going on.

Understand that the grid is composed of rows. The rows have specific width of spans across. The number of spans are defined in the layout panel. Generally, its 12 spans. When you create a row, it has a column inside of it. You can divide this column and add columns. The columns float left. You can give the columns a custom width measured by spans. To have two adjacent columns take up an entire width of the grid or row, give each a span of 6 (12/2). And other columns in that row will form what appears to be another row. So you can have a set of 2x2 columns in a row by giving each column a span of 6.

So - in your case, you start out with one row of 4 columns each column has a span of 6. You'll have 2 across the top, and two across underneath (but all in one row). At a breakpoint, change the spans of each column to 3. You will have a row of 4 columns adjacent to each other.
User 1955696 Photo


Registered User
23 posts

Hi Ambassador,
It's all working fine now. I did stick with a sub-grid and link containers, so I won't change it now. But thank you for your helpful comments that I shall bear in mind for future designs, and which will no doubt help others.
Cheers :)

Have something to add? We’d love to hear it!
You must have an account to participate. Please Sign In Here, then join the conversation.