定义css-grid中一组列的最大宽度

Question

可以在css-grid中定义一组列的最大宽度吗？

我正在尝试使用css-grid和bootstrap类似的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>

​

这里有一个沙盒here，它的目标是让cat列从视口边缘开始，在第9列结束，以便两个col3垂直对齐。

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;
 }

不确定您希望如何处理更宽的屏幕尺寸。