CSS Grid: justify-self и положение относительно работают некорректно в Safari - PullRequest
Новая
       46

CSS Grid: justify-self и положение относительно работают некорректно в Safari

0 голосов
/ 21 января 2019

У меня есть сетка, и item2 находится в конце области hi b: 

.wrapper > div {
    background-color: gray;
    padding: 20px;
}
.wrapper {
    display: grid;
    grid-template-columns: 1fr 2fr;
    grid-gap: 10px;
    grid-template-rows: 150px 150px;
    grid-template-areas: 
      "a b"
      "c d"
}
.item1 {
    grid-area: a;
}
.item2 {
    grid-area: b;
    justify-self: end;
    position: relative;
    right: -20px;
}
.item3 {
    grid-area: d;
    justify-self: start;
}
<div class="wrapper">
  <div class="item1">Item 1</div>
  <div class="item2">Item 2</div>
  <div class="item3">Item 3</div>
</div>

Мне нужно переместить item2 немного вправо от его позиции, поэтому я использую позицию relative и right: -20px.Он отлично работает в Chrome и Firefox, но в Safari версии 11.1.2 (13605.3.8) кажется, что justify-self: end не работает: я имею в виду, item2 находится на левой стороне области b.Без right: -20px элемент item2 находится в правой части его области.Как я могу это исправить?

Codepen: https://codepen.io/mraimon/pen/ZwzxWe

Заранее спасибо!

1 Ответ

0 голосов
/ 21 января 2019

Вместо этого вы можете использовать отрицательную маржу: 

.wrapper > div {
    background-color: gray;
    padding: 20px;
}
.wrapper {
    display: grid;
    grid-template-columns: 1fr 2fr;
    grid-gap: 10px;
    grid-template-rows: 150px 150px;
    grid-template-areas: 
      "a b"
      "c d"
}
.item1 {
    grid-area: a;
}
.item2 {
    grid-area: b;
    justify-self: end;
    margin-right: -20px;
}
.item3 {
    grid-area: d;
    justify-self: start;
}
<div class="wrapper">
  <div class="item1">Item 1</div>
  <div class="item2">Item 2</div>
  <div class="item3">Item 3</div>
</div>

Или перевести: 

.wrapper > div {
    background-color: gray;
    padding: 20px;
}
.wrapper {
    display: grid;
    grid-template-columns: 1fr 2fr;
    grid-gap: 10px;
    grid-template-rows: 150px 150px;
    grid-template-areas: 
      "a b"
      "c d"
}
.item1 {
    grid-area: a;
}
.item2 {
    grid-area: b;
    justify-self: end;
    transform:translateX(20px);
}
.item3 {
    grid-area: d;
    justify-self: start;
}
<div class="wrapper">
  <div class="item1">Item 1</div>
  <div class="item2">Item 2</div>
  <div class="item3">Item 3</div>
</div>
...