Html 如何将div元素彼此排列在css下

请帮助我将div元素彼此排列在一起，这样它们在这个屏幕截图上看起来就像一个均衡器，建议如何从列表中删除点。我已经尝试了一种使用css属性（列表样式类型：none）删除这些点的常用方法

还有一件事，如何使这个均衡器在渐变色，从上到下从浅到深

提前谢谢

*{
填充：0；
保证金：0；
}
身体{
背景:#333333；
}
李：第一个孩子{
边框左上半径：5px；
边框右上角半径：5px；
}
ulli{
背景：线性梯度（橙色、黄色）；
保证金：5px；
}
.街区{
位置：相对位置；
顶部：40px；
左：15px；
显示：内联块；
宽度：40px；
高度：20px；
}

均衡器













































 > p>我会考虑一个元素来实现这个布局并使用高度来控制大小：


正文{
背景:#333333
}
.equ{
显示：内联块；
宽度：40px；
高度：180像素；
边界半径：5px5px0；
背景：
线性梯度（透明80%，#333 20%）0/100%40px，
线性梯度（橙色、黄色）；
}
使用CSS网格，如下所示：

神奇之处在于网格布局：

.col{
  display:grid;
  grid-template-columns:repeat(3, 1fr); // repeat 3 columns
  grid-column-gap: 2px; // 2px gap between
  align-items: end; // ensure items align at the bottom
}

梯度呢？这是主要的问题有几个选项-你可以让堆栈透明，并在堆栈上加一个渐变。或者为每个块添加渐变。我只是想举一个例子，说明如何使用Grid轻松实现这种布局。我不是OP:）我知道怎么做；）但是它应该在你的问题里面，因为OP要求它我累了，要睡觉了！但你看，我已经更新了笔：P