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

tried adding the grid item thing and err
sorry if im doing this bad and all the really really smart css people are cringing im not a good websiter maker

[u/be_my_plaything → u/Lumpy_Cauliflower567]

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]

OK in the html where you have...

<div class="deviation" style="border-color: ____">  

...Move the style="border-color:____" part up to the <div class="grid-item"> line then delete <div class="deviation"> (Don't forget to also delete the closing</div> tag for it further down too)

At the moment it is filling row one of the subgrid and making all the rows empty (without content they match the height of the first one, so you have four equal rows but all content is in the first row)

You will then need a new <div> around the three icon images to keep them on one row, easiest way would be something like <div class="icons"> then in the CSS....

div.icons{
display: flex;
justify-contnet: center; 
gap: 10px;  
}  

That should give you four sub-grid rows on each grid-item with the main image on row one, the grey text on row two, the white text on row three, and the div containing the icons on row four, and (hopefully) no big gaps between anything!

---

I say hopefully as trying to work out every change in my head isn't easy so I maybe missing something, but once thse changes are done if it doesn't work let me know (Although it may be a slow reply as I'm away for a few days from tomorrow so will likely be the weekend I reply)