Определите максимальную ширину для группы столбцов в css-grid

Question

Можно ли определить максимальную ширину для группы столбцов в css-grid?

Я пытаюсь использовать css-grid вместе с начальной загрузкой, как разметка flex-box, чтобы сделать строки полной ширины, которые выровнены сстолбцы flex-box.

.container__grid {
  width: 100%;
  display: grid;
  grid-template-columns: [view-start] minmax(1em, 1fr) repeat(12, 95px [col])/* Specify a max-width and center */
  [view-end];
}

.col-9--viewport-edge {
  grid-column: view-start/col 9;
  background-image: url('https://images.unsplash.com/photo-1516139008210-96e45dccd83b?ixlib=rb-0.3.5&ixid=eyJhcHBfaWQiOjEyMDd9&s=ac07676efc2ca5b11b548d8ae01301ba&auto=format&fit=crop&w=2200&q=80');
  background-position: bottom center;
  background-size: cover;
}

.col--remaining {
  grid-column-end: col 12;
}

<div class="container__grid">
  <div class="col-9--viewport-edge">
    <div class="col__inner"></div>
  </div>
  <div class="col--remaining">
    <div class="col__inner">
      <p>col-3</p>
    </div>
  </div>
</div>

Здесь есть песочница , в которой цель состоит в том, чтобы получить столбец cat, начинающийся у края области просмотра и заканчивающийся в столбце 9 так, чтобыоба col-3 расположены вертикально.

Answer 1

Ничего особенного, но, может быть, это вам подойдет.

Вместо этого:

.container__grid{
   display: grid;
   grid-template-columns: 
      [view-start] minmax(1em, 1fr) 
      repeat(12, 95px [col])
      [view-end];
  }

.col-9--viewport-edge{
   grid-column: view-start/col 9;
}

.col--remaining{
  grid-column-end: col 12;
} 

Попробуйте это:

.container__grid {
   display: grid;
   grid-template-columns: repeat(20, 5%);
}

.col-9--viewport-edge {
   grid-column: 1 / 16;
}

.col--remaining {
   grid-column: 16 / 21;
 }

Не уверен, как вы хотите обрабатывать более широкие размеры экрана.

пересмотренная кодовая ручка