Menu
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:
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8">
<title>Grid in HTML5 and CSS3</title>
<style>
* {margin:0;padding:0;}
.row {display:block;position:relative;clear:both;}
.row>* {display:block;position:relative;clear:both;float:left;clear:none;width:100%;}
.row>*:empty {width:0px;}
/* one column in the row */
.row>:nth-last-child(1):nth-child(1) {width:100%;}
/* two columns in the row */
.row>:nth-last-child(2):nth-child(1) {width:50%;}
.row>:nth-last-child(1):nth-child(2) {width:50%;}
/* three columns in the row */
.row>:nth-last-child(3):nth-child(1) {width:33.33%;}
.row>:nth-last-child(2):nth-child(2) {width:33.33%;}
.row>:nth-last-child(1):nth-child(3) {width:33.34%;}
.row>:empty:nth-last-child(3):nth-child(1)+:not(:empty) {width:66.66%;}
.row>:empty:nth-last-child(2):nth-child(2)+:not(:empty) {width:66.67%;}
article {margin:.5em;border:1px solid green;border-radius:.3em;padding:.5em; }
</style>
</head>
<body>
<section class="row">
<div>
<article>
<p>This row has only one child.</p>
</article>
</div>
</section>
<section class="row">
<div>
<article>
<p>This row has two children</p>
</article>
</div>
<div>
<article>
<p>This is the second child</p>
</article>
</div>
</section>
<section class="row">
<div>
<article>
<p>
This row has three children
</p>
</article>
</div>
<div>
<article>
<p>So this is col 2 of 3</p>
</article>
</div>
<div>
<article>
<p>And this is col 3 of 3.</p>
</article>
</div>
</section>
<section class="row">
<div></div>
<div>
<article>
<p>The first child of this row is empty so spanned with the second</p>
</article>
</div>
<div>
<article>
<p>This is the second column</p>
</article>
</div>
</section>
<section class="row">
<div>
<article>
<p>This is the first column</p>
</article>
</div>
<div></div>
<div>
<article>
<p>The second and third column are spanned</p>
</article>
</div>
</section>
</body>
</html>
I put a larger sample - describing the problems in more detail - on jsfiddle at
http://jsfiddle.net/jordenvanforeest/MDv32/
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 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.
692
You can do something similar with display: table combined with table-layout: fixed.
Browser support: http://caniuse.com/css-table (but the limiting factor here is :not() and :empty)
See: http://jsfiddle.net/thirtydot/MDv32/3/
As you can see, it looks virtually identical. With some ingenuity, you should be able to replicate most of the functionality in your demo with the technique used in mine. I commented out the HTML in my demo where I stopped.
CSS:
.row {
display: table;
table-layout: fixed;
width: 100%;
}
.row > * {
display: table-cell;
}
.row > :empty {
display: none;
}
/* for example: */
.row > :empty + :not(:empty) + :last-child:not(:empty) {
width: 33.33%;
}
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
