adjusting height automatically in a grid system according to the wide images and not taller ones
So here is the issue, I have a grid container called with the class
gallery__group applied to it. It has two column. And I am putting images inside a figure element and right now their width is 100% but height-wise each row is as tall as the taller image in that row. I do not like this, I want it to pick the height of shorter ones. How can I do it? Here is a simple React app in codesandbox: https://codesandbox.io/p/sandbox/galler-react-ytgklf2 Replies
on your grid, use align-items: start or align-items: center or align-items end depending where in the cell you want them to vertically align. the default value is stretch but one of the three above will limit them to their intrinsic block size and then align to the respective area of the cell.
grid can be really challengingwithout the visuals in the dev tools. Right click on your grid and choose 'Inspect' then next to your element with the class of .gallery_group there will be a little tag that says 'grid'. toggle this on and youll have a visual of your grid cells. flex parents also have a flex tag.
then in the styles tab, next to any element with a declaration of display: grid or display: flex, there is an icon that allows you to play with some of the different alignment settings. These tools are all really helpful for getting your layout right.
you could also give the img an aspect-ratio with object fit: cover (or contain). that would make all images the same size