0

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

3
  • Как по мне тут простая таблица лучше подходит — она сходу решает этот вопрос, нет? 24 мар в 13:55
  • Хотелось бы научиться это делать на grid
    – GRCR13
    24 мар в 13:58
  • Понял, хорошо, посмотрю что можно сделать 24 мар в 13:59

1 ответ 1

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>

4
  • Спасибо. Так и сделаю !
    – GRCR13
    24 мар в 14:28
  • Рад, что смог помочь) 24 мар в 14:28
  • А зачем здесь используется auto? 24 мар в 16:21
  • @OliverPatterson в auto собственно весь смысл задачи, я бы еще подумал зачем тут 1fr , но это тот ответ который я дал и автора вопроса он устроил, Вы можете предложить свой ответ если у Вас есть предложения получше. 24 мар в 16:31

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.