Grid размер column и выравнивание элементов

Question

Есть блок с display: grid внутри которого 4 div. Грид делится на 3 колонки и два ряда. Нужно сделать, чтобы ширина первой колонки была равна ширине содержимого <div class="b">, <div class="c"> начинался сразу после b, а <div class="d"> был прижат к правому краю.

Пробовал делать justify-items: start но колонки все-равно растягиваются на всю ширину. Более похожего поведения я добился с justify-content: flex-start;, но тогда не могу .d прижать к правому краю

Для лучшего понимания, прикреплю картинку с желательным результатом

.wrap {
  width: 300px;
  display: grid;
  grid-template-areas: "a a d" "b c d";
  grid-template-columns: repeat(3, auto);
  align-items: center;
  justify-content: flex-start;
  background-color: #eee;
  padding: 0 22px;
  height: 60px;
}

.wrap div {
  border: 1px solid #000;
}

.a {
  grid-area: a;
  background: yellow;
}

.b {
  grid-area: b;
  background: red;
}

.c {
  grid-area: c;
  background: green;
}

.d {
  grid-area: d;
  background: blue;
}

<div class="wrap">
  <div class="b">text b text b</div>
  <div class="a">text a text a</div>
  <div class="d">text d</div>
  <div class="c">text c</div>
</div>

БЛОГ НА HUSL

Grid размер column и выравнивание элементов

Ответы (0 шт):