Math assistance with my Grid: nth-child(an+b)

I am trying to make a grid that is not dependent on a preset number of columns. I created a small sample to show the situation: Grid in HTML5 and CSS3

This row has only one child.

This row has two children

This is the second child

This row has three children

So this is col 2 of 3

And this is col 3 of 3.

The first child of this row is empty so spanned with the second

This is the second column

This is the first column

The second and third column are spanned

I put a larger sample - describing the problems in more detail - on jsfiddle at My problem now is that if you want this grid to accomodate for more than 3 columns, the CSS-size gets big exponentially. So I am looking for an other solution. I tried to do something like .row>:nth-last-child(an+b):nth-child(cn+d) {} but my calculus skills are a bit rusty and I cannot get it to work properly. Help would be much appreciated. **update** [thirtydot][1] provided an answer that made the CSS much smaller. This [fiddle][2] is the improved version suggested by him. Any other suggestions are still welcome. My 12 collumn Grid still needs 30K for the spanning. [1]: [2]:
This is an interesting idea. Only downside is the current implementation requires empty divs, how would you see this being used in production?

以上就是Math assistance with my Grid: nth-child(an+b)的详细内容,更多请关注web前端其它相关文章!

赞(0) 打赏
未经允许不得转载:web前端首页 » CSS3 答疑

评论 抢沙发

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址

前端开发相关广告投放 更专业 更精准