如何在查询循环中创建动态 CSS 网格布局（如附加图像）？

Question

我正在尝试为查询循环内的博客文章创建 CSS 网格布局。每个盒子应保持大约 3:2 的长宽比，并且布局需要动态。以下是我迄今为止尝试过的：

HTML 结构无法更改

.container {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
}

.item {
  border: 1px solid black;
  background-color: green;
  margin: 2px;
}

.item:first-of-type,
.item:nth-child(5n),
.item:nth-child(7n) {
  grid-column: span 2;
  grid-row: span 2;
}

<div class="container">
  <div class="item">1</div>
  <div class="item">2</div>
  <div class="item">3</div>
  <!-- More items will be added dynamically in the query loop -->
</div>

虽然这适用于前几个项目，但随着添加更多项目，布局会变得不一致并且看起来不太好。

这是我想要实现的布局图像，以供参考。

如何创建这样的动态且一致的网格布局，同时保持所有项目的纵横比？

Answer 1

要创建动态 CSS 网格布局（如查询循环中图像中所示的布局），您可以使用以下步骤：

查询循环的 HTML 结构：在 WordPress 中，查询循环通常动态显示帖子或自定义内容。这是查询循环内的示例结构：

<div class="grid-container">
  <?php
  if ( have_posts() ) :
      while ( have_posts() ) : the_post();
  ?>
    <div class="grid-item">
      <h2><?php the_title(); ?></h2>
      <p><?php the_excerpt(); ?></p>
    </div>
  <?php
      endwhile;
  endif;
  ?>
</div>

CSS 网格布局：现在，为动态网格添加 CSS。要创建与图像类似的布局（具有可变的列大小和间距），请使用以下 CSS：

.grid-container {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); /* Responsive columns */
  gap: 16px; /* Space between items */
  padding: 16px;
}

.grid-item {
  background-color: #f0f0f0; /* Background color for each item */
  padding: 16px;
  border-radius: 8px; /* Rounded corners */
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1); /* Optional shadow for styling */
}

/* Optional: Adjust the title and content inside each grid item */
.grid-item h2 {
  font-size: 18px;
  margin-bottom: 8px;
}

.grid-item p {
  font-size: 14px;
}

/* Load More Button */
.load-more {
  text-align: center;
  padding: 10px 20px;
  background-color: #007bff;
  color: white;
  border: none;
  border-radius: 4px;
  cursor: pointer;
}

.load-more:hover {
  background-color: #0056b3;
}

动态内容和“加载更多”按钮：如果您要添加动态内容（例如，通过 AJAX 或“加载更多”功能），您将在网格下方包含一个类似这样的按钮来加载其他项目：

<button class="load-more">Load More...</button>

说明：

• .grid-container 使用 grid-template-columns：repeat(auto-fill, minmax(300px, 1fr));，这使得网格响应，允许 项目根据视口大小自动调整宽度。
• gap 属性定义每个项目之间的间距。
• 在每个 .grid-item 中，您可以根据 查询循环，例如标题、摘录、图像或自定义字段。

这种布局确保网格能够很好地适应不同的屏幕尺寸，不同高度的项目可以整齐地融入可用空间。