css-grid items not aligned at the same level

Question

I have this css-grid example...

.toolbar {
  display: grid;
  grid-template-columns: 1fr;
  grid-template-rows: 1fr;
  background: purple;
}

.tb-left {
  justify-self: start;
  background: green;
}

.tb-right {
  justify-self: end;
  background: yellow;
}

<div class="toolbar">
  <div class="tb-left">TB left</div>
  <div class="tb-right">TB Right</div>
</div>

.tb-left and .th-right are not at the same row level.

How can I made them both be at the same level?

You explicitly define a **one column grid**, so why on earth would you expect two columns as a result? — connexo, May 09 '21 at 07:13

score 1 · Accepted Answer · answered May 08 '21 at 11:36

Here you go

.toolbar {
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-template-rows: 1fr;
  background: purple;
}

.tb-left {
  justify-self: start;
  background: green;
}

.tb-right {
  justify-self: end;
  background: yellow;
}

<div class="toolbar">
  <div class="tb-left">TB left</div>
  <div class="tb-right">TB Right</div>
</div>

css-grid items not aligned at the same level

1 Answers1