css - 仅CSS的网格布局

我目前仅出于各种原因尝试使用HTML / CSS创建网格布局（我知道Bootstrap等，但这在此情况下是不可行的，并且我无法添加标记元素）。

我有以下代码（每个带有一个带有li的ul的标题的容器div）：

<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>

现在，我希望能够创建一个网格布局。含义例如每个标题的宽度为33％，所以我可以彼此相邻放置3个。

问题是每次之间都存在ul。有没有可能的浮动解决方案，所以我可以将网格布局作为结果。

TITLE   -    TITLE   -    TITLE
  ul           ul           ul

--

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

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

而所有这些都没有框架。

提前致谢

最佳答案

这是使用现有标记的示例

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

div {
  display: flex;
  flex-direction: column;
  flex-wrap: wrap;
  height: 220px;              /*  30px + 80px times 2 row */
}
div > * {
  width: 33.33%;
  box-sizing: border-box;
}

h3 {
  margin: 0;
  height: 30px;
}
ul {
  margin: 0;
  height: 80px;
}

<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>
  <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>

根据评论进行了更新

通过使用order属性，可以从视觉上进行从左到右的构建

div {
  display: flex;
  flex-direction: column;
  flex-wrap: wrap;
  height: 220px;              /*  30px + 80px times 2 row */
}
div > * {
  width: 33.33%;
  box-sizing: border-box;
}
h3 {
  margin: 0;
  height: 30px;
}
ul {
  margin: 0;
  height: 80px;
}
div :nth-child(3),
div :nth-child(4) {
  order: 2;
}
div :nth-child(5),
div :nth-child(6) {
  order: 4;
}
div :nth-child(7),
div :nth-child(8) {
  order: 1;
}
div :nth-child(9),
div :nth-child(10) {
  order: 3;
}

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

关于css - 仅CSS的网格布局，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/42204846/