网格布局，每个元素只占用它所需的空间

Question

我目前有这张照片显示：

由以下人员制作：

.gallery-grid {
     display: grid;
     grid-template-columns: repeat(4, 1fr);
 }

我看过，似乎不可能让每个元素只占用它所需的空间而不是最高图像的高度？我已经尝试将grid-auto-rows设置为auto，这不会改变任何内容。

grid的任何替代解决方案都可以。我已经尝试了flexbox并设置了flex-basis，但似乎无法正常工作。

Answer 1

不需要网格或弹性框的简单回答：

我只需将.gallery-grid设为column-width: 300px

即可