- From: Axel Dahmen <brille1@hotmail.com>
- Date: Thu, 7 Aug 2014 19:50:35 +0200
- To: www-style@w3.org
Excellent!
Thanks for enlightening me!
Cheers,
Axel
---------
"fantasai" schrieb im Newsbeitrag news:53E3B936.4000003@inkedblade.net...
On 08/07/2014 06:28 PM, Axel Dahmen wrote:
> 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.
This is very easy.
ul {
display: grid;
grid-template-columns: 1fr 1fr 1fr;
}
This will create three columns, each sized to 1/3 of the grid.
Then all of the <li> items will be automatically flowed in,
one per slot in the grid.
~fantasai
Received on Thursday, 7 August 2014 17:55:33 UTC