CODEWITHSUNDEEP
csssafaricss-positioncss-grid
lalezky
lalezky

Reputation: 554

justify-self and position relative does not work correctly

I have grid-box and item2 is in the end of hi's area 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>

I need to move item2 a little bit to right from his position, so I use relative position and right: -20px. It works perfectly in Chrome and Firefox, but in Safari Version 11.1.2 (13605.3.8) seems like justify-self: end is not working: I mean, item2 is on the left side of area b. Without right: -20px element item2 is in the right side of his area. How can I fix it?

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

Upvotes: 2

Views: 160

Answers (1)

Temani Afif
Temani Afif

Reputation: 273649

You can use negative margin instead:

.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>

Or translate:

.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>

Upvotes: 3

Related Questions