帖子的 CSS 网格布局而不是堆叠 (Hugo)

问题描述

我正在尝试在我的 Hugo 主页上获得网格布局，而不是当前的堆叠版本。这些帖子应该出现在一个 3 列网格中，而不是一个在另一个顶部的网格中。首先，我已将 <article> 中的 list.html 标记包装在 <div class = "container"> 中：

<div class="container">

<article class="{{ $class }}">
  {{- $isHidden := (.Site.Params.cover.hidden | default .Site.Params.cover.hiddenInList)}}
  {{- partial "cover.html" (dict "cxt" . "IsHome" true "isHidden" $isHidden) }}
  <header class="entry-header">
    <h2>
      {{ .Title }}
      {{- if .Draft }}<div class="entry-isdraft"><sup>&nbsp;&nbsp;[draft]</sup></div>{{- end }}
    </h2>
  </header>
  {{- if (ne .Site.Params.hideSummary true)}}
  <section class="entry-content">
    <p>{{ .Summary | plainify | htmlUnescape }}...</p>
  </section>
  {{- end }}
  <footer class="entry-footer">
    {{- partial "post_Meta.html" . -}}
  </footer>
  <a class="entry-link" aria-label="post link to {{ .Title | plainify }}" href="{{ .Permalink }}"></a>
</article>
{{- end }}
</div>

我查看了主题的 CSS 文件，我可以看到帖子卡片的样式是 post-entry。结合起来，我已将此 CSS 添加到 post-entry.css:

.container {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
}

.post-entry {
    margin-bottom: var(--gap);
    padding: var(--gap);
    background: var(--entry);
    border-radius: var(--radius);
    transition: transform .1s
    width: 32%;
    padding-bottom: 32%; /* Same as width,sets height */
    margin-bottom: 2%; /* (100-32*3)/2 */
    position: relative;
}

我认为应该是这样。但这显然行不通。出于某种原因，第一个帖子的宽度减少了，而第二个帖子条目是全角的。它们没有像预期的那样并排，但仍然堆叠在一起：See the image here

我的存储库托管在这里：https://github.com/thedivtagguy/archives 如果这更有帮助。

实时部署在这里：https://jolly-panini-82258b.netlify.app/

解决方法

通过查看您的实时部署网站，我发现了两个问题：

.container 类用于包装所有帖子和第二篇博文“Hello R Markdown”。这会导致正确添加 CSS 时发生冲突。
您正在 display: flex 上设置 .container，而您确实想根据您的问题实现网格布局。

问题 2 很容易解决（如果你有一个独特的类作为包装器，它会解决问题 1），你可以只使用 display: grid 和 grid-template-columns 来利用可用空间和将所有项目放在网格上。 Read more about grid-template-columns on MDN。

.container {
    display: grid;
    grid-template-columns: 1fr 2fr;
    grid-gap: 10px;
    margin-left: 80px;
    padding: 1px 16px;
}

grid-template-columns: 1fr 2fr;：每行的item是如何划分的，fr代表fragment。
grid-gap：每个项目之间的空间。

以这个小片段为起点。

.container {
  display: grid;
  grid-template-columns: 1fr 2fr;
  grid-gap: 10px;
}

/* Only for demonstration purposes */
.post {
  background-color: #eee;
}

body {
  margin: 0;
  padding: 0;
}

<div class="container">
  <div class="post">
    <h2>This is Lorem</h2>
  </div>
  <div class="post">
    <h2>Hello R Markdown</h2>
  </div>
  <div class="post">
    <h2>This is Lorem</h2>
  </div>
</div>

我会这样处理它：

.container {
  display: flex;
  flex-wrap: wrap;
}

.post-entry-content-wrapper {
  padding: 5px;
}

.post-entry {
  width: 33.33%;
  /* etc */
}

然后你可以随意调整间距。

但是，我看到您将第二个 .post-entry 元素包装在另一个 .container 元素中。取出第二个 post-entry 元素，这样第二个 .container 元素就不会干扰了。

编辑

要包装行，您可以像之前在代码中一样添加 flex-wrap: wrap;。

要添加一些间距，我只需将后条目包装在另一个元素中，然后添加一些填充。这受到 BulmaCSS 的启发。

但是，由于您确实在尝试制作网格，您不妨使用 display: grid，因为它是为此类用例量身定制的。

flexbox html hugo