Sun Dial Menu
Menu Flex or Grid

Flex or Grid

I admit that I didn't realise that this was such a big issue. I guess that my autodidactic approach to web design has led me to this observation through the "back door".

Although I have not explored this in great detail the best explanation I have found so far is from I need to read their article on the subject in more detail.

In my somewhat "free-hand" approach to layout design I used the terminaology Image-Grid for my page Responsive Image Grid. Looking more closely at the code I see that it is using a -flex technique (for my responsive image grid). I think that I copied the code from the W3C website (see link below).


The code below is from my Responsive Image Grid page. Although it is called "Grid" it is a "flex" design.

The CSS for the flex-grid:

/* Create four equal columns that sits next to each other */
.columnr {
-ms-flex: 25%; /* IE10 */
flex: 25%;
max-width: 25%;
padding: 0 4px;

.columnr img {
margin-top: 8px;
vertical-align: middle;
width: 100%;

The css-tricks expanation:

At the moment there is a lot to take in. I copied the first image below (I hope they don't mind too much!):

I don't really see the 1D and 2D nature of some of the description and comments from other readers.

Site design by Tempusfugit Web Design -