I’m trying to create a screen part of which lays out like the screenshot. I will refer to it as container1.
Above container1 will be a masthead and a bar with Search, Login, and Register. Below container1 will be a footer bar to hold author, date modified, and contact button.
As you can see, there are 7 different child areas in container1. I have written a CSS file for each child to contain styling for that child. I have a CSS file for styling container1.
I’ve experimented trying to lay it out with just HTML and CSS but I’ve run into issues. I did some reading on Flexbox and Grid and decided that Grid would be better based on things I read. I’m trying to learn in baby steps and Flexbox seems a bit too much for me at the moment.
If I’m wrong in choosing Grid, please tell me and suggest why. If Grid is the right way to go, the next question is, ‘Am I using Grid correctly?’ Should it be multiple Grids, or is one sufficient?
Trying to learn intermediate CSS may not be the best approach in your learning journey.
Use simpler methods, then become better at them. When you become proficient (know the advantages, disadvantages, have some experience using them, and know when not to use them), then consider moving on to the next layout option.
This way you can build a repertoire of skills and knowledge which you can call upon as needed.
Here is a suggestion:
Use a flex container for photo 1 and caption 1, photo 2 and caption 2
Use another flex container for photo 3 and caption 3
While flex is generally best for single dimension layouts. and grid for multiple dimensions, no reason you cannot start small, then build your way up.
I managed to get my page almost done. There are still a few things to fix and make work properly. Some of those will require javascript which I’m still doing the tutorial on.
