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

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

From: Axel Dahmen <brille1@hotmail.com>
Date: Thu, 7 Aug 2014 19:50:35 +0200
To: www-style@w3.org
Message-ID: <ls0e8i$sh4$1@ger.gmane.org>

Thanks for enlightening me!


"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.

Received on Thursday, 7 August 2014 17:55:33 UTC

This archive was generated by hypermail 2.3.1 : Monday, 2 May 2016 14:39:24 UTC