Kevin Powell - Community•14mo ago

Why does Firefox default justify-items: first (last) baseline to start and end?

Hello friends. I was recently helping someone understand what the first and last baseline do within a grid but noticed that Firefox would default to start and end—creating a different result from Chrome and Edge. For the life of me, I cannot find anything on Google that answers my question. This was the example HTML and CSS I was provided.

<div class="container">

  <div class="item one">Item One</div>
  <div class="item two">Item Two</div>
  <div class="item three">Item Three</div>
  <div class="item four">Item Four</div>

</div>

<div class="container">

  <div class="item one">Item One</div>
  <div class="item two">Item Two</div>
  <div class="item three">Item Three</div>
  <div class="item four">Item Four</div>

</div>

.container {
  border: 2px solid goldenrod;
  display: grid;
  height: 600px;
  width: 600px;
  grid-template-columns: repeat(5, 1fr);
  grid-template-rows: repeat(5, 1fr);
  grid-template-areas:
    "a a a b b"
    "a a a b b"
    "c c c d d"
    "c c c d d"
    "e e e e e";
  justify-items: first baseline;
}
.item {
  border: 1px solid black;
  border-radius: 5px;
  height: 70px;
}

.one {
  background-color: lightblue;
  grid-area: a;
}

.two {
  background-color: lightgoldenrodyellow;
  grid-area: d;
}

.three {
  background-color: lightgrey;
  grid-area: c;
}

.four {
  background-color: lightpink;
  grid-area: e;
}

.container {
  border: 2px solid goldenrod;
  display: grid;
  height: 600px;
  width: 600px;
  grid-template-columns: repeat(5, 1fr);
  grid-template-rows: repeat(5, 1fr);
  grid-template-areas:
    "a a a b b"
    "a a a b b"
    "c c c d d"
    "c c c d d"
    "e e e e e";
  justify-items: first baseline;
}
.item {
  border: 1px solid black;
  border-radius: 5px;
  height: 70px;
}

.one {
  background-color: lightblue;
  grid-area: a;
}

.two {
  background-color: lightgoldenrodyellow;
  grid-area: d;
}

.three {
  background-color: lightgrey;
  grid-area: c;
}

.four {
  background-color: lightpink;
  grid-area: e;
}

I would really appreciate some enlightenment or the direction toward a resource I could read. Thank you!

0 Replies

No replies yetBe the first to reply to this messageJoin

Gaming

Programming

Why does Firefox default justify-items: first (last) baseline to start and end?