[css-grid] How can I dynamically fill a grid?

• From: Axel Dahmen <brille1@hotmail.com>
• Date: Thu, 7 Aug 2014 19:28:36 +0200
• To: www-style@w3.org
• Message-ID: <ls0cva$cv6$1@ger.gmane.org>

Hi,

I just read the Grid spec but I don't seem to find some kind of a definition 
creating a grid resembling the following rule:

"Have {n} columns. No matter how much grid items will be created, start a 
new row every {n}th item."

For example, I want to data bind a <ul> element. No matter how much <li> 
items will be created by the data binding, they all shall be laid out in a 
way that each <li> element either creates a grid item horizontally next to 
the previous grid item, or - every "GridItemIndex % {n} == 0", start a new 
row.

So, I need a CSS definition similar to something like:

ul {display: grid;}
li {grid-columns: 3;}

Resulting in:

---------------------
<ul>
  <li>[1]</li>
</ul>

---------------------
[1]
---------------------


---------------------
<ul>
  <li>[1]</li>
  <li>[2]</li>
  <li>[3]</li>
</ul>

---------------------
[1] [2] [3]
---------------------


---------------------
<ul>
  <li>[1]</li>
  <li>[2]</li>
  <li>[3]</li>
  <li>[4]</li>
</ul>

---------------------
[1] [2] [3]
[4]
---------------------


---------------------
<ul>
  <li>[1]</li>
  <li>[2]</li>
  <li>[3]</li>
  <li>[4]</li>
  <li>[5]</li>
  <li>[6]</li>
</ul>

---------------------
[1] [2] [3]
[4] [5] [6]
---------------------


---------------------
<ul>
  <li>[1]</li>
  <li>[2]</li>
  <li>[3]</li>
  <li>[4]</li>
  <li>[5]</li>
  <li>[6]</li>
  <li>[7]</li>
</ul>

---------------------
[1] [2] [3]
[4] [5] [6]
[7]
---------------------



Your help is appreciated.

Thanks,
Axel 

Received on Thursday, 7 August 2014 17:28:51 UTC