如何在 WordPress 中使用 column-count CSS 创建大小相等的 HTML 单元格画廊？

Question

我先试了Bootstrap。它应该对初学者来说很容易，但由于某种原因我无法在 WordPress 中使用它。

接下来我考虑了 FlexBox，但经过一些研究，似乎有一个更简单的解决方案叫做“column-count ”。根据此 CSS 技巧 post，“您可以在任何块级（原文如此）元素上声明列。列可以应用于单个元素或通过定位应用于多个元素他们的 parent.":

https://css-tricks.com/guide-responsive-friendly-css-columns/

因此，在我的 WordPress 网页上，由于在语义上我有一个列表，所以我创建了一个包含外部 div 容器和内部元素的列表。这是有问题的页面：

https://erichepperle.com/freedom/

这是我网站上运行不正常的部分的屏幕截图。

我的CSS:

这里是适用的 CSS 代码：

.ehw-freedom-signpost .ehw-channel-columns {
    column-count: 6;
    column-width: 175px;
    display: inline-block;
}

我声明了 6 列的 column-count，但是您可以清楚地看到，它似乎只创建了 4 列。我尝试将列数更改为 3，然后更改为 7 作为故障排除步骤。还是4。很奇怪。

期望的输出：

这部分页面的大致显示方向：

[项目 1][项目 2][项目 3][项目 4][项目 5][项目 6]

[ITEM7] [ITEM8] [ITEM9] ... 等等

但是，这就是实际显示的内容：

[项目 1] [项目 3] [项目 5] [项目 7]

[项目 2] [项目 4] [项目 6]

注意： WordPress StackExchange 没有类似这个问题的问题，所以我确定 CSS 必须足够接近编程才能转到这里。如果我对那个决定的判断是错误的，并且它用在了其他地方，请告诉我。

最后一个想法：也许 FlexBox 是可行的方法？如果是这样的话，我不知道如何实现它。

Answer 1

我认为 Flex 是正确的选择。我刚刚做了一个关于如何使用 Flex.

构造列的示例

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
    <title>Static Template</title>
  </head>
  <body>
    <style>
      .box {
        display: flex;
        flex-wrap: wrap;
      }
      .box > * {
        flex: 1 1 130px;
      }
    </style>
    <div class="box">
      <div>One</div>
      <div>Two</div>
      <div>Three</div>
      <div>Four</div>
      <div>Five</div>
      <div>Six</div>
      <div>Seven</div>
      <div>Eight</div>
      <div>Nine</div>
      <div>Ten</div>
    </div>
  </body>
</html>

如何在 WordPress 中使用 column-count CSS 创建大小相等的 HTML 单元格画廊？

How can I create a gallery of equal sized HTML cells in WordPress with column-count CSS?

html

css

wordpress

flexbox

css-multicolumn-layout

我的CSS:

期望的输出：