No I just set a max-width on the container and margin auto to centre it in the available space. Otherwise your layout would either be fixed to the left or stretch to the width of the largest screen which would be bad for readability.
I did change the height:100vh to min-height as the original author had made a schoolboy error. If you use height then the layout can never grow properly and either overflows or gets scrollbars.
In what way different?
I’m on a mobile at the moment so can’t check but they should look the same. I’ll check when I get back later today.
You never mentioned you were putting images in each column. I assumed it was just column1 had an image and cols 2 & 3 were text content.
If you want images in each column then you probably want each columns as 1fr and centre the image in the available space.
It’s hard for me to second guess what comes next but the basics are in place to adjust as required.
It all depends on the dynamics you need and there are often many ways to do the same thing.
I’m a little confused as my codepen looks the same to me in Chrome, Firefox and Edge. At greater than max-width:1680px the container will be horizontally centered in the viewport leaving white space at each edge. At less that 1680px it will be edge to edge of the viewport with no white space at the edge. It is never just left aligned.
Are you sure you are checking like for like and with browser windows open at the same width?
I can 99.99% guarantee that my codepen looks the same almost anywhere on a modern browser.
Unless you were talking about your implementation of my code and then I’d need to see your actual example?
As far as VScode goes that is largely irrelevant as its not a real browser. Only test on real browsers.
It depends how on what you mean by ‘grid area’ exactly. I assume you mean a structure created by css grid?
Do you need css grid to place images? No.
However if you want to line the images up easily in columns and rows then css grid is a good solution. It’s not the only solution but as usual in css the devil is in the detail.
You don’t want fully responsive? I believe your exact words were:
That sounds more like an adaptive approach where you reduce the number of columns rather than image size (or a mixture of both).
That’s a design question and doesn’t really relate to css until you decide how you want it to look. Once you have decided how it should look then you can work out the best method to use.
If for example you want your images all shapes and sizes and not aligned in columns then css grid would not be the best choice.
If on the other hand you are forcing the images to occupy the same space then css grid is fine.
I suggest you just Google css galleries and find something you like the look of and then try and code it up yourself.
Lastly you need to be clear on what your requirements are supposed to be. This needs to be thought about in some detail and put into words that describe the behaviour you want at every stage and how to handle ‘extravagant’ content (e.g. words that are too long to fit or images that are too big or too small or wrong aspect ratio).
It’s only when you fully get understand what you want that you can start to build
This was an answer to a previous question in the forums about images in a grid.