Unexpected Horizontal Shift in Grids

HTML-CSS
#1

The code below gives me this layout.

Screen Shot 2021-02-15 at 10.28.56 AM
Screen Shot 2021-02-15 at 10.28.56 AM1062×662 7.11 KB

If I want item 3 to occupy the last 2 rows I will add - grid-row: 2 / 4 to .d3 - and I thought that would just extend the yellow to the bottom of the container. Well it does do that but unexpectedly - it also places item 3 to the left and I can’t understand why a property that should only affect the vertical dimension also had this unexpected effect on the horizontal alignment.

<!DOCTYPE html>
<html lang="en">
<head>
  <link href="https://fonts.googleapis.com/css2?family=Ranchers&display=swap" rel="stylesheet">
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>All Things Grid</title>
  <style>
    .d1 {background: rgb(255, 51, 0);
        grid-column: 1 / 4;
      }
    .d2 {background: rgb(255, 153, 0);}
    .d3 {background: rgb(255, 230, 0);
   
    }
    .d4 {background: rgb(0, 255, 0);}
    .d5 {background: rgb(0, 132, 255);
        color: yellow;}
    .container  {
      width: 90%;
      background:rgb(163, 163, 156);
      padding: 20px 0px 20px 30px;
      font-family: "Ranchers";
      font-size: 30px;
      display: grid;
      grid-template-columns: 1fr 100px 2fr;
      grid-template-rows: 130px 130px;
      grid-gap: 10px 15px;
      }
    .SA {
      padding: 15px;
    }
</style>
</head>
<body>
  <div class="container">
    <div class="d1 SA">1</div>
    <div class="d2 SA">2</div>
    <div class="d3 SA">3</div>
    <div class="d4 SA">4</div>
    <div class="d5 SA">5</div>
  </div>
  
</body>
</html>
1 Like
#2

Looks like items with position are placed first and then all the others. In your case it would be .d1, then .d3 and the others fill the empty spaces.

Auto-placement in CSS Grid Layout - CSS: Cascading Style Sheets | MDN

1 Like
#3

I get it - positioned items take priority - thank you! I didn’t know that!

#4

I could point out some finer details here.

Applying a grid value (e.g. grid-row: 2 / 3) to an entity nested in a display: grid; parent is not the same as assigning a position value to that entity.

Let’s break this down a little because there’s a few things happening.

If you don’t explicitly assign a position value to an entity by using any of these: position: relative/fixed/absolute/sticky/;, then that element will default to having its position value as position: static;.

Where:

An element with position: static; is not positioned in any special way; it is always positioned according to the normal flow of the page.

  • The flow of the page reads from top left to bottom right.

  • children of a display:grid; with no position declared (hence defaulting to static) will place themselves in the grid cells in order of the normal page flow.

Next we add in a grid collumn value for a child element - without declaring a row value.

The child element will:

  1. Prioritize above other siblings that lack any grid value declaration.

  2. Reference its position value, which is the default static, and use that to position itself in the page flow.

To stop this from happening:

  • Make sure all siblings in a parent have a position type defined beyond the default.

  • add an x coordinate (row) value to the child, ensuring that it prioritises it’s x value in relation to the parent grid rather than page flow.

Hope this helped conceptualize what’s happening here a bit more for you.

#5

Thanks so much Professor ClownPie🙃 for that really good detailed response to my query. Your answer will have me going back over my notes about everything to deal with position. I have gone over it before but there is so much to remember with html that I must confess to having forgotten the details of position by the time I am studying the finer points of display:grid. Hopefully it will begin to jell together at some point.

#6

Me again, same person that wrote that for you, different profile though (superfluous context notwithstanding).

There is a lot to remember, though do try to approach things from a holistic perspective.

With respect to position in the context of a grid. Consider page flow as the root behavior associated with displaying entities relative to the raster space; and grid as a declared deviation with respect to that expected flow.

Holistics are involved there, and to further that, consider that in this context, simply defining a display: grid; argument achieves precisely a specific quantization of the declared coordinate space (the parent object’s content box), and nothing more.

As per page flow (which we should always think in terms of outside of a declared deviation) children within that space (nested divs) will merely fill that quantized space following root flow defined in DOM markup (order of code) - as no position has been declared with respect to the entities within that space.

You may find this kind of holistic aproach to conceptualizing code helpful.

Each basic entity, ie each div can be though of as an enviroment, a possibility space of declareable rules and attributes. Wherein which entities within that space follow those laws.

I would argue that it isnt so important to mentally catalogue the syntax as it is to move to internalize the function of a declaration; understand it’s relationship to the system, and consider the defined rules of the environment in question, and on so down the chain with respect to how successive entities in turn refine and specify an intended function.

Holistics. I’m of the opinion that this kind of aproach is key to mastering a conceptual grasp of all this jargon so to speak :slight_smile: - Indeed, there is a deeper set of things at play, and moving to understand things on that level is certainly the winning formula.

Do excuse my rather non sequitur tangent by the way. This interaction tapped in to something quiet dear to me.

I hope you gained something from this either way.

#7

Umm… … … Thank you - I think - for that PhD dissertation on the quantum basis of html. Perhaps on my achieving that lofty level of understanding of html, I can make sense of it one day but I must confess - not at the moment. So sadly, for the time being, I will have to continue plodding through the bite size - readily comprehensible - lessons given in this curriculum and just maybe, one day we’ll be able to converse at an equal level🙃