Grid layout in elm-ui


I’ve been working through the “Photo Groove” example from “Elm in Action”. Not knowing anything much at all about html, I found that part very unintuitive so decided to try rewriting the user interface using elm-ui instead of Html. Overall it seems much easier for a beginner with no web development background to understand. However…

The Photo Groove user interface includes a section displaying thumbnail pictures. In the book it is created as follows:

, div
[ id “thumbnails”, class (sizeToString model.chosenSize) ]
( (viewThumbnail model.selectedUrl)

stringToSize converts an enumerated value (a type Small, Medium, Large) to a string, which is the “class” (whatever that means) of the

. There is some chicanery in a css file that tells the browser what size image to display based on the “class” string.

viewThumbnail creates a for each photo (and does some other stuff with “selectedUrl” that is not relevant to this question). The result is a

node that contains an arbitrary number of nodes, which end up being displayed as a grid (at least it looks like that, it may just be a line of them that get wrapped when it gets too wide).

Can anyone point me to an elm-Ui Element that is equivalent to that

? It doesn’t seem to me to be a row or a column; table wants two lists; and I can’t find any other container that will take a list of images.

Other than that I have to say Elm is much easier than I’d expected, at least at the super novice level; I still carry serious brain damage from early conflict with C pointers in the 1980’s!


I’m not sure I know exactly what you’re looking for based on just your description, but have you looked at wrappedRow ?

Sorry about not being clearer, I think the tag names disappeared from my post because I out then inside gt / lt signs and didn’t realise they needed special treatment.

Anyway, I shall try wrappedRow forthwith. …


I use wrapped row a lot. Makes things fit into small screens .

worked a treat, thanks.

This topic was automatically closed 10 days after the last reply. New replies are no longer allowed.