This hole is experimental, no solutions will be saved. Please leave feedback on the GitHub issue.

CSS Grid

Details

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
0 bytes, 0 chars
Restore solution
All
Compiled from AT&T syntax to x86-64 Linux. Use syscalls to write output.
Fennel is an experimental language, no solutions will be saved. Please leave feedback on the GitHub issue.
Uiua is an experimental language, no solutions will be saved. Please leave feedback on the GitHub issue.
ctrl + enter or

Delete Solution

Are you sure you want to delete your solution(s) for CSS Grid?

If you have separate bytes and chars solutions then both will be deleted.

This is irreversible, please backup any code you care about.

Type I understand and press confirm to continue.