在css中创建长方体模型

我需要一点帮助

我想创建如图中所示的长方体模型，有人能帮我吗

我已经写了代码，但我不知道如何做得更好

.container{
显示器：flex；
调整内容：灵活启动；
弯曲方向：行；
柔性包装：包装；
}
.卡片{
背景：#cecdcd；
颜色：#000；
位置：相对位置；
宽度：110px；
高度：110px；
利润率：10px；
溢出：隐藏；
单词包装：打断单词；
边界半径：10px；
过渡时间：200ms；
}

---

CSS网格更适合您的需要

例如：

.container {
  display: grid;
  grid-template-columns: repeat(3, 12px);
  grid-template-rows: repeat(3, auto);
}

---

你可以在这里找到更多信息：

如果你希望你的内容是正方形（110px

宽度和
高度），就像你的情况一样，我建议你使用网格

这是一个完整的网格指南

否则，我建议在
.container
类中使用
justice content:space-between


.container{
显示器：flex；
证明内容：之间的空间；
弯曲方向：行；
柔性包装：包装；
}
.卡片{
背景：#cecdcd；
颜色：#000；
位置：相对位置；
宽度：110px；
高度：110px；
利润率：10px；
溢出：隐藏；
单词包装：打断单词；
边界半径：10px；
过渡时间：200ms；
}

像这样的东西？


.container{
显示器：flex；
调整内容：灵活启动；
弯曲方向：行；
柔性包装：包装；
最大宽度：900px；
保证金：0自动；
边框：1px实心#000；
}
.卡片{
弹性基础：计算（（100%-60px）/3）；
背景：#cecdcd；
颜色：#000；
位置：相对位置；
/*宽度：110px*/
高度：110px；
利润率：10px；
溢出：隐藏；
单词包装：打断单词；
边界半径：10px；
过渡时间：200ms；
}

HTML
CSS
.集装箱{
显示器：flex；
对齐项目：居中；
证明内容：中心；
弯曲方向：行；
柔性包装：包装；
}
.卡片{
背景：#cecdcd；
颜色：#000；
位置：相对位置；
宽度：110px；
高度：110px；
利润率：10px；
溢出：隐藏；
单词包装：打断单词；
边界半径：10px；
过渡时间：200ms；
}
你可以分享屏幕截图吗..我无法打开图像..我不允许做图像url@masterOne如果要限制一行中的3或4，请使用行网格系统，并尝试调整内容：间距如果视图端口大小改变，可以获得相同的高度和宽度吗？@masterOne，唯一的方法，我知道-是使用内部块，它将保存卡的纵横比<代码>填充底部
用于此操作的属性。或者你可以用新问题问它。
HTML

<div class="container">
  <div class="card">
  </div>
   <div class="card">
  </div>
   <div class="card">
  </div>
   <div class="card">
  </div>
   <div class="card">
  </div>
   <div class="card">
  </div>
   <div class="card">
  </div>
   <div class="card">
  </div>
   <div class="card">
  </div>
   <div class="card">
  </div>
   <div class="card">
  </div>
  <div class="card">
  </div>
   <div class="card">
  </div>
   <div class="card">
  </div>
   <div class="card">
  </div>
   <div class="card">
  </div>
   <div class="card">
  </div>
   <div class="card">
  </div>
</div>






CSS

.container {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: row;
  flex-wrap: wrap;
}

.card {
 background: #cecdcd;
  color: #000;
  position: relative;
  width: 110px;
  height: 110px;
  margin: 10px;
  overflow: hidden;
  word-wrap: break-word;
  border-radius: 10px;
  transition: 200ms;
}