网格 (Grid)

👁️ 预览链接已失效，因为原始模板站点可能不再可用。

用于将项目列表排列成网格。在较小的屏幕尺寸上会自动换行。与列 (cols) 组件相比，当您有 3 个或更多大致相同比例的独立项目时（例如图片库），应使用此组件。

提示

原始模板使用了 Liquid 标签 {% include grid.html ... %} 和 {% capture %} / {% endcapture %}。在 Jekyll 中，您需要使用 Vue 组件或 Markdown 语法来实现类似的功能。下面提供一个使用 Markdown 和 CSS Grid 的概念性示例。实际实现可能需要自定义 Vue 组件。

概念性示例 (Markdown + CSS)

假设您有一个包含多个 <figure> 组件（或类似内容）的网格。

html

<div class="grid-container">
  <figure>
    <img src="/images/figure1.jpg" alt="图1" />
    <figcaption>图1标题</figcaption>
  </figure>
  <figure>
    <img src="/images/figure2.jpg" alt="图2" />
    <figcaption>图2标题</figcaption>
  </figure>
  <figure>
    <img src="/images/figure3.jpg" alt="图3" />
    <figcaption>图3标题</figcaption>
  </figure>
  <!-- 更多 figure -->
</div>

<style>
  .grid-container {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); /* 响应式列 */
    gap: 1rem; /* 网格间距 */
  }

  .grid-container figure {
    /* 可选：为 figure 添加样式 */
    border: 1px solid #ccc;
    padding: 0.5rem;
    text-align: center;
  }

  .grid-container img {
    max-width: 100%;
    height: auto;
    display: block; /* 防止下方出现额外空间 */
  }

  /* 可选：方形样式 */
  .grid-container.square figure {
    aspect-ratio: 1 / 1;
    display: flex; /* 使内容居中 */
    align-items: center;
    justify-content: center;
    overflow: hidden; /* 隐藏超出部分 */
  }
  .grid-container.square img {
    width: 100%;
    height: 100%;
    object-fit: cover; /* 覆盖整个方形区域 */
  }
</style>

参数

参数	描述	默认值
`content`	（概念性）包含在网格容器内的 Markdown 或 HTML 内容。通常由多个独立的项组成。
`style`	（概念性）网格的视觉样式。例如，添加一个 `square` 类可以强制项目具有 1:1 的宽高比。如果使用 `<figure>` 组件，您可能希望将其宽度设置为 `100%`。	项目自动调整大小

使用普通 Markdown 图片

您也可以将普通的 Markdown 图片放入网格。如果您想展示一组图片（例如徽标），并且不希望它们带有 <figure> 组件的样式（例如阴影），可以这样做。

html

<div class="grid-container">
  <p><img src="/images/logo1.png" alt="Logo 1" /></p>
  <p><img src="/images/logo2.png" alt="Logo 2" /></p>
  <p><img src="/images/logo3.png" alt="Logo 3" /></p>
</div>

<style>
  /* 复用上面的 .grid-container 样式 */
  .grid-container p {
    /* 确保每个 p 元素成为一个网格项 */
    margin: 0; /* 移除默认段落边距 */
  }
  .grid-container img {
    max-width: 100%;
    height: auto;
    display: block;
  }
</style>

注意

在 Markdown 中，每个图片需要放在单独的段落中（通过空行分隔），这样每个图片 <p><img></p> 才能成为独立的网格项。如果将它们放在同一行或没有空行分隔，它们可能会被渲染在同一个 <p> 元素中，从而只形成一个网格项。

网格 (Grid) ​

网格 (Grid)