[Solved] Alternating column widths at set intervals

[grimski]

I’m trying to create a responsive grid that has a range of columns, some of which have a different width set, at set intervals.

I’ve tried to achieve this using the nth-child selector but I’ve hit a few problems and I’m wondering if it’s possible to do using only CSS.

On desktop, a 4 1/4 grid is used. Each ‘odd’ row has 1 50% width column and 2 25% column. The even rows should all have 4 25% width columns. Where this differs is the 50% columns alternate from being on the left or right…

Here’s a rough wireframe of the grid I’m trying to create: http://postimg.org/image/630ln1rl9

And here’s a CodePen for the basic mark-up
http://codepen.io/moy/pen/rVedEO

It NEARLY works, but after the row with the 50% column on the right, you get 2 rows of 4 columns, which I’d like to prevent if possible.

I’m not too precious on the layout on mobile devices, that’s quite easy to resolve (as in how many rows before another full-width one). But it would be good to get a similar to the desktop on tablet (600+) but in 1/3’s rather than 1/4’s as it is on desktop (960+).

Thanks, hope someone can help with this!

[grimski]

bump :/

[Paulie_D]

bump :/

Please don’t do that…it’s poor etiquette.

If someone can answer, they will.

[grimski]

@Paulie_D Apologies, that wasn’t my intention. It had just been 4 days and the post was 3 or 4 pages back, so I thought the likelihood of it being seen when not active would be slim. I don’t think I’ve done it before so don’t worry I won’t do it again – unless I have something to add, like progress made/more findings.

The image is probably the best guide as to what I’m trying to achieve. I wanted to have 3 different layouts depending on browser width. I thought I could do this with just the nth-child selector, changing it for each media-query – but I don’t think it’s possible now without classes or javascript.

It’s probably clearer in this (new) graphic I’ve created and uploaded here: http://s16.postimg.org/5f2wzyzph/layouts.jpg

Mobile: seems pretty simple, all the items have 50% width apart from the 1st, 6th, 11th and so on, which have widths of 100%.

Tablet: the items would have 33.3% width. Apart from the 1st, 7th, 11th, 17th and so on, which have widths of 66.6%.

Desktop: items would be 25% in width. Apart from the 1st, 10th, 15th, 24th and so on, which have widths of 50%.

…there is a pattern for each, but I don’t think it’s doable with nth-child? Javascript needed?

[gcyrillus]

i believe nth-child and mediaqueries can do the job :
`
li {
width: 24%;
background: lightgray;
margin: 0.5%;
text-align: center;
}

li:nth-child(14n+10),
li:nth-child(14n+1) {
width: 49%;
background: #00f;
}

@media all and (max-width:960px) {
li:nth-child(1n) {
width: 32.333%;
background: lightgray;
}
li:nth-child(10n+7),
li:nth-child(10n+1) {
width: 65.666%;
background: #00f;
}
}

@media all and (max-width:600px) {
li:nth-child(1n) {
width: 49%;
background: lightgray;
}
li:nth-child(5n+1) {
width: 99%;
background: #00f;
}
}`
http://codepen.io/gc-nomade/pen/aOZrEG
side by side it would look like:
http://codepen.io/gc-nomade/pen/RPRmMz/

[grimski]

That is absolutely spot on @gcyrillus!

Obviously I was getting the nth-child bit wrong. In your example I’m guess the:

li:nth-child(10n+7),
li:nth-child(10n+1) {}

Resets the count so it doesn’t go off like my version did?

Another question, which I might need to create a new thread for: I’ve been asked if this layout would work scrolling horizontally rather that vertical.

I can’t really see how this would work without a lot of javascript calculation. As you’d need to know how many ‘rows’ would fit on the screen in each situation (screen width). Also I imagine an amount of the blocks would need to be grouped with a wrapper div – which would prevent the use of different layouts on mobile/tablet?

Thanks again @gcyrillus, that is beyond a massive help! :)

[gcyrillus]

glad i helped,

not sure i get the horizontal scroll.

If you mean: to spray into colums within a set height (window’s height for instance).
Then you will need to drop the float for inline-block behavior
and set some CSS column rules
except the column-count
since you might not know it in advance.

here is what i understood :
http://codepen.io/gc-nomade/pen/YXGYpV

indeed , a new topic would be nice for clarity :)

[grimski]

That’s pretty much spot on for the horizontal scroll too @gcyrillus – I never thought of using CSS columns. I think the mistake I was making was still using percentage widths, which I guess will always squeeze into the viewport rather than forcing the browser to scroll.

When I take the code out of CodePen and put it in an .html file it doesn’t scroll though, am I missing something (probably)?

[gcyrillus]

if it does not scroll it might be because of : height:100%; wich requires a parent with an height set in CSS else it is 100% of nothing and it will use only 100% width avalaible and height will grow.

Try a pixel value or check if inheritance height value is a avalaible.

You might as well have to add vendor-prefix to the column rules manually (Firefoxe for instance still need the -moz- prefix i believe.).

[gcyrillus]

<i>bugs around ? pen being mixed up and unable to edit my own post ?</i>

i remade the horizontal scroll pen

http://codepen.io/gc-nomade/pen/doOPKW

[grimski]

Doh! I think it was just the prefixes, for some reason I thought Chrome would still pick up the column-width and column-gap rules without them.

As I’m on a 27″ iMac, I’ve realised I’ll need a lot of items to fill the screen or I’ll need to change the height/width of each <li> so they’re taller. Otherwise The amount of list-items will fit into 2 or 3 columns on the screen due to the browser height!

Thanks again for all your help. I saved your original CSS if it helps (width browser prefixes):

ul {
  list-style: none;
  padding: 0;
}

li {
  background: rgba(255, 0, 0, .40);
  padding: 0.5% 0;
  height: 14.4%;
  display: inline-block;
  margin: 0.4% 0.4% 0.4% 0!important;
}

ul {
  counter-reset: ulli;
  -webkit-column-width: 350px;
  -webkit-column-gap: 1px;
  -moz-column-width: 350px;
  -moz-column-gap: 1px;
  column-width: 350px;
  column-gap: 1px;
}

html,
body,
ul {
  height: 100%;
  margin: 0;
}

li:before {
  counter-increment: ulli;
  content: counter(ulli);
}

li:nth-child(1n) {
  width: 48.75%;
  background: lightgray;
}

li:nth-child(7n+1) {
  width: 99%;
  background: #00f;
}

[Author]

Posts