Плитка изображений с использованием CSS Grid

Question

Я пытаюсь создать плитку изображения 2 x 2, используя сетку CSS. Я хочу сделать это динамичным, чтобы, независимо от того, сколько изображений было предоставлено (от 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>