Проблема со вложенными grid

Question

Есть макет ниже. На нём сетка, которая заполняется в зависимости от высоты родителя, с блоками, которые содержать слово, белое и красное числа. Числа выравнены по правому краю по вертикали. В текущей реализации я делаю внутренний блок также grid, оборачиваю текст и первое число в контейнер flex со space-between, а второму числу задаю конкретную ширину(если я не буду так делать, то числа не будут выравнены по вертикали). Проблема в том, что второго числа может и не быть в колонке, из-за чего появляется лишний отступ, да и хотелось бы чтобы его ячейка растягивалась по контенту. Как избавится от точного указания ширины ячейки красного числа, но при этом сохранить выравнивание? Вероятно можно через новый subgrid, но хотелось бы обойтись без него.

<body>
  <h1 id="header"></h1>
  <div class='grid'>
    <div class='grid-item'>
      <div class='grid-item-inner'>
        <span>Lorem ipsum</span>
        <span class="grid-item-inner_offset">109123</span>
      </div>
      <span class="grid-item-inner_offset" style="display: flex; justify-content: end; color: red">1201</span>
    </div>
    <div class='grid-item'>
      <div class='grid-item-inner'>
        <span>Dorem</span>
        <span class="grid-item-inner_offset">1091</span>
      </div>
      <span class="grid-item-inner_offset" style="display: flex; justify-content: end; color: red">101</span>
    </div>
    <div class='grid-item'>
      <div class='grid-item-inner'>
        <span>Amet</span>
        <span class="grid-item-inner_offset">109123</span>
      </div>
    </div>
    <div class='grid-item'>
      <div class='grid-item-inner'>
        <span>Lorem ipsum dorem</span>
        <span class="grid-item-inner_offset">109123</span>
      </div>
    </div>
    <div class='grid-item'>
      <div class='grid-item-inner'>
        <span>Lorem ipsum</span>
        <span class="grid-item-inner_offset">19123</span>
      </div>
    </div>
  </div>
</body>

body {
  height: 60px;
  width: 500px;
}

.grid {
  height: 100%;
  display: grid;
  grid-auto-flow: column;
  gap: 5px 15px;
  grid-auto-columns: max-content;
  grid-template-rows: repeat(auto-fit, 19px);
}

.grid-item {
  display: grid;
  grid-template-columns: 1fr 45px;
  grid-auto-rows: max-content;
}

.grid-item-inner {
  display: flex;
  justify-content: space-between;
}

.grid-item-inner_offset {
  margin-left: 10px;
}

Answer 1

Вы можете занести элементы красного цвета в одну "ячейку" с общим выводом

.grid {
  height: 100%;
  display: grid;
  grid-auto-flow: column;
  gap: 5px 15px;
  grid-auto-columns: max-content;
  grid-template-rows: repeat(auto-fit, 19px);
}

.grid-item {
  display: grid;
  grid-template-columns: 1fr;
  grid-gap: 45px;
}

.grid-item-inner {
  display: flex;
  justify-content: space-between;
}

.grid-item-inner_offset {
  margin-left: 10px;
}

.red {
  color: #f00;
}

 <h1 id="header"></h1>
  <div class='grid'>
    <div class='grid-item'>
      <div class='grid-item-inner'>
        <span>Lorem ipsum</span>
        <span class="grid-item-inner_offset">109123</span>
           <span class="grid-item-inner_offset red">1201</span>
      </div>
   
    </div>
    <div class='grid-item'>
      <div class='grid-item-inner'>
        <span>Dorem</span>
        <span class="grid-item-inner_offset">1091</span>
        <span class="grid-item-inner_offset red">101</span>
      </div>
      
    </div>
    <div class='grid-item'>
      <div class='grid-item-inner'>
        <span>Amet</span>
        <span class="grid-item-inner_offset">109123</span>
      </div>
    </div>
    <div class='grid-item'>
      <div class='grid-item-inner'>
        <span>Lorem ipsum dorem</span>
        <span class="grid-item-inner_offset">109123</span>
      </div>
    </div>
    <div class='grid-item'>
      <div class='grid-item-inner'>
        <span>Lorem ipsum</span>
        <span class="grid-item-inner_offset">19123</span>
      </div>
    </div>
  </div>

Вы взялись за технологию, которую не понимаете как применять. Ваша задача решаеться намного проще и без использования grid, но необходимо понимать что должно получиться на выходе.

БЛОГ НА HUSL

Проблема со вложенными grid

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