Layout Grid and Five Columns

[protectourlands]

What is the best way to make 5 columns equal width in Layout Grid?

[crispy68]

You could do:
1 - 2 - 2 - 2 - 2 - 2 - 1

Also depends on exactly what you are putting in the grid.

[protectourlands]

I tried that first, but when I stack the columns the first column is blank in the first row.

Is there a way to make that column invisible without affecting the widths of the other columns?

[crispy68]

When it goes to stacked mode, select that column and uncheck 'visible'. This will hide that column.

[protectourlands]

Yes but it changes the width of the other columns in that row, throwing off the alignment on the stack.

The 1,2,2,2,2,1 becomes 4,4,4 with overflow custom. So I need 3 column in the first row and 2 columns in the second row. I m really struggling with this. I appreciate your advice.

[crispy68]

I'm a bit confused. You said

but when I stack the columns the first column is blank in the first row.

This is correct as when it is stacked it becomes:
1
2
2
2
2
1

Once in stacked mode the widths are all the same and the numbers 1 & 2 mean nothing anymore.

Do the 5 columns have to always be 5 across when horizontal in 1 row? Can you have multiple rows? Need more info on what you are trying to do. What is actually in the columns?

[crispy68]

If they can break to multiple rows while horizontal before it goes to stacked mode then I believe I have an answer.

[protectourlands]

Thank you Crispy68

I have 5 images with text below them, then a button below the text. The columns are set to center.

By "stacked" I meant wrapped, as in using the overflow custom settings to get 3 columns in the first row and 2 columns in the second row

At about 768 the columns get tight and begin to overlap, so I need a breakpoint there. At that breakpoint I am trying to get 3 images in the first row, then the other 2 on the second row. Then at 480 I need 2/2/1, then at 320 I need 1/1/1/1/1

I have tried everything and run into a different issue as I resolve one. One issue is, when you create multiple rows with the overflow custom settings, you cannot set the new rows to center. Only the top rows.

I hope this makes sense. I am beginning to believe what i am looking to do cannot be done.

[protectourlands]

If they can break to multiple rows while horizontal before it goes to stacked mode then I believe I have an answer.

Yes I think that is what I am trying to do.

[crispy68]

I've made a quick demo project.

download here: https://www.wizbangwebdesign.com/demo/grid.zip

You may have to play around with the breakpoints, etc. to get it to fit your design.

[protectourlands]

Wow this is exactly what I am trying to do. I never thought of putting grids inside of a grid. I'll have to study this. Thank you so much for taking the time to make this demo. This really opens up the possibilities.

[protectourlands]

Worked like a charm crispy68

There was no way to pad the bottoms after the stacking to keep them spaced apart so I used a css3 shape transparent to build space. Everything looks great. Thank you again for taking the time to walk me through this method.

[crispy68]

Depending on what you mean by stacking(when it goes to 3 -2 or when the grids become a column), for padding you have a possible few options:
1. Add padding to object
2. Add margin to object
3. Add inner padding to the column on bottom

[protectourlands]

Unfortunately it was a button from a shape so padding it was not an option in the manager. For some reason padding the columns didn't work either. not sure how to add margin to an object. Nonetheless the transparent shape did the trick. I could not be happier with the result. Thank you again.

[protectourlands]

OK I waked away and came back to it with a fresh look and was able to use the column padding to get the desired spacing. My guess is I was applying it to the wrong breakpoint when I last tried it. I removed the transparent shapes. All set now. Thank you again.