Javascript CSS简单甘特图（紧凑型）

我正在尝试用html和css生成一个简单的甘特图，我需要弄清楚如何使它紧凑，这意味着如果有可用的空白，该栏应该尝试适应前一行，同时保持相同的x距离

上下文：

• X轴是以月为单位的时间线
• 每个项目在给定的月份开始和结束
• 通过JS为每个元素生成宽度和边距

电流输出：

所需输出：

约束

• JS解决方案还可以，但理想情况下，该解决方案不需要使用过度使用的现有JS库，因为代码将在浏览器扩展上运行，这将暴露许多兼容性问题
• 项目不需要动态移动，因为在大多数情况下，这将类似于渲染图像
• 渲染的项目不超过30个

当前实现片段： [编辑]我稍微修改了代码片段，以演示与x的固定距离的需要

.timeline div{
高度：10px；
背景：黑色；
保证金：2倍；
}

步骤

• 将时间线设置为

  inline flex

• 使用双倍高度允许子元素上下排列
  • 高度：20px
• 甚至子元素也与底部对齐
  • 自对准：柔性端
• 使用绝对定位，以实现动态起始位置，并保持左边距

。时间线{
显示：内联flex；
高度：20px；
位置：相对位置；
}
.时间轴分区{
高度：10px；
背景色：黑色；
位置：绝对位置；
}
.timeline div:n个孩子（偶数）{
自对准：柔性端；
}

---

最终，最终的解决方案是使用css网格，使用一个包含以下css的容器：

.timeline_container {
    display: inline-grid; // all contents of the container will be treated as grid elements
    grid-auto-columns: 40px; // defines the default width of each column
    grid-auto-rows: 40px; // defines the height of each row

    /* the line below is the key part to making it compact/dense */
    grid-auto-flow: row dense; // keeps rows compact by filling available row whitespace
}

.timeline_item {
    grid-column: 3 / 5; // defines start and end column where the item
}

以及具有以下CSS的每个子元素：

.timeline_container {
    display: inline-grid; // all contents of the container will be treated as grid elements
    grid-auto-columns: 40px; // defines the default width of each column
    grid-auto-rows: 40px; // defines the height of each row

    /* the line below is the key part to making it compact/dense */
    grid-auto-flow: row dense; // keeps rows compact by filling available row whitespace
}

.timeline_item {
    grid-column: 3 / 5; // defines start and end column where the item
}

因此，以下HTML将以我需要的方式呈现：

<div class='timeline_container'>
    <div class='timeline_item'></div>
    <div class='timeline_item'></div>
    <div class='timeline_item'></div>
</div>

我已经写了一篇关于解决方案的更详细的文章：

---

css格子石

哇。这绝对是一个很好的开始。然而，这里的问题是，每个项目不一定在前一个项目之后开始，而是有一个固定的开始位置。意味着可能会有一个空白。这就是为什么在我发布的代码片段中，我需要使用某种左边距。在我的例子中，1个月的度量单位是5px，因此20px宽的项目是持续4个月的项目。左边距90px表示该项目在18个月前结束（18*5）。我恢复到上一个留有左边距的版本，这是你的意思吗？我编辑了原始片段，让你了解我在固定x距离下的意思。试试这个，我使用绝对定位哇！先生，你是上帝！再一次证明“如果它变得太复杂，那么你就错过了一个更简单的解决方案！先生，给你玉米卷！”！