html - 用于帖子而不是堆叠的 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> [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;
}
我认为这是应该的。但这显然行不通。出于某种原因,第一个帖子的宽度减小了,而第二个帖子条目是全宽的。它们没有像预期的那样并排,但仍然堆叠:请参见此处的图像
我的仓库托管在这里:https ://github.com/thedivtagguy/archives ,如果这更有帮助的话。
解决方案
通过查看您的实时部署网站,我发现了两个问题:
- 该类
.container
用于包装所有帖子和第二篇博文“Hello R Markdown”。这将导致正确添加 CSS 时发生冲突。 - 您正在设置
display: flex
,.container
而您确实想根据您的问题实现网格布局。
问题 2 很容易解决(如果您有一个独特的类作为包装器,它将解决问题 1),您可以display: grid
与 with 一起使用grid-template-columns
以利用可用空间并将所有项目放在网格上。在 MDN 上阅读有关网格模板列的更多信息。
.container {
display: grid;
grid-template-columns: 1fr 2fr;
grid-gap: 10px;
margin-left: 80px;
padding: 1px 16px;
}
grid-template-columns: 1fr 2fr;
:每行的项目是如何划分的,fr
代表片段。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>
推荐阅读
- node.js - 从 PUG FORM 发送 POST 请求 - 无法发送数据
- winforms - 在我的代码中使用 BitmapFrame.Create() 会破坏 Winforms DPI 缩放 - 即使代码没有运行
- php - Laravel:多对多关系的自定义命名
- ios - 类型为 OBLIGATORY 枚举值的属性
- angularjs - 将 angularjs 指令转换为 angular 10
- php - 两天之间 Laravel 雄辩的抓取结果
- sql - 从一组中选择最大值
- r - 应用问题给每个元素一个不同的名字
- javascript - 调整鼠标滚轮触发的 Cytoscape.js 中的缩放比例
- c++ - 指针与 const 和重载的交互