Как сделать такое на grid или flex

Рейтинг: 0Ответов: 1Опубликовано: 24.03.2023

Как отступать слева по максимальной ширине текста? Как это сделать без минимальной ширины текста введите сюда описание изображения

css grid flexbox
Источник: Stack Overflow на русском

Ответы

▲ 2Принят

Возможно, не единственное решение, но я бы делал как-то так:

.wrapper {
  display: grid;
  grid-template-columns: 
    minmax(auto, 1fr)  /* 1 колонка */
    minmax(auto, 1fr); /* 2 колонка */
  width: fit-content; /* ширина всего грида */  
  background: #212a5f;
  color: white;
}
.wrapper div {
  padding: 5px; /* отступы от краев */
}
.wrapper div:nth-child(odd) {
  font-weight: bold; /* первая колонка жирнее */
}       
 
<div class="wrapper">
   <div>Позиция</div>
   <div>6</div>
   <div>Класс героя</div>
   <div>Хил</div>
   <div>Часов в игре</div>
   <div>567 часов</div>
   <div>Режим игры</div>
   <div>Аркада</div>
</div>