CSS网格-在不均匀的列中挣扎

Question

[尝试为这些列设置样式，并且无法弄清楚如何使用CSS网格进行此操作，其中一列或另一列始终不在网格内。有人建议使用干净的解决方案吗？

Answer 1

[尝试将所有列和行放在一个主分区中。

此外，您也可以使用引导程序的网格，这将为您节省很多时间。

您可以在其官方网站上查看文档。Bootstrap's official website

这是有关引导程序网格的说明：Bootstrap's grid explanation

如果您使用的是JS框架（Angular / React / etc），不要忘记阅读有关如何在框架中安装引导程序的文档

Answer 2

在中间添加px列，应该可以。

POC：

.container {
  display: grid;
  grid-template-columns: [c1] 1fr [c2] 30px [c3] 1fr [c4] 1fr [c5];
  grid-template-rows: [r1] 100px [r2] 100px [r3];
  grid-column-gap: 10px;
  grid-row-gap: 10px;
  padding: 10px
}

div {
  border: solid 1px;
}

.a {
  grid-column: c1 / c2;
  grid-row: r1 / r2;
}

.b {
  grid-column: c2 / c4;
  grid-row: r1 / r2;
}

.c {
  grid-column: c4 / c5;
  grid-row: r1 / r3;
  background: black;
}

.d {
  grid-column: c1 / c3;
  grid-row: r2 / r3;
}

.e {
  grid-column: c3 / c4;
  grid-row: r2 / r3;
}

<div class="container">
  <div class="a"></div>
  <div class="b"></div>
  <div class="c"></div>
  <div class="d"></div>
  <div class="e"></div>

</div>