W3C home > Mailing lists > Public > www-style@w3.org > August 2014

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

From: fantasai <fantasai.lists@inkedblade.net>
Date: Thu, 07 Aug 2014 18:36:54 +0100
Message-ID: <53E3B936.4000003@inkedblade.net>
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

This archive was generated by hypermail 2.3.1 : Thursday, 7 August 2014 17:37:23 UTC