Html+；纯css对齐

我试图用纯html/css获得这个结果 我试着使用一个flexbox，里面有一个.row和两个.col，然后在col里面有另一个div来显示卡片。但是我对div的重叠和div的高度有一些问题（为了得到正方形图像，不管屏幕大小如何）。获得图像结果的最佳解决方案是什么

提前谢谢

<div class='row'>
    <div class='col'>
      <div class='round-container'>
        <i class='material-icons'>android</i>
        <a href='homepage.php?page=myevents'>My events</a>
      </div>
    </div>
    <div class='col'>
      <div class='round-container'>
        <i class='material-icons'>android</i>
        <a href='homepage.php?page=myevents'>My events</a>
      </div>
    </div>
  </div>
  <div class='row'>
    <div class='col'>
      <div class='round-container'>
        <i class='material-icons'>android</i>
        <a href='homepage.php?page=myevents'>My events</a>
      </div>
    </div>
    <div class='col'>
      <div class='round-container'>
        <i class='material-icons'>android</i>
        <a href='homepage.php?page=myevents'>My events</a>
      </div>
    </div>
  </div>

------------ css --------
.row {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
 }

.col {
  flex-basis: 100%;
  flex: 1;
  font-size: 1em;
  max-height: 45px;
}

.round-container {
   margin: 20px;
   background: #efefef;
   border-radius: 99999px;
}

i.material-icons {
   display: block;
}

安卓
安卓
安卓
安卓
------------css--------
.行{
显示器：flex；
弯曲方向：行；
柔性包装：包装；
}
上校{
弹性基准：100%；
弹性：1；
字号：1em；
最大高度：45像素；
}
.圆形容器{
利润率：20px；
背景：#efef；
边界半径：99999像素；
}
i、 材质图标{
显示：块；
}

---

您可以在非弹性子对象上使用

100%

的垂直填充，使高度与宽度成比例，然后在其中放置一个包含所需内容的元素

.row{
显示器：flex；
柔性包装：包装；
最大宽度：960像素；
宽度：50%；
保证金：自动；
证明内容：之间的空间；
}
上校{
弹性：0计算（50%-.5em）；
字号：1em；
边缘底部：1米；
}
.圆形容器{
背景：#efef；
垫底：100%；
位置：相对位置；
}
.内部{
位置：绝对位置；
顶部：0；左侧：0；右侧：0；底部：0；
显示器：flex；
对齐项目：居中；
证明内容：中心；
弯曲方向：立柱；
}
i、 材质图标{
显示：块；
}

安卓
安卓
安卓
安卓

请分享您目前掌握的代码。堆栈溢出不是代码编写服务。我已经添加了code@MarcoBidoli只是想让我明白你的问题。CSS使用圆角，您希望它是正方形而不是圆形，并且所有正方形的大小都相同。我理解正确了吗？圆角不是问题，但是是的，我需要所有的div都是正方形，并且彼此等距谢谢！它起作用了