html - 将元素放置在具有任意宽度但定义跨度的网格布局中

Question

我很难找到合适的技术来显示我的布局。看图:

Desired layout picture

此布局类似于日历。示例单元格以蓝色表示。对我来说具有挑战性的部分是一个单元格可能有一个应该跨越多个单元格/列的子元素。日历的宽度是全宽，所以每个单元格都是动态宽度。

我最初使用的是 HTML 表格，但发现它不够灵活，所以我开始使用 CSS 网格。使用 CSS Grid，我似乎仍然无法完成所需的布局。看起来只有网格容器的直接子元素可以放入网格中(在我的例子中，这些是单元格)。我希望单元格的子元素也可以放置在整个网格中。这似乎有点支持使用“显示:内容”，但这并不是所有浏览器都支持，例如 IE 和 Edge。我还看到提到 CSS 子网格规范，但似乎还没有可用/支持。

是否有任何其他布局技术或策略可以实现我想要的布局设计？

编辑:这是一个 fiddle :https://jsfiddle.net/sy70c2j6/1683 .我想要某种样式来指定 span2 和 span3 分别跨越 2 或 3 个单元格。

// This doesn't accomplish it, but I desire something like this
.span2 {
  grid-column: span 2;
}

Answer 1

您可以使用网格布局来完成此操作。您可以创建行，并为每一行绘制一 strip 有 :after 伪元素的线。您还可以使用 absolute 定位元素创建列。然后在每一行中，您可以创建可以跨越多列的单元格。

.grid {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  position: relative;
}

.row {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  grid-gap: 20px;
  grid-column: span 7;
  position: relative;
}

.cols {
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  height: 100%;
  width: 100%;
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  z-index: -1;
  grid-gap: 20px;
}

.cols > div {
  border-left: 1px solid black;
  grid-column: span;
}

.row:after {
  content: '';
  border-bottom: 1px solid black;
  width: 100%;
  position: absolute;
  left: 0;
  bottom: 0;
  right: 0;
}

body {
  padding: 0;
  margin: 0;
}

.cell {
  border: 1px solid #8EBA75;
  background: #D5E7D3;
  padding: 20px;
}

.row-1 {grid-row: 1}
.row-2 {grid-row: 2}
.row-3 {grid-row: 3}


.col-1-4 {grid-column: 1 / 4;}
.col-1-2 {grid-column: 1 / 2;}
.col-3-4 {grid-column: 3 / 4}
.col-5-7 {grid-column: 5 / 7}
.col-3-5 {grid-column: 3 / 5}

<div class="grid">
  <div class="row">
    <div class="cell col-1-4 row-1"></div>
    <div class="cell col-1-2 row-2"></div>
  </div>
  
  <div class="row">
    <div class="cell col-3-4 row-1"></div>
    <div class="cell col-5-7 row-1"></div>
    <div class="cell col-3-4 row-2"></div>
    <div class="cell col-3-5 row-3"></div>
  </div>
  
  <div class="cols">
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
  </div>
</div>