我想使用 react 以 3*X 的網格方式顯示圖像

Question

我有一個包含圖像 url 的數組列表。 我想使用 react-bootstrap 將每個項目綁定到一個 div（庫不受約束，但它應該與 react 兼容）。 我想以一種方式對齊 div，在每一行中我將只有 3 個圖像，如果集合中有第 4 個項目，則它會滑動到下一行。

下面是合集

const images = [
    {
      src:
        'https://images.unsplash.com/photo-1509420316987-d27b02f81864?dpr=1&auto=format&fit=crop&w=1500&q=80&cs=tinysrgb&ixid=dW5zcGxhc2guY29tOzs7Ozs%3D',
      width: 1500,
      height: 1000,
    },
    {
      src:
        'https://images.unsplash.com/photo-1509641498745-13c26fd1ed89?dpr=1&auto=format&fit=crop&w=1000&q=80&cs=tinysrgb&ixid=dW5zcGxhc2guY29tOzs7Ozs%3D',
      width: 666,
      height: 1000,
    },
    {
      src:
        'https://images.unsplash.com/photo-1491146179969-d674118945ff?dpr=1&auto=format&fit=crop&w=1500&q=80&cs=tinysrgb&ixid=dW5zcGxhc2guY29tOzs7Ozs%3D',
      width: 1500,
      height: 844,
    },
{
      src:
        'https://images.unsplash.com/photo-1509420316987-d27b02f81864?dpr=1&auto=format&fit=crop&w=1500&q=80&cs=tinysrgb&ixid=dW5zcGxhc2guY29tOzs7Ozs%3D',
      width: 1500,
      height: 1000,
    },
    {
      src:
        'https://images.unsplash.com/photo-1509641498745-13c26fd1ed89?dpr=1&auto=format&fit=crop&w=1000&q=80&cs=tinysrgb&ixid=dW5zcGxhc2guY29tOzs7Ozs%3D',
      width: 666,
      height: 1000,
    }
  ]
 

Answer 1

將所有圖像放入容器並使用網格

.container {
      display: grid;
      grid-template-columns: repeat(4, 1fr);
      grid-row-gap: 10px;
}

img {
       width: 200px;
       height: 200px;
}

Answer 2

我會用 display: flex 制作一個包裝 Div。

<div id="img-wrapper">
 <div><img src="your image" /></div>
 <div><img src="your image" /></div>
</div>

CSS：

#img-wrapper {
 display: flex;
 flex-wrap: wrap;
}

#img-wrapper > div {
 flex: 0 1 33%;
}

flex: 告訴 child-div 它是否應該增長、收縮以及它應該具有的大小：

彈性：“彈性增長”“彈性收縮”“彈性基礎”；

編輯：正如 Baruch Mashasha 所說，網格會更好。

Answer 3

我會使用 Bootstrap 類為此創建一個網格，就像這樣......

<div className="row">
 <div className="col"></div>
 <div className="col"></div>
 <div className="col"></div>
</div>

如果你想要另一排，你可以繼續這個想法。 您可以在此處查看： https : //getbootstrap.com/docs/4.0/layout/grid/以獲得更詳盡的解釋，並根據您的喜好進行自定義。