使用CSS网格的图像平铺

Question

我正在尝试使用CSS网格创建2 x 2图像图块。我想使此动态，以便无论提供多少图像（介于1和4之间），都将使用图块的全部空间。像这样：

我已经使用以下CSS和标记进行了这种工作。

CSS

.container {
  display: flex;
}

.container .grid-tiles {
  margin-right: 20px;
}

.grid-tiles {
    display: grid;
    grid-template-columns: repeat(auto-fit, 38px);
    grid-column-gap: 4px;
    grid-row-gap: 4px;     

    width: 80px;
    height: 80px;
}

.grid-tiles .grid-tile {
    border-radius: 3px;
    background-color: red;
}

/* Only one */
.grid-tile:only-child {
    grid-area: 2 span / 2 span; 
}

/* Three */
.grid-tile:first-child:nth-last-child(3) {
    grid-area: 2 span; 
} 

HTML

  <div class="grid-tiles">
    <div class="grid-tile"></div>
    <div class="grid-tile"></div>
    <div class="grid-tile"></div>
    <div class="grid-tile"></div>    
  </div>  

但是在某些情况下，图块中需要包含文本。发生这种情况时，网格将不遵循其他实例的大小：

我需要网格保持一致。任何人都可以提供一些帮助，以确保如何/改进网格属性？谢谢！

我有当前工作的Codepen。

Answer 1

一个想法是使用不会在:after伪元素内折叠的空格。这将使所有标题都包含在至少一个字符中，即使您将其保留为空，它们的高度也将相等。

请注意，这仅适用于一行文本。如果一个标题中有多行文字，您将再次遇到相同的问题。

.container {
  display: flex;
}

.container .grid-tiles {
  margin-right: 20px;
}

.grid-tiles {
  display: grid;
  grid-template-columns: repeat(auto-fit, 38px);
  grid-column-gap: 4px;
  grid-row-gap: 4px;
  width: 80px;
  height: 80px;
}

.grid-tiles .grid-tile {
  border-radius: 3px;
  background-color: red;
}


/* Only one */

.grid-tile:only-child {
  grid-area: 2 span / 2 span;
}


/* Three */

.grid-tile:first-child:nth-last-child(3) {
  grid-area: 2 span;
}

.grid-tiles .grid-tile:after {
  content: "\200B";
}

<div class="container">
  <div class="grid-tiles">
    <div class="grid-tile"></div>
  </div>

  <div class="grid-tiles">
    <div class="grid-tile"></div>
    <div class="grid-tile"></div>

  </div>

  <div class="grid-tiles">
    <div class="grid-tile"></div>
    <div class="grid-tile"></div>
    <div class="grid-tile"></div>
  </div>

  <div class="grid-tiles">
    <div class="grid-tile"></div>
    <div class="grid-tile"></div>
    <div class="grid-tile"></div>
    <div class="grid-tile"></div>
  </div>

  <div class="grid-tiles">
    <div class="grid-tile"></div>
    <div class="grid-tile"></div>
    <div class="grid-tile"></div>
    <div class="grid-tile">Zaa</div>
  </div>
</div>