css grid element placement chrome vs. firefox

Question

I don't know if this is a problem with my code, or a problem with chrome's implementation of the grid spec (or maybe firefox's), but I am seeing elements be misplaced within their grid if I specify a relative position adjustment.

Looking at the following:

HTML

<div class="sheet-container">
  <div class="sheet-header-block sheet-one"></div>
  <div class="sheet-bottom-left sheet-corner sheet-one"></div>
  <div class="sheet-top-right sheet-corner sheet-one"></div>
  <div class="sheet-header-block sheet-two"></div>
  <div class="sheet-bottom-left sheet-corner sheet-two"></div>
  <div class="sheet-top-right sheet-corner sheet-two"></div>
  <div class="sheet-header-block sheet-three"></div>
  <div class="sheet-bottom-left sheet-corner sheet-three"></div>
  <div class="sheet-top-right sheet-corner sheet-three"></div>
</div>

CSS

.sheet-container{
    display:grid;
    grid-template-columns: 80px 80px 80px;
    grid-template-rows:40px;
    grid-gap:5px;
    grid-template-areas:"one two three";
    background-color:white;
    width:100%;
    height:100%;
}
.sheet-header-block{
  background-color:red;
}
.sheet-one{
  grid-area:one;
}
.sheet-two{
  grid-area:two;
}
.sheet-three{
  grid-area:three;
}
.sheet-corner{
    position:relative;
    transform:rotate(45deg);
    height:2px;
    width:5px;
    background-color:black;
}
.sheet-bottom-left{
    align-self:end;
    top:-2px;
}
.sheet-top-right{
    justify-self:end;
    left:-4px;
}

In firefox, this code results in the corner divs being positioned at their respective corners of the header blocks, but repositioned upward by 2px and and left 4px respectively.

In chrome, having any position adjustment negates the justify-self or align-self properties and puts them in the top-left corner of the header-block. Does anyone have a suggested fix for this?

EDIT: I only need to support the latest couple releases of chrome and firefox. Additional compatibility is of course a plus. Due to the development environment, only classes can be used.

EDT2: Fiddle of the issue. The fiddle uses Warren Wan's suggested solution, although it still does not fix the issue in chrome 64.0.3282.167 (Official Build) (64-bit).

Answer 1

You write wrong css . .sheet-top-right CSS should be left: 0;top: 2px; . Because of your understanding with justify-self: end; then means content will show automatic in right edge. If you set rotate: 45(deg) you need to set top or bottom position .

FireFox test result with FireFox version .

Chrome test result and Chrome version 63.0.3239.132 (Official Build) (64-bit)

Note: you should write css prefix for support older browser .

.sheet-top-right{
    justify-self:end;
    left: 0;
    top: 2px;
}

 .sheet-container{ display:grid; grid-template-columns: 80px 80px 80px; grid-template-rows:40px; grid-gap:5px; grid-template-areas:"one two three"; background-color:white; width:100%; height:100%; } .sheet-header-block{ background-color:red; } .sheet-one{ grid-area:one; } .sheet-two{ grid-area:two; } .sheet-three{ grid-area:three; } .sheet-corner{ position:relative; transform:rotate(45deg); height:2px; width:5px; background-color:black; } .sheet-bottom-left{ align-self:end; top:-2px; } .sheet-top-right{ justify-self:end; left: 0; top: 2px; } 

 <div class="sheet-container"> <div class="sheet-header-block sheet-one"></div> <div class="sheet-bottom-left sheet-corner sheet-one"></div> <div class="sheet-top-right sheet-corner sheet-one"></div> <div class="sheet-header-block sheet-two"></div> <div class="sheet-bottom-left sheet-corner sheet-two"></div> <div class="sheet-top-right sheet-corner sheet-two"></div> <div class="sheet-header-block sheet-three"></div> <div class="sheet-bottom-left sheet-corner sheet-three"></div> <div class="sheet-top-right sheet-corner sheet-three"></div> </div> 

Answer 2

Its due to CSS cross browser compatibility, do this and you should be fine:

.sheet-bottom-left{
    -webkit-align-self:end;
    -moz-align-self:end;
    align-self:end;
    top:-2px;
}

.sheet-top-right{
    -webkit-justify-self:end;
    -moz-justify-self:end;
    justify-self:end;
    left:-4px;
}

Note: you might also need to add the -moz- and -webkit- flag to "transform" also.