6 Replies
https://codepen.io/James-Belle/pen/jOjNVdX?editors=1100
as you can see the cat images size is like 230px
and each row contains 3 of them
so the 3rd grid item's width is being altered to 690px ( 3 * 230px )
how do i make the 3rd grid item width be the same as the other 3 grid items ( there are total 4 grid items each of the size 1 fr )
This should do the trick š
I'd also add
display: block to that declaration as well, just as part of a general "reset"Just to expand slightly on Kevins answer...
If you don't define the width of an image, it will automatically display at its "natural" size, in this case 230px.
By adding
max-width: 100% you are telling it to never be larger than 100% of it's container so again, in your case, this will be the width of the grid column.wow i didnt know that
it works now thanks guys
btw when i dont add "display: block" on the img, there remains some space between the rows
why is that?
By default images are inline elements, much like a span or href. This means that they automatically get the same bottom spacing/padding (call it what you like) as the current font. Fonts have this bottom spacing to allow room for the lowercase letters such as "p", "j" & "y" that expand below the baseline.
This might seem strange now due to the way that modern web design treats images but bear in mind that a lot of these default settings come from the early days of HTML, even before CSS, when things were much simpler.
To resolve this, as Kevin has mentioned, it is very common practice to add a "reset" function, normally towards the top of the CSS file, that changes the default behaviour of images.
In it's simplest form this might look like this:
ooo i get it
thanks
š