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
but my calculus skills are a bit rusty and I cannot get it to work properly.
Help would be much appreciated.
[thirtydot] provided an answer that made the CSS much smaller. This [fiddle] is the improved version suggested by him.
Any other suggestions are still welcome. My 12 collumn Grid still needs 30K for the spanning.
: http://jsfiddle.net/jordenvanforeest/rRXq2/ 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前端其它相关文章！