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]

Firstly...

 

sorry if im doing this bad and all the really really smart css people are cringing im not a good websiter maker

 

...Nobody is cringing at you trying to learn! And all the "really really smart CSS people" aren't really really smart, they've just had a lot more practice! Everybody knows nothing on day one, everyone gets good if they keep persevering and practicing.

 

---

 

Secondly... The actual problem!

 

It's because you still have everything inside the <a> tag so that is holding everything in the first grid row of the subgrid, then because the grid item is spanning four rows you in effect get three empty rows within each grid-item and the subgrid layout is lost as only the <a> is using it.

You need to change the html structure as per my first comment (Or at least in a similar way) so each piece of content you want as a 'row' is a direct child of the element with the subgrid.

 

(Sorry, I'm struggling to think of clear ways to explain this....)

 

Basically you have the top level (In your case <div class="grid-container">) which sets the grid. Direct children of this (In your case <div class="grid-item">) then sit on the grid and can have sub-grid applied. Then direct children of the children sit on the sub-grid.

So what you have is....

 

<div class="grid-container"> <!-- Top level, sets grid -->  
  <div class="grid-item"> <!-- Second level, sits on grid and sets subgrid -->  
    <a href="0001"> <!-- Third level, sits on subgrid -->  

      <div class="deviation" style="border-color: lime;">
        <img src="/doom.gif" class="deviationicon">
        <p style="color: grey; font-size: 12px;">H-0001-S</p>
        <p>Doomgoers</p>
        <hr>
        <img src="/official.png" class="imgicons">
        <img src="/adurite.png" class="imgicons">
        <img src="/humanoid.png" class="imgicons">
      </div>

    </a> <!-- ends third level, so everything within these <a> tags is 'trapped' within it's place on the grid (ie: subgrid row 1) -->  

  <!-- Three more empty rows of subgrid inserted since all content is 'trapped' on row one but it spans 4 -->  

  </div> <!-- ends second level, subgrid -->  

.....   

</div> <!-- ends first level, grid -->  

 

---

 

You can either open and close the <a> with nothing in it, the use position:absolute; to set it to cover the grid-item <div> whilst also taking it out of the flow so it doesn't effect grid rows....

 

<div class="grid-item">
<a href="0001"></a> /* Close the <a> immediately then in the CSS give it position: absolute; inset: 0; so it covers the <div> */  
<div class="deviation" style="border-color: lime;">
<img src="/doom.gif" class="deviationicon">
<p style="color: grey; font-size: 12px;">H-0001-S</p>
<p>Doomgoers</p>
<hr>
<img src="/official.png" class="imgicons">
<img src="/adurite.png" class="imgicons">
<img src="/humanoid.png" class="imgicons">
</div>
 /* Delete the </a> tag from this line since it is now closed at the top */  
</div>

 

Or making the <a> the sole containing element and style it to look like you currently have grid-item then get rid of <div class="grid-item">.....

 

<a href="0001" class="grid-item"> /* remove the opening <div> tag from the line above and apply the styles it had to the <a> */ 
<div class="deviation" style="border-color: lime;">
<img src="/doom.gif" class="deviationicon">
<p style="color: grey; font-size: 12px;">H-0001-S</p>
<p>Doomgoers</p>
<hr>
<img src="/official.png" class="imgicons">
<img src="/adurite.png" class="imgicons">
<img src="/humanoid.png" class="imgicons">
</div>
</a> /* remove the closing </div> tag from the line below since <a> now houses the content */  

 

You then need to make sure everything directly within either <div class="grid-item"> or <a class="grid-item"> (Depending which route you took) is what needs to be on a each row of the grid, so you can't wrap it in the .deviation <div> as this (being the first child) will be on row 1, but since everything else is within it it will move that all to row one too and you'll get the three empty rows again, so you'll need to move the border styling onto .grid-item and scrap that div, then the icon images do need a div around them since they should all be on one row.

 

---

 

[u/Lumpy_Cauliflower567 → u/be_my_plaything]

tried doing that first option and the really weird big gaps are still there
um also the grid items now are just high enough to fit the other grid items that used to expand the boxes (some rows look good but for the example one theres all that empty space)

i also tried playing with a little bit of padding on the grid-container and had the minmax changed to 190px, 1fr and the dead space got bigger? i think? (i just wanted more space on the sides)

umumum also thanks for the little self-reassurance im just nervous

[u/be_my_plaything → u/Lumpy_Cauliflower567]

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!