unable to divide the section into equal 4parts using grid
parent container code
.weather-forecast-today{
border: 2px solid blue;
display: grid;
width: 60%;
height: 60%;
grid-template-columns: repeat(2, 1fr);
grid-template-rows: repeat(2, 1fr);
}
i used grid which divided the section into 4 equal parts but when i added image its becomes like this. if i change the size of the image it becomes equal. i dont want to mess with the image size but wants image to change size itself so it will fit. i tried object-fit:contain but that didnt work
3 Replies
that's probably because of the fixed height. if there is no space for equal rows within that 60% height, it will smoosh
but to be sure, we need a bit more than the container alone, also what is around and inside of it.
if you want to scale the image to the available size, you could do something like this
https://codepen.io/MarkBoots/pen/GRBpXbm
screenshot, because i've removed the pen
