Page 1 of 1
How do you evenly spread 3/6 columns in CSS?
Posted: Tue Feb 28, 2017 8:19 am
by simonmlewis
We need to evenly spread a three column or six column set of DIVs.
If 5, 20%. If 4, 25%. But cannot do 16.6% as it doesn't snap to fit.
Is there some flex code or CSS we do to make it spread to fit the screen evenly?
I tried flex:1, but that seems to compress rather than stretch them out.
Re: How do you evenly spread 3/6 columns in CSS?
Posted: Tue Feb 28, 2017 8:31 am
by Celauran
simonmlewis wrote:We need to evenly spread a three column or six column set of DIVs.
If 5, 20%. If 4, 25%. But cannot do 16.6% as it doesn't snap to fit.
Is there some flex code or CSS we do to make it spread to fit the screen evenly?
I tried flex:1, but that seems to compress rather than stretch them out.
Did you set the parent to display: flex?
http://codepen.io/anon/pen/NpGgvJ
Re: How do you evenly spread 3/6 columns in CSS?
Posted: Tue Feb 28, 2017 8:52 am
by simonmlewis
Oh that's how. So what about if I Want to make it three across on a mobile?
Do I then need to add some percentages?
I basically want six across on desktop, and 3 across (2 down) on mobile.
I can see without the percentages how the flex works.
Re: How do you evenly spread 3/6 columns in CSS?
Posted: Tue Feb 28, 2017 9:04 am
by Celauran
flex-wrap: wrap on the parent and a min-width on the children should do it.
Re: How do you evenly spread 3/6 columns in CSS?
Posted: Tue Feb 28, 2017 9:10 am
by simonmlewis
I see. so a min width of say 30%... which forces it to be roughly 3 across and it snaps into place? Clever.
Re: How do you evenly spread 3/6 columns in CSS?
Posted: Tue Feb 28, 2017 10:20 am
by simonmlewis
Got it. Works a treat.
Re: How do you evenly spread 3/6 columns in CSS?
Posted: Wed Mar 01, 2017 3:06 am
by simonmlewis
the flex-wrap doesn't work in safari on an iphone. the DIVs all spread out rather than wrapping.
Re: How do you evenly spread 3/6 columns in CSS?
Posted: Wed Mar 01, 2017 6:38 am
by Celauran
http://caniuse.com/#feat=flexbox
Maybe there's something helpful to be found here? It claims to be supported but Safari has somewhat become the new IE, so I am not surprised there are issues.
Re: How do you evenly spread 3/6 columns in CSS?
Posted: Fri May 19, 2017 3:34 am
by simonmlewis
I really like CSS like this:
Code: Select all
.responsive-row
{
width: 25%;
width: calc(100% / 4);
float: left;
text-align: center;
margin-bottom: 20px;
}
Issue is, if I have five on some pages, or six, then it goes to a new row.
I think it might look nice if they centered.
Im not certain. But there are instances where there will be four across then one more. Or two.
So can it be centered in the containing DIV?

- Example of solution i want.