In my test (Dev Tools > Inspect), there was an extra <tr> full of empty <td>s. But because everything was empty, it didn’t show.
But I think you can do this more simply. @vilc suggested flexbox. I’m not sure that will work, although it could well be possible. But css-grid definitely will.
In your main tiddler:
<div class="my-grid">
<div class="header">Header here</div>
<$list filter = [{dataItems}splitregexp[\n]]><div><<currentTiddler>></div></$list>
</div>
In your stylesheet:
.my-grid {
display: inline-grid;
grid-template-columns: repeat(5, auto);
&>div {border: 1px solid #ddd; padding: 0 7px;}
&>div.header {background: #f0f0f0; font-weight: bold; text-align: center; grid-column: 1/6}
}
And that’s it.
Ideally some of those CSS values would come from references to your theme stylesheet, and not hardcoded 7px, #f0f0f0, etc. But that’s a small refinement.
Your screenshots have a dynamic header and a slider for what you call rowcount (which I would much prefer to call columns or column-count!). We can do that by making parts of the CSS dynamic. I would move .my-grid {grid-template-columns: repeat(5, auto);} and .my-grid >div.header {grid-column: 1/6} out of the general stylesheet and inline them in the markup, replacing the 5 with a reference to rowcount and the 6 with one more than that, keeping the rest of the general stylesheet intact. And I would do the dynamic header calculation just as you already are.
That would look like this:
title: Table Using CSS Grid
rowcount: 5
''Items in row: <$range field="rowcount" min="1" max="15" default="5" increment="1"/> {{!!rowcount}}''
<$let items={{{ [{dataItems}splitregexp[\n]count[]] }}} lines={{{ [<items>divide{!!rowcount}ceil[]] }}} full={{{ [<lines>multiply{!!rowcount}] }}} >
<div class="my-grid" style=`grid-template-columns: repeat(${[{!!rowcount}]}$, auto);`>
<div class="header" style=`grid-column:1/${ [{!!rowcount}add[1]]}$;`>Items: I:<<items>>/F:<<full>>/L:<<lines>></div>
<$list filter = [{dataItems}splitregexp[\n]]><div><<currentTiddler>></div></$list>
</div>
</$let>
<style>
.my-grid {
display: inline-grid;
&>div {border: 1px solid #ddd; padding: 0 7px;}
div.header {background: #f0f0f0; font-weight: bold; text-align: center;}
}
</style>
You can test by downloading this file and dragging it to a wiki: css-grid.json (1.1 KB)
