图像平铺使用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

使用以下命令强制所有列/行的大小相等

grid-template-columns: 1fr 1fr; /* two equal columns */
grid-auto-rows: 1fr; /* all the rows equal */

完整代码

grid-template-columns: 1fr 1fr; /* two equal columns */
grid-auto-rows: 1fr; /* all the rows equal */

.container {
  display: flex;
}

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

.grid-tiles {
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-auto-rows: 1fr;
  gap: 4px;
  width: 80px;
  height: 80px;
}

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


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


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