在React中實作類似Pinterest的動態圖片的CSS網格

Question

所以我正在嘗試使用CSS Grid來製作一個類似Pinterest的圖片圖庫。所以不同高度的圖片可以相鄰，每個圖片可以佔用空白空間。但是我看到的所有範例都是根據他們想要的高度在每個圖片上添加不同的類，而我想從資料庫動態添加圖片。

我嘗試了這樣做：

<div className=‘gallery’>
<img className=‘image’> </img>
<img className=‘image’> </img>
<img className=‘image’> </img>
<img className=‘image’> </img>
</div>

我的CSS檔：

.gallery{
max-width: 80vh;
display: grid;
grid-template-columns:repeat(3,1fr);
}

.image{
max-width: 200px;
height: 100%;
object-fit: cover;
}

但是這樣小的圖片在同一行，大的圖片在另一行，而我希望它們是隨機的。

有沒有辦法在不為每個圖片添加不同的類別的情況下實現這一點？

Answer 1

Pinterst使用垂直對齊。所以，如果你想複製它，你應該創建垂直的盒子，它們相鄰並具有固定的寬度。 並顯示盡可能多的行，以適應螢幕的大小。 （如果你調整Pinterest視窗的寬度，整個頁面會重新生成，但這超出了你的問題範圍，我猜） 所以我建議使用div或甚至一個只有一行和一個長列的表格。

<table>
  <tr>
    <td>图片</td>
    <td>图片</td>
    <td>图片</td>
  </tr>
</table>

當然是動態的。 （我為較小的螢幕創建了一個有3列的長行） 從這裡開始，你可以將圖片加入每一列，將tr的寬度設定為200px，圖片的寬度設定為100%。