时间戳

首页 > 解决方案 > 为 css-grid 中的一组列定义最大宽度

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

问题描述

是否可以为 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 垂直排列。

标签： cssflexboxcss-grid

解决方案

没什么特别的，但也许这对你有用。

而不是这个：

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

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

修改后的代码笔

推荐阅读