Make all grids in one fixed height

[aliibra9214]

hello everyone
i wanted to make all the grids to be in one fixed height no matter how much text have, after an hour im really confused any help will be appreciated
this is my codpen

[DanielHuebschmann]

Hello,

give .card-content a min-height, 300px looked ok.

[lasjorg]

You might also make each card a grid container. Give it three rows and give the image and info an auto value and the content 1fr.

.card {
  display: grid;
  grid-template-rows: auto 1fr auto;
}

That way no matter how much content is added to the content part of the card they will all just grow as tall as they need to be. Considering the type of content it is (at least in the real world) you won’t know how much text each card might be given (it might be coming from an API/CMS). It should be said that when the cards start to wrap they will again shrink/grow as needed which may or may not be what you want, but it seems like a natural layout to me.

[aliibra9214]

thank a lot @DanielHuebschmann
i have another issue when i want to resize my window the right side of the grid going off the border

[DanielHuebschmann]

Hi,

what I offered is a quick fix, Iasjorgs suggestion working with grids is better in the long run. If you want to turn this into a profession, you can really never predict how much your costumer wants to squeeze into those boxes.

Best restart, always mobile first. I suggest one big outer container with flex or grid to organize the cards, then turn each card into a small flex or grid container.

[aliibra9214]

thank you @DanielHuebschmann and @lasjorg i will consider this approach.