Images in grid areas

having trouble with placing an image in content1

i tried everything i thought of

i would like the image to NOT get smaller as the view port does.

and help with a media query

an image that is smaller, but will fit %100 once my content is in a single column

help me out?

If you want the image at an exact width then make it exact.

e.g.For a 300px width then do this.

.container> div img {

You need all those because you have default image rules to over-ride.

(Or instead you could set the column to 300px width instead of 1fr,)

When you add your media query for smaller screen then change that rule to say 100% for each of the values.

what does this mean?

Hi Paul,

thanks for the assist!

i did all the code you suggested

please see

what does this mean?

i made the image being used in Photoshop at

pixel dimensions
width: 300px height 225px

Document size
width: 7.94 cm
height: 5.95 cm
resolution: 96 pixels / inch

also on larger screen’s there is a hug empty space on the right

also i validated my code. css came back perfect
html came back perfect

the code does not fit, not only in the contents, but also small screens

i kindly ask for an appropriate media query for the images… yes i have tried :slight_smile: no luck

how do i add more images?

thank you!

i know what that means!


You only needed to change the width of the one column not all of them,

Copying the codepen you linked to I assume you are doing something like this.

(Click ‘Edit on codepen’ for full size etc…)

starting to happen!

i saw you put white space around my content

is that better aesthetically?

the code is fine in vs code, but looks different in chrome and fire fox… not sure why that is

the white space is different

i added 2 more images and put them in content2 and content3

looks good!

i adjusted their width to 300px in Photoshop

it seems there is some padding

is that proper?

as i shrink the view port, they line up great!

then i set device tool bar in dev tools and it looks wonderful!


if its not too much trouble, kindly explain what you did to the given code to make it look so nice

i want to learn here :slight_smile:

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. :slight_smile:

It all depends on the dynamics you need and there are often many ways to do the same thing.

It looks the same to me in Firefox and Chrome although I’d probably set the rows all to auto instead of stretching main.

thanks for the explanation

in chrome and fire fox my layout is fixed to the left on a large screen

in vs code its fine


sorry! honest mistake!

lets leave my options open…

too add images to contents or add text

yes, please

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.

yes, it is fine in the code pen

i hope this helps…

yes, my browser goes beyond and below max-width:1680px still positioned to the left

at width 1218px (in dev tools) there is no white space at all. no white space at each edge… above 1218px white space begins only on the right… meaning my layout is shifted to the left.

does that answer

for you?

if not, please clarify your quote

ok… how about this

if we cant find a solution, i can place in image in my code without a grid and still be responsive

seriously, i truly appreciate your patience here

Can I have a screenshot please and a link to the page in question?

We have a solution to what you were asking for. There is no need to change anything unless your requirements have changed or I misunderstood what you want.

Then it is fine everywhere. :slight_smile:

Are we talking about my code that you have copied to somewhere else and introduced a typo somewhere?

There’s something missing here?

Please provide a screenshot and a link to the problem page if it is not my codepen.


ok… a story for you :slight_smile:

i was putting my newest code into

by accident

my goal was

shifted to the left :frowning:

it occurred to me my problem was both on my desktop and laptop… content shifted to the left

so i cleared my firewall cache through GoDaddy… no go

so i call

for some reason, as above, my code went to

and it was flawless! perfect white space!

so i take your code pen and save it as and use file zilla to put into my site


white space perfect!

NO CLUE why did not work… do you have a guess why?.. but that’s now moot

i was simply looking / posting in the wrong place!


1 Like

is it easier / better to place images outside a grid area?

fully responsive

more aesthetically pleasing? (in your opinion of course!)

easier to manage over time?

maybe show some examples?

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 :slight_smile:

This was an answer to a previous question in the forums about images in a grid.

sorry. mis-spoke

yes, i would like to site to be fully responsive

your code pen looks great! thanks!

i noticed in the smallest width the images dont lie in 1 column

sorry if i have that wrong

again, i thank you

Are you talking about his first example (not the grid gallery)?

If you are…I don’t really see it, but you easily can fix it by constraining the img1 class

.img1 { width: 98%;}

This will make the image take up 98% of the container, which guarantees if doesn’t overflow the container.

1 Like

If you meant that last codepen of mine then yes it doesn’t go down to one column because the design didn’t call for it but with another media query that is easily achievable.

It’s late now but I could do a demo if needed tomorrow.

It all depends on what your goal is at the end of the day.

this caught my attention

i kindly ask for a clarification, or a re-phrase, of your statement when its convenient for you :slight_smile:

i guess what i am not understanding is what you are telling me in the 2 paragraphs

yes, i would like to start to build