Elements in Line

In HTML there are different ways to keep elements in line, the problem comes when we require several smaller elements, our thumbnails, and the selected image which will be much larger and out of line. If the hero image is portrait then it makes sense to have the thumbnails in column, whereas if the large image is landscape then the thumbnails would be better displayed in a row.

According to W.S.Toh the methods are as follows:-

Flex

One of fastest and easiest with additional controls.

Grid

Maybe better as we control the layout using fr (a bit like tkinter's grid method).

Table

Rather funky method.

Float

Required a clearfix container - semi-hack in horizontal line but would be even more of a problem in the vertical column.

Inline-Block

Required a dummy comment in the HTML to work in line. In column mode it is even worse.

Flex works well in one dimension, row or column, on the other hand grid is made for a two dimension situation row and column.

Horizontal Scroll

Block

Makes a column.

When making a horizontal scroll application the enclosing container starts as a narrow width tall object, with the elements sitting as a column. The enclosing container is rotated through a right angle, so the elements end up in line, but each element also need rotation.

Different Elements

How an element behaves is primarily influenced by its inate block or inline characteristic, so an image has to be treated differently to text.