- From: fantasai <fantasai.lists@inkedblade.net>
- Date: Thu, 07 Aug 2014 18:36:54 +0100
- To: Axel Dahmen <brille1@hotmail.com>, www-style@w3.org
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:37:23 UTC