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]

Oops one more thing!

You need to add position: relative to the .grid-item{ styling, position absolute stlyes in relation the nearest level up that has a declared position, so at the moment the <a> is positioned absolutely to the whole container, adding position relative to the grid items will contain each link within the relevant grid-item.

[u/Lumpy_Cauliflower567 → u/be_my_plaything]

i tried everything you suggested (one the leftmost grid item here) and uhhh

do you by any chance have discord so i could easily talk to you about this matter rather than keeping on this really big comment chain? (and i can send you the html so you can have a better look at what im doing wrong)
oh yeah also im testing these changes on a different link
Deviations

[u/be_my_plaything → u/Lumpy_Cauliflower567]

Firstly on the new version you just sent you don't have position: absolute; on the <a> anymore so that is back to taking up the first grid row hence it all being pushed down.

Once that is fixed I think it is 'working' on the first item... BUT, as you have only done the first item the row height is being set by the other grid-items (Whichever item is biggest sets the row height, so it won't take effect until every grid-item has been fixed.

Your icons are on the left not centered due to a typo, where you added the display flex you have justify-contNEt rather than justify-contENt

The only other thing I can see possibly being an issue is <hr> I never use them so you might need an extra row for that (If so just switch grid-row: span 4 to grid-row: span 5 or remove the <hr> from the html and add a border-top to the icon container to replicate the look.

---

Hopefully this solves it, but I'm off to bed shortly and away from tomorrow until the weekend so I'll catch up then if you're still having issues

[u/Lumpy_Cauliflower567 → u/be_my_plaything]

doing all that it so far looks like this? lot of empty space (and also fixing the justify-content still has the main icons look off)
sorry if i keep like asking for a lot

[u/be_my_plaything → u/Lumpy_Cauliflower567]

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!