Создание адаптивного текстового поля

Question

Извините за странный заголовок, но я не знаю ни названия, ни простого способа обозначить то, чего я пытаюсь достичь. Я хочу сделать что-то подобное, но я хочу, чтобы оно было отзывчивым, чтобы, если некоторые слова были длиннее, другие слова становились больше, а соотношение сторон (и форма) div оставалось неизменным.

Я сделал пример изображения в Adobe XD, но я хотел бы воссоздать его в CSS.

Answer 1

CSS Grid, вероятно, лучше всего подходит для этого. Насколько отзывчивым будет это, будет зависеть от того, насколько хорошо вы пишете свои медиа-запросы.

* {
  font-family: sans-serif;
  font-size: 1em;
}

.grid-container {
  display: grid;
  grid-template-columns: 1fr 1fr 2fr;
  grid-template-rows: 1fr 1fr 1fr;
  grid-row-gap: 0;
  grid-column-gap: 0;
  width: 160px;
  height: 69px;
  padding: 5px;
  background-color: #3D3D3D;
  justify-items: center;
  align-items: start;
  box-sizing: border-box;
}

.one {
  color: #40C894;
  font-weight: 600;
}

.two {
  grid-row: 2;
  grid-column: 1;
  color: #fff;
  font-weight: 600;
}

.three {
grid-row: 3;
  color: #8A8A8A;
  font-weight: 600;
}

.four {
  grid-row: 3;
  grid-column: 2;
  color: #8A8A8A;
  font-weight: 600;
}

.five {
  grid-row: 3;
  grid-column: 3;
  color: #fff;
  font-weight: 600;
}

.six {
  grid-row: 1 / 3;
  grid-column: 2 / 4;
  color: #8A8A8A;
  font-weight: 600;
  font-size: 2.4em;
  align-self: end;
}

<div class="grid-container">
  <div class="one">38 K</div>
  <div class="two">19 D</div>
  <div class="three">6037</div>
  <div class="four">DMG</div>
  <div class="five">6 MVPs</div>
  <div class="six">2K/D</div>
</div>