Question

我刚刚完成了第一个CSS grid版面设计，模板区域的工作方式给我留下了深刻的印象，但是此时此刻，我对让项目填充模板区域的方式也感到非常困惑。本身具有响应列。

例如。我的模板区域名为content包含一个具有1行和2列且具有响应Flexboxgrid/Bootstrapgrid行为的商品标签。像这样：

<main class="g-content">
       <article>
            <div class="row">
                <div class="col-xs-12 col-sm-6">
                   column left
                </div>
                <div class="col-xs-12 col-sm-6">
                    column right
                </div>
            </div>
        </article>
</main>

还有CSS，其中g-content只是一个网格区域：

<style>
    .g-content {
      grid-area: content;
    }
</style>

我喜欢这些col-类提供的灵活性，因为它们在html中。因此，在这种情况下，我添加了2个类，该列的行为就像我想要的那样。

所以我不再关心整体模板，但是我关心内容块本身...现在我放弃了Flexboxgrid / Bootstrapgrid的想法。

那么，在这种情况下，使用CSS Grid创建2个响应列在某些断点上的行为会有所不同的一种快速而灵活的方法是什么？

还是CSS Grid不能替代Flexboxgrid / bootstrap响应式列系统？

更新：我正在考虑以CSS GRID方式重写引导程序列类。不知道这是否是最终的解决方案，但它是否有效。

@include screen('sm') {
  .row-sm-4 {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
}

.row-sm-6 {
    display: grid;
    grid-template-columns: 1fr 1fr;
 }
}

@include screen('md') {
  .row-md-4 {
     display: grid;
    grid-template-columns: 1fr 1fr 1fr;
  }
}

当然，因为网格是从容器中应用的，所以colclass需要成为rowclass。

Answer 1

如果您已经在使用CSS网格，为什么不坚持呢？

我建议不要混合使用更多的布局机制，而要坚持使用网格。

直到我们对所有浏览器都没有 css子网格，我们不能在子代之间共享相同的网格区域，但是我们可以将所有网格控制为独立网格。

可能的解决方案是：

<main class="g-content">
<article>
  <div class="inner-grid">
    <div class="inner-cell">
      column left
    </div>
    <div class="inner-cell">
      column right
    </div>
  </div>
</article>
</main>

现在，通过CSS：

@media (min-width: [SM BREAKPOINT] {
  .inner-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-gutter: GUTTER;
  }
}

请注意，由于在较小的分辨率下布局仅是行，因此仅在高于 SM断点时才需要应用样式。

或者，您也可以通过flex将其归档：

@media (min-width: [SM BREAKPOINT] {
  .inner-grid {
    display: flex;
    flex-flow: row nowrap;
  }
  .inner-cell {
    flex: 0 0 50%;
  }
}

通常：

要获得现代浏览器支持，请使用CSS本机网格或flex。
尽量不要将框架与不同方法混合使用。
使用flex进行对齐（例如您的示例）。
使用网格创建网格（duh）。

Answer 2

您可以使用引导程序，但是我认为如果在网格内容中使用flexbox css更好。并根据媒体查询的断点更改flexbox的方向。

在CSS GRID布局内创建响应行和列

2 个答案: