3

On Mozilla this pen works. But when I switch to Chrome it breaks.

It's just me or something is wrong with browsers?

.container {
  height: 500px;
  width: 500px;
  background-color: beige;
  display: grid;
  grid-template-rows: 1fr;
  grid-template-columns: 1fr;
}

.container h2 {
  position: absolute;
  justify-self: center;
  align-self: center;
  grid-row: 1;
  grid-column: 1;
}
<div class="container">
  <h2>TEXT</h2>
</div>

codepen LINK

Michael Benjamin
  • 346,931
  • 104
  • 581
  • 701
Konrad Albrecht
  • 1,701
  • 1
  • 9
  • 20

2 Answers2

3

It appears that Chrome has deviated from spec guidance on this issue.

The justify-self and align-self properties should work on an absolutely-positioned child element of a grid container.

9.2. With a Grid Container as Parent

An absolutely-positioned child of a grid container is out-of-flow and not a grid item, and so does not affect the placement of other items or the sizing of the grid.

The static position of an absolutely-positioned child of a grid container is determined as if it were the sole grid item in a grid area whose edges coincide with the padding edges of the grid container.

Note that this position is affected by the values of justify-self and align-self on the child.

So, Firefox seems to have this right.

For other centering options see this post:

Michael Benjamin
  • 346,931
  • 104
  • 581
  • 701
0

position: absolute is throwing off Chrome (tested on v62). It seems Firefox interprets the justify-self and align-self attributes as overrides, while Chrome doesn't, hence the different behavior.

Just remove position: absolute and it works.

https://codepen.io/anon/pen/vJRmNR

mechalynx
  • 1,306
  • 1
  • 9
  • 24
  • So its basicly a chrome bug? I need to keep the absolute positioning in this case :( – Konrad Albrecht Aug 20 '17 at 18:12
  • @KonradAlbrecht I'm not sure why, you're telling the element to be positioned absolutely, but you're providing no other positioning information (like `top` or `left`). `justify-self` and `align-self` do the _same thing_ as `position: absolute`, so they conflict. The difference between browsers is how they handle the conflict. Perhaps you can absolutely position the container div instead. – mechalynx Aug 20 '17 at 19:06