Question

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

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

我最初使用的是HTML表，但发现它不灵活，因此我开始使用CSS Grid。使用CSS Grid，我似乎仍然无法完成所需的布局。看起来只能将网格容器的直接子元素放到网格中（在我的情况下，这些是单元格）。我希望将单元的子元素也放置在整个网格中。使用“显示：内容”似乎可以某种程度地支持此功能，但是并非所有浏览器（例如IE和Edge）都支持此功能。我还看到了CSS subgrid规范，但似乎尚未提供/支持。

是否有其他布局技术或策略可以满足我所需的布局设计要求？

编辑：这是一个小提琴：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

您可以使用网格布局来做到这一点。您可以创建行，并为每行绘制一条带有: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>

将项目放置在具有任意宽度但已定义跨度的网格布局中

1 个答案: