How do you evenly spread 3/6 columns in CSS?
Moderator: General Moderators
-
simonmlewis
- DevNet Master
- Posts: 4435
- Joined: Wed Oct 08, 2008 3:39 pm
- Location: United Kingdom
- Contact:
How do you evenly spread 3/6 columns in CSS?
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.
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.
Love PHP. Love CSS. Love learning new tricks too.
All the best from the United Kingdom.
All the best from the United Kingdom.
Re: How do you evenly spread 3/6 columns in CSS?
Did you set the parent to display: flex?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.
http://codepen.io/anon/pen/NpGgvJ
-
simonmlewis
- DevNet Master
- Posts: 4435
- Joined: Wed Oct 08, 2008 3:39 pm
- Location: United Kingdom
- Contact:
Re: How do you evenly spread 3/6 columns in CSS?
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.
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.
Love PHP. Love CSS. Love learning new tricks too.
All the best from the United Kingdom.
All the best from the United Kingdom.
Re: How do you evenly spread 3/6 columns in CSS?
flex-wrap: wrap on the parent and a min-width on the children should do it.
-
simonmlewis
- DevNet Master
- Posts: 4435
- Joined: Wed Oct 08, 2008 3:39 pm
- Location: United Kingdom
- Contact:
Re: How do you evenly spread 3/6 columns in CSS?
I see. so a min width of say 30%... which forces it to be roughly 3 across and it snaps into place? Clever.
Love PHP. Love CSS. Love learning new tricks too.
All the best from the United Kingdom.
All the best from the United Kingdom.
-
simonmlewis
- DevNet Master
- Posts: 4435
- Joined: Wed Oct 08, 2008 3:39 pm
- Location: United Kingdom
- Contact:
Re: How do you evenly spread 3/6 columns in CSS?
Got it. Works a treat.
Love PHP. Love CSS. Love learning new tricks too.
All the best from the United Kingdom.
All the best from the United Kingdom.
-
simonmlewis
- DevNet Master
- Posts: 4435
- Joined: Wed Oct 08, 2008 3:39 pm
- Location: United Kingdom
- Contact:
Re: How do you evenly spread 3/6 columns in CSS?
the flex-wrap doesn't work in safari on an iphone. the DIVs all spread out rather than wrapping.
Love PHP. Love CSS. Love learning new tricks too.
All the best from the United Kingdom.
All the best from the United Kingdom.
Re: How do you evenly spread 3/6 columns in CSS?
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.
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.
-
simonmlewis
- DevNet Master
- Posts: 4435
- Joined: Wed Oct 08, 2008 3:39 pm
- Location: United Kingdom
- Contact:
Re: How do you evenly spread 3/6 columns in CSS?
I really like CSS like this:
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?
Code: Select all
.responsive-row
{
width: 25%;
width: calc(100% / 4);
float: left;
text-align: center;
margin-bottom: 20px;
}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?
Love PHP. Love CSS. Love learning new tricks too.
All the best from the United Kingdom.
All the best from the United Kingdom.