Адаптивный Вложенный Макет Сетки

Question

В следующем коде у меня есть 4 внутренних сетки внутри внешнего макета сетки.Обе сетки являются адаптивными.

.grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(100px, 1fr));
  grid-gap: 10px;
  border: 2px red solid;
}

.grid > * > * {
  border: 2px blue dashed;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(35px, 1fr));
  grid-auto-rows: auto;
}

.grid > * > * > * {
  border: 1px green dashed;
}

<div class="grid">
  <div>
    <div>
      <div>1</div>
      <div>1</div>
    </div>
  </div>
  <div>
    <div>
      <div>2</div>
      <div>2</div>
      <div>2</div>
      <div>2</div>
      <div>2</div>
      <div>2</div>
      <div>2</div>
    </div>
  </div>
  <div>
    <div>
      <div>3</div>
      <div>3</div>
      <div>3</div>
      <div>3</div>
      <div>3</div>
      <div>3</div>
    </div>  
  </div>
  <div>
    <div>
      <div>4</div>
      <div>4</div>
      <div>4</div>
      <div>4</div>
      <div>4</div>
    </div>
  </div>
</div>

соответствующая скрипта: https://jsfiddle.net/yg05zkx9/5/

Поскольку я использовал автозаполнение для внутренних сеток, для первой сетки появляются пробелы для пустых дорожекгде элементы не достигают последней дорожки из-за отсутствия элементов div.

Есть ли способ перераспределить пустое пространство от пустых дорожек ко всем внутренним сеткам?

Answer 1

Просто измените этот CSS и вы закончите с наилучшим возможным способом ... с

.grid > * > *{
  grid-template-columns: repeat(auto-fill, minmax(35px, 1fr));
}

до

.grid > * > *{
  grid-template-columns: repeat(auto-fit, minmax(35px, 1fr));
}

.grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(100px, 1fr));
  grid-gap: 10px;
  border: 2px red solid;
}

.grid > * > * {
  border: 2px blue dashed;
  display: grid;
  grid-auto-rows: auto;
}

.grid > * > * > * {
  border: 1px green dashed;
}

.grid > * > * {
  grid-template-columns: repeat(auto-fit, minmax(35px, 1fr));
}

<div class="grid">
      <div>
        <div>
          <div>1</div>
          <div>1</div>
        </div>
      </div>
      <div>
        <div>
          <div>2</div>
          <div>2</div>
          <div>2</div>
          <div>2</div>
          <div>2</div>
          <div>2</div>
          <div>2</div>
        </div>
      </div>
      <div>
        <div>
          <div>3</div>
          <div>3</div>
          <div>3</div>
          <div>3</div>
          <div>3</div>
          <div>3</div>
        </div>  
      </div>
      <div>
        <div>
          <div>4</div>
          <div>4</div>
          <div>4</div>
          <div>4</div>
          <div>4</div>
        </div>
      </div>
    </div>