用CSS在正方形内平方

Question

我正在尝试在一个大方块中包含4个小方块。这些小正方形必须放置在大正方形的底部，到目前为止，我的代码看起来像这样

.date-grid button {
    position: relative;
    border: 0;
    width: 7.5ch;
    height: 7.5ch;
    background-color: #A1A100;
    margin-bottom: 2px;
}
.smallHolder {
  display: flex;
  align-items: flex-end;
}
.small1 { 
    border: 0;
    width: 2.5ch;
    height: 2.5ch;
    background-color: gray;
}
.small2 {  
    width: 2.5ch;
    height: 2.5ch;
    background-color: red;  
}
.small3 { 
    border: 0;
    width: 2.5ch;
    height: 2.5ch;
    background-color: green; 
}
.small4 {
    border: 0;
    width: 2.5ch;
    height: 2.5ch;
    background-color: blue; 
}

<div class="date-grid">
  <button class="vrs22" >
       <time>3</time>
    <div class="smallHolder">
      <div class="small1"></div>
      <div class="small2"></div>
      <div class="small3"></div>
      <div class="small4"></div>
    </div>   
   </button>
 </div>

我想要达到的目标是：

想法是要具有这种灵活性，所以如果我有2个小方块，结果应该像这样：

有人可以尝试帮助我吗？

Answer 1

[我建议尝试使用：.date-grid{display:flex;flex-direction:column}，它将包裹所有这些元素。然后，一个大方块将具有width:100%;height:80%;或其他东西，最后是小方块.smallHolder{display:flex;flex-direction:row;width:100%;height:19%;}，然后是实际的小元素width:19%;请勿将按钮用作将其包装的东西。也许可以这样做：<div onclick="function()" class="date-grid"></div>多数民众赞成。

如果有任何问题请告诉我。