Question

是否可以为CSS网格中的一组列定义最大宽度？

我正在尝试将CSS网格与诸如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列结束，以便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;
 }

不确定要如何处理更大的屏幕尺寸。

revised codepen

在CSS网格中为一组列定义最大宽度

1 个答案: