仅CSS网格布局

我目前正试图用HTML/CSS创建一个网格布局，只是出于各种原因（我知道Bootstrap等，但在这种情况下这是没有选择的&而且我不能添加标记元素）

我有以下代码（容器div，每次都有一个标题，标题上有ul和li）：

-

所有这些都没有一个框架

---

提前谢谢你是说这样的事吗？

---

下面是一个使用现有标记的示例

注意它们是从上到下流动的，而不是从左到右

div{
显示器：flex；
弯曲方向：立柱；
柔性包装：包装；
高度：220px；/*30px+80px乘以2行*/
}
div>*{
宽度：33.33%；
框大小：边框框；
}
h3{
保证金：0；
高度：30px；
}
保险商实验室{
保证金：0；
高度：80px；
}

标题在这里

列表项
列表项
列表项

标题2在此

列表项
列表项

这里是第3篇

列表项

标题2在此

列表项
列表项

这里是第3篇

列表项

我设置了宽度：32%，而不是33%，因为在添加边框时，它占用了一些额外的空间，无法容纳整个宽度容器。这确实是我试图实现的目标，但我无法在每套h3和ul周围添加一个“col”。哦，你不能添加标记吗？该死的，我想找到另一个解决办法。但我恐怕你不能摆脱这些额外的。col如果你计划分开这些…如果你可以设置固定的大小，这可能是可能的（我会试试），如果没有，那么必须有一个包装周围的每一组。。。或者你需要一个脚本，这会有点棘手。固定大小应该可以，我仍然可以通过使用mediaqueries使用仅CSS的方法重新编辑它们，然后还需要知道组的数量，这可能吗？试试看，我可以看到我可以用它做什么后，这是一个机会，这不是建设自上而下，但正在建设左-right@Kemagezien今天晚些时候我会看一看。。。让你know@Kemagezien不，对于现有的标记，不可能让它从左到右构建，但是如果可以运行脚本，可以包装每个组，然后从左构建-right@Kemagezien好吧，有一种方法，尽管如果你有很多项目，维护起来会很乏味，在我的答案中添加了一个示例

<div>
  <h3>title here</h3>
  <ul>
    <li>list-item</li>
    <li>list-item</li>
    <li>list-item</li>
  </ul>
  <h3>title 2 here</h3>
  <ul>
    <li>list-item</li>
    <li>list-item</li>
  </ul>
  <h3>title 3 here</h3>
  <ul>
    <li>list-item</li>
  </ul>
</div>

TITLE   -    TITLE   -    TITLE
  ul           ul           ul

h3 {
  width: 33%;
  float: left;
  display: inline-block;
}

ul{
  float: left;
  width: 33%;
  display: inline-block;
}

h3 {
display: inline-block;
}

ul{
 display: block;
}

.col {
width: 32%;
border: 1px solid red;
display: inline-block;
}

.container {
width: 960px;
}