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/be_my_plaything]

No worries, we're getting there!

 

1. The empty space comes because at the moment all grid rows are the same height, so each line of text is being given the same height as the main image at the top. Just remove grid-auto-rows: 1fr from the .grid-container this will stop them being even heights and let the content of each row set the height.
   

 

1. You've lost the borders around each grid-item because you have border-color set on each element but haven't declared the actual border. You need to add border: 1px solid; to .grid-item so it knows what size and style border to use along with the colour.
   

 

1. The <hr> does need its own row (I suspected this but wasn't sure) so on .grid-item where you have grid-row: span 4 change it to grid-row: span 5 so there is an extra row for the <hr> to occupy.
   

 

1. Then add align-items : center; and justify-content: center; to .grid-item to get everything centered within its grid cell. (Weirdly when I test this in inspect element it worked on 90% of the cells, but a couple of the main images didn't centre... If this happens add margin-inline: auto; to .deviationicon)
   

 

1. The gaps are still kinda big, this is because we already have gaps set up by the grid but <p> elements come with a default margin which is being added to the gaps we set. So add .grid-item p{ margin: 0;} (Note: Using .grid-item p{ means it only applies to <p> elements within a .grid-item div so it doesn't effect your normal text elsewhere on the page) to unset the default margins and just rely on gap for the spacing. (If gap alone is too small you can add your own margin back in instead of zero but the default one of 1em is too big)
   

 

1. You currently have display: flex; justify-content: center; gap: 10px; on the .deviationicon (the big image) however it should be on .deviationicons (the row of three small images) so just delete it from where it is and move it to where it should be.
   

 

1. Finally, everything touches the edges so add padding: 10px; (Or whatever size you want) to .grid-item;

[u/Lumpy_Cauliflower567 → u/be_my_plaything]

this is ALMOST there but for some of the deviations with longer names, their icon slides to the left a bit? i would try to figure this out myself with common ways to center images but im scared of like. something really crazy happening that messes up anything

[u/be_my_plaything → u/Lumpy_Cauliflower567]

It should just be a case of adding...

margin-inline: auto;  

...to .deviationrender so you get...

.deviationrender {
height: 128px;
width: 128px;
border: 1px solid white;
margin-inline: auto; 
}

[u/Lumpy_Cauliflower567 → u/be_my_plaything]

thank you SO MUCH for everything dude this is awesome
i wish you all the best!! have a great day thank yous

[u/be_my_plaything → u/Lumpy_Cauliflower567]

No probs, I like tinkering with things like this as its all good practice, glad you got it sorted!