A new site, grid, flex design and what to choose. How to do it?

[NorseMan]

A small draft is attached further down in the post. What I'm wondering is how the rest of you here who are familiar with grid design and flex box would set up the page. Below you see some examples of different GRID and FLEX solutions (the only thing that has not been considered or determined is the spacing between the boxes):




I am also attaching some pictures to illustrate some possible solutions. Here is one example:




In the example above, I am thinking of using a banner that stretches across the entire page at the top, i.e. a "HEADER" with a NAV bar below. NAVbar and HEADER are locked so that scrolling does not follow. Below that follows the main content with two bars on each side. The left bar is reserved for a small menu later in the project or at a later time.


The second example (shown below) shows 5 boxes lined up next to each other. For each line, there will be 5 new boxes. This is for use on an info page, and for me, this seems sensible, but I dont know. So this is intended only on the main/front page(s). At the top of the page, there will also be a HEADER with a NAV bar below, just like in example 1. Sites this front page is linking to will have the design shown in example 1.




Backend in this system which will be sewed together with PHP and a MySQL database, and of course CSS(3) and HTML(5). I already have some things ready, and I probably need help with a lot later. I will come back to this in another thread. This thread is about choosing a design. Which design would you go for?

Who would you choose? Example 1 or 2? Or 2 and 1 assembled as described above? What if I go for the last example, what would be the best solution for the image that is stretched over the entire top and shaded out down the sides. Would it be common to split this image into multiple parts on the pages, or run a regular image that fits the entire top of the page with arches and everything? What would you do here?

I prefer to use 1 and 2 together, but then I'm onto something I've "NEVER" done before. Then there will be additional programming (and a completely different DB?). For this solution I think, or maybe I will need a lot of help and guidance. Thanks for all input and feedback.

Here is the draft I was talking about in the beginning:

 

[Michalio]

In general the flex box is easier to use, you can simply create a gallery view with 1, 2, 4 or more item in row depends on resolution and simply switch the view to list view by changing one class in the items container element.
If you want to put items of different type mire precisly then you need to use grid. For example when you want to place each elements inside the gallery and list view. In the first one you need to srt the large preview and smaller in the list view. Each other element also will have dedicated position inside the grid depends of type and view like title, price, action button, etc.
Which template you should use for your site? I don't know, but you should try the simplest one that match your criteria. If you create a simple website then the adding too much navigation and menus may be the reason why the users leave the website. If you are working on something more complex then you can add additional menu to make the user expirience much better, but still it will depends on the website contents

 

[NorseMan]

Will flex and flexbox mean the same as setting up the web page with X number of DIV boxes and then controlling them with CSS3. So, if you imagine that the DIV boxes are parallel both vertically and horizontally (like making a grid), they will be adjusted with CSS and form the intended and planned design. Because then you probably also want to make the DIV boxes different in position and size.

Is there something here that I am wrong with my assumptions? Is this partly the intention/principle of the flexbox?

Much of this I already know, but I need to have it confirmed, because what I read online and in books are so different. It is possible that I am misunderstanding because bad English etc, but a confirmation of what is right and correction of what is wrong would be nice.