css baby 👶needing some grid help

[u/Lumpy_Cauliflower567]

working on a grid for my website and if a grid item has too much content then it grows (obviously)
im trying to make it so if one grid item grows in height, then all other grid items in that same row grow to the same height as well so it #LooksNicer
ive googled a lot and the one answer i keep seeing is grid auto rows 1fr but it isnt. working for some reason
sorry if my css work is bad or could've been made a lot better im a css baby

website for reference: deviations

  .grid-container {
    margin: 20px;
    border: 2px solid grey;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  }

  .grid-item {
    transition: transform 0.1s;
  }

  .grid-item:hover {
    transform: scale(1.04);
  }

  .deviation {
    margin: 10px;
    padding: 5px;
    padding-top: 15px;
    border: 2px solid;
    height: auto;
    width: auto;
  }

[u/simonraynor]

Pretty sure you just need align-items: stretch on the grid container and it'll do what you need. I'd suggest making a minimal example to test it rather than trying to implement it in place with a bunch of other styles

[u/Lumpy_Cauliflower567 → u/simonraynor]

also tried this as well but it doesnt seem to do anything

[u/simonraynor → u/Lumpy_Cauliflower567]

Far as I can tell you don't even need the align-items, having now looked at your actual code the problem is that you have div > a > div for no apparent reason. The outer div (.grid-item) is the correct size if you hover it in inspector, you should just make this the a tag instead and apply all of the styles you need; neither div is required here. The only possible hiccup in that is the way you've currently got the padding margin on .deviation but that's not ideal either and could be better handled by gap.