[css3-grid-layout] Dense auto layout

I have read the grid layout module and I think that it is very good, but
there is one thing that bothers me.

It is about the automatic grid placement. I think that it has a problem
with spanned grid items. Namely, it leaves holes of unused space in the
grid in some situations.

The problem arises from step 4.2.2. in the automatic grid placement
algorithm. Namely, if this step is reached with a spanned grid item then
a hole (or more) is left in the grid.

This hole can be wasteful and look bad.

I propose a solution to this problem: a queue of spare grid locations.

This queue would be used to track slots where an item could be placed
afterwards.

Each time the cursor is moved down the remaining unused slots of that
grid row will be added to the queue.

Then, when trying to place a grid item the queue would be checked to see
if there is a location where the gird item would fit.

This would be step 4.2.0. in the algorithm:

"For each location in the spare queue check if the grid item would fit
at that location without overlapping any other item's grid area. If so,
remove the location from the queue and place the item there."

I am not sure how to best deal with the 4.1. case. I am also not sure
about how to best describe adding locations to the queue.

I estimate that this addition should not be computationally expensive.
It does not add any additional passes to the algorithm. More
importantly, queue entries are nearly always used immediately after
being added, ensuring that the queue remains very short, almost always
empty.

I have made a demo implementation of this idea in Flash:
http://megaswf.com/serve/2557900/

This adjustment to the algorithm could easily be controlled by the use
of a property.



Another thing I feel is worth noting, despite already being solved, is
how the existing automatic grid placement algorithm differs from a
sequence of fixed width "display: inline-box" elements. The forced
line-breaks there are horrible compared to how automatically placed grid
items are laid out, nearly always creating major chunks of unused space.

I am looking forward to grid layouts being usable on normal websites.

Received on Tuesday, 5 March 2013 03:05:03 UTC