CSS 网格，网格内的分隔符项目具有与网格项目不同的宽度和高度

Question

我正在构建一个条目概述，我希望它看起来像这样：

我打算使用 CSS 网格布局。网格布局将利用可用宽度并使用未使用的空间。

我已经拥有了几乎所有我需要的东西，就像我想要的那样，但是，使用

grid-auto-rows: 1fr;

（确保每个项目具有相同的高度，尽管由于多行标题或其他对于本示例来说过于复杂的效果，它们可能具有不同的高度）我的 .separator 项目获得的空间比其实际高度大得多。有什么想法如何解决这个问题吗？

我在这里附上了完整的示例代码：

* {
  font-family: Verdana;
}

.grid {
  --grid-item-width: 116px;

  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(var(--grid-item-width), 1fr));
  grid-auto-rows: 1fr;
  gap: 20px;
}
  
.separator {
  grid-column: 1 / -1;
  padding: 4px 10px;
  height: 22px;
  line-height: 22px;

  background-color: #CCC;
  border-radius: 8px;
  vertical-align: middle;
}

.item {
  display: flex;
  flex-direction: column;
  justify-content: end;
  align-items: stretch;

  background-color: #CCC;
  text-align: center;
  border-radius: 8px;
  overflow: hidden;
  line-height: 30px;
}
    
.item img {
  aspect-ratio: 1 / 1;
  width: 100%;
}

<div class="grid">
  <div class="separator">.separator</div>
  <div class="item"><img>.item</div>
  <div class="item"><img>.item</div>
  <div class="item"><img>.item</div>
  <div class="item"><img>.item</div>
  <div class="item"><img>.item</div>
  <div class="separator">.separator</div>
  <div class="item">.item</div>
  <div class="item">.item</div>
  <div class="item">.item</div>
  <div class="item">.item</div>
  <div class="item">.item</div>
  <div class="item">.item</div>
  <div class="item">.item</div>
  <div class="item">.item</div>
  <div class="item">.item</div>
  <div class="item">.item</div>
</div>

Answer 1

我建议您以稍微不同的方式构建您的html，我删除了顶部div上的

grid

类，并添加了一个div来包装您所有的

.items

，并且我在这个div上放置了

grid

类。

* {
  font-family: Verdana;
}

.grid {
  --grid-item-width: 116px;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(var(--grid-item-width), 1fr));
  grid-auto-rows: 1fr;
  gap: 20px;
  margin: 20px 0;
}
  
.separator {
  padding: 4px 10px;
  height: 22px;
  line-height: 22px;
  background-color: #CCC;
  border-radius: 8px;
  vertical-align: middle;
}

.item {
  display: flex;
  flex-direction: column;
  justify-content: end;
  align-items: stretch;

  background-color: #CCC;
  text-align: center;
  border-radius: 8px;
  overflow: hidden;
  line-height: 30px;
}
    
.item img {
  aspect-ratio: 1 / 1;
  width: 100%;
}

<div>
    <div class="separator">.separator</div>
    <div class="grid">
      <div class="item"><img>.item</div>
      <div class="item"><img>.item</div>
      <div class="item"><img>.item</div>
      <div class="item"><img>.item</div>
      <div class="item"><img>.item</div>
    </div>
    <div class="separator">.separator</div>
    <div class="grid">
      <div class="item"><img>.item</div>
      <div class="item"><img>.item</div>
      <div class="item"><img>.item</div>
      <div class="item"><img>.item</div>
      <div class="item"><img>.item</div>    
    </div>
</div>