CSS Grid

When using the grid layout in CSS, divs are placed in a particular way. Each div can span a number of rows and columns. With the default settings, div must come after the previous one in flow order, so when placing a div the browser will look for the first spot that would fit and comes after the previous div.

You will be given the number of columns, a space, then a series of w,h pairs representing the row and column span of each div.

Output the column and row coordinates of the top-left corner of each box, starting from 0 0, all on one line. Each pair of numbers is seperated by a comma.

The grid has infinite height.

Example

Given this input:

4 2,1 3,1 1,2 4,1

We know the width is 4, and the boxes are [2,1], [3,1], [1,2], [4,1]

Greedily aranging the boxes gives us this:

┏━━━┓
┃ ┆ ┃
┣━━━┻━┳━┓
┃ ┆ ┆ ┃ ┃
┗━━━━━┫┄┃
      ┃ ┃
┏━━━━━┻━┫
┃ ┆ ┆ ┆ ┃
┗━━━━━━━┛

Note that the third long box could fix on the third row, however, that would not preserve ordering so we must place it on the second row.

So we output the coordinates of the top left corners:

0,0 0,1 3,1 0,3

External links: MDN