在CSS网格布局中创建响应性行和列

我刚刚做了我的第一个

CSS网格

布局，模板区域的工作方式给我留下了深刻的印象，但此时此刻，我也对我假设用本身具有响应列的项目填充模板区域的方式感到非常困惑

比如说。我的名为

content

的模板区域包含一个具有响应

Flexboxgrid/Bootstrapgrid

行为的1行2列文章标签。像这样：

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

我喜欢这些

col-

类所提供的灵活性，因为它们在html中。因此，在本例中，我添加了两个类，列的行为与我所希望的一样

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

那么，在本例中，使用CSS网格创建两个响应列的快速灵活的方法是什么？它们在某些断点上的行为会有所不同。

或者CSS Grid不能代替Flexboxgrid/bootstrap响应列系统吗

更新： 我正在考虑重写bootstrap列类，但是使用CSS网格方式。不确定这是否是最终的解决方案，但它是有效的

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

---

当然，列类需要变成行类，因为网格是从容器应用的。

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

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

如果您已经在使用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>

请注意，由于在较小的分辨率中，您的布局只是行，您只需要在高于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）

---

如果您已经在使用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>

请注意，由于在较小的分辨率中，您的布局只是行，您只需要在高于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）

---

您是否使用引导？我使用Flexboxgrid。我猜也是一样的原理。你用的是引导吗？我用的是Flexboxgrid。我想也是这个原则。谢谢你，这是非常有用的。重写引导中使用的.row和.col类，但使用CSS网格方式，这对我来说是个好主意吗？我认为这样的话，我坚持CSS网格的方式，但保持了引导网格类的辉煌。使用任何适合你需要的工具：）就我个人而言，我不会再使用布局框架，因为我们现在有网格规范，它比任何框架都强大。谢谢你，这是非常有用的信息。重写引导中使用的.row和.col类，但使用CSS网格方式，这对我来说是个好主意吗？我认为这样的话，我坚持CSS网格方式，但保持了引导网格类的辉煌。使用任何适合您需要的工具：）就个人而言，我不会再使用布局框架，因为我们现在有网格规范，它比任何框架都要强大。