Hello, this is my first HTML/CSS coding project. It is a tribute page to Mac Miller: https://codepen.io/ian-matsumoto/pen/qBZLXBV. I am struggling with coding my grid layout. Firstly, I would like the grid I currently have to be smaller and more centered. I am trying to arrange all the smaller album covers into a 3x3 square shape, with the longer album cover in the fourth column taking up two rows and the list underneath. I have tried numerous things, but can’t seem to find the problem. If anyone has time to help a novice like me, it would be greatly appreciated.
So can you explain what you’ve tried so far?
I think it makes sense to simplify this by removing the outlier and trying to create it without it to grasp the concepts and some experience.
Good morning. So I tried a couple of things to rearrange the images. Firstly, I just had a 3x3 grid and had the longer picture and text element outside of the grid container. I used flex to position the pictures to how I wanted to format it, but that wouldn’t look right on different window sizes. I also tried to reposition the grids using “grid-template-areas”. To center the grid I tried messing with things like ‘align’, ‘left’, and ‘margin’.
A lot of what I tried didn’t really do anything to the images or the grid. So I’ve just been going through the lessons again to see if anything clicks.
So it seems you updated it,
Regarding the original problem:
I would always try to question my design decisions based on maintainability and upgradability. E.g. an artist could publish a new album, would it be easy for you to upgrade your project or would you have to rework a lot of stuff? Building a fixed size 3x3 grid in this example is probably not the best idea.
Here is a site with some simple to implement CSS Flexbox Layout Patterns.
Thanks for the help! I’ll try to change the layout to a flexbox pattern. In this particular case, I don’t think there’s gonna be any new albums being released seeing as he passed in 2018 but still good advice. My code could definitely use some polishing.