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

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